Я создаю простой и быстрый сайт, и я стараюсь оптимизировать сайт настолько, насколько смогу. Я заметил, что кнопки в социальных сетях замедляют работу сайта довольно много. Я включаю кнопку "Facebook Like", кнопку "Twitter" и кнопку "Google+". Поэтому я провел несколько тестов:
Веб-сайт без кнопок социальных сетей, время загрузки 0.24s:
Веб-сайт с кнопками социальных сетей, время загрузки 1.38s:
Вот мой код:
<div id="social">
<!-- FB -->
<div id="fb-root"></div>
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="#" onclick="location.href='http://facebook.com/textsearcher'; return false;" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- TWITTER -->
<a href="#" onclick="location.href='https://twitter.com/share'; return false;" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="#" onclick="location.href='http://www.textsearcher.com/'; return false;"></div>
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
</div>
Итак, я пробовал несколько вещей, чтобы загрузить эти социальные кнопки без их замедления загрузки сайта.
Загрузка кнопок после одной второй задержки через JavaScript:
setInterval(function(){
$("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);
Это не помогло, кнопки не загружались правильно, и они прослушивались.
Загрузка кнопок после того, как документ готов:
$(document).ready(function() {
$("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});
Это тоже не помогло. Кнопки загружены просто отлично, но время загрузки сайта было > 1,00 секунд.
У меня заканчиваются идеи. Любой способ загрузить их без замедления веб-сайта?
PS. Использовано Время загрузки страницы для хром в этих тестах
РЕШЕНИЕ:
Благодаря CodeMonkey для его ответа я в конечном итоге решил эту проблему, загрузив социальные кнопки после загрузки страницы целиком.. Я переместил необходимый код JavaScript (для кнопок социальных сетей) в отдельный файл, чтобы сделать мой HTML/разметку немного чище.
JS (в отдельном файле, social.js):
/* Facebook*/
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
/* Twitter */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
/* G+ */
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
HTML:
<script>
$(window).bind("load", function() {
$.getScript('js/social.js', function() {});
});
</script>
<!-- FB -->
<div id="fb-root"></div>
<div class="fb-like" data-href="#" onclick="location.href='http://facebook.com/textsearcher'; return false;" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- TWITTER -->
<a href="#" onclick="location.href='https://twitter.com/share'; return false;" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="#" onclick="location.href='http://www.textsearcher.com/'; return false;"></div>
Итак, после того, как эта загрузка снова стала нормальной, 0.24s:
