Кнопки социальных сетей замедляют время загрузки веб-сайта

Я создаю простой и быстрый сайт, и я пытаюсь оптимизировать сайт столько, сколько я могу. Я заметил, что кнопки социальных сетей довольно сильно замедляют работу сайта. Я включаю кнопку Facebook Like, кнопку Twitter и кнопку Google+. Поэтому я провел несколько тестов:

сайт без кнопки социальных сетей, время загрузки 0.24 s:

сайт С кнопки социальных сетей, время загрузки 1.38 s:

вот мой код:

<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="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
    <!-- TWITTER -->
    <a href="https://twitter.com/share" 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="http://www.textsearcher.com/"></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. Используется время загрузки страницы плагин для chrome в этих тестах

устранение:

спасибо 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="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- TWITTER -->
<a href="https://twitter.com/share" 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="http://www.textsearcher.com/"></div>

так что после этого тайминги нагрузки снова были нормальными, 0.24 s:

9 56
javascript html facebook-social-plugins google-plus-one twitter-button

9 ответов:

вы могли бы попробовать 

$(window).load(function() {

вместо 

$(document).ready(function() {

так и будете ждать, пока ваши изображения и все загрузится.

Если это не поможет, то я бы предложил, чтобы они появлялись только при наведении. Есть куча статических изображений / CSS спрайтов, которые заменяются, когда пользователь нависает над ними.

Если вы не хотите этого дополнительного шага, и у вас есть доступ к серверу для установки модулей, вы можете попробовать Google mod pagespeed, чтобы отложить JavaScript для вас https://developers.google.com/speed/pagespeed/module/filter-js-defer

Если у вас нет доступа к серверу, вы можете попробовать маршрут CDN, ракетный загрузчик Cloudflare очень интересен, я тестирую его в данный момент по аналогичным причинам и вижу увеличение скорости ~ 33%http://www.cloudflare.com/features-optimizer

Если это не поможет, вы можете попробовать старый фаворит приклеивания кнопок в нижней части страницы и перемещение с помощью CSS, чтобы они выглядели выше; таким образом, вы можете иметь их там, где хотите, но они, похоже, не мешают времени загрузки страницы.

вы можете попробовать более простые альтернативы старой школы, как здесь http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

или посмотреть, если сервис, как http://www.addthis.com/ или http://www.sharethis.com/ работайте быстрее для вас

конечно слон в комнате в этот момент заключается в том, что иметь 3 основные кнопки социальных сетей на странице, и для этого стоит всего лишь секунду - к сожалению, кажется довольно хорошим! Это обманчиво сложные кнопки, которые не кажутся хорошо оптимизированными,Google pagespeed insights находит на что пожаловаться со всеми из них iirc.

Так как вы принимаете 100%+ скорость удара, я бы предложил некоторые A / B тестирование, чтобы увидеть, если вы действительно нуждаетесь в них, т. е. для вашего сайта делает медленнее уменьшить трафик? Имеет ли кнопки share больше трафика, Чтобы гарантировать их присутствие?

37

социальные виджеты не должны слишком сильно замедлять время загрузки, если они не блокируют более важные скрипты, ожидающие завершения загрузки страницы. Код, который вы используете, является асинхронным, что помогает, Но в большинстве браузеров это все равно заблокирует window.onload событие. Смотрите пост Стояна здесь для получения информации о том, как можно загрузить JS SDK неблокирующим способом с помощью iframes.

Если это слишком много, и вы хотите отложить загрузку SDK или работает (и как только он работает), вот моя рекомендация:

во-первых, либо используйте библиотеку, такую как jQuery, которая обеспечивает способ подключения к DOM, готовому к кросс-платформенной моде. вот одна реализация. После того, как у вас есть "DOM ready handler", вы должны сделать одну из следующих двух вещей:

  1. переместить на JS SDK для загрузки код в свой дом готов обработчик.

  2. возьмите xfbml: true из ФБ.инициализация.(..), если он у вас есть (в данном случае нет), и возьмите xfbml=1 из URL SDK. Это предотвращает мгновенный анализ и инициализацию социальных виджетов. Затем позвоните в ФБ.XFBML.parse () в вашем обработчике DOM ready. смотрите документацию здесь для этого метода. Лучшее, что нужно сделать для производительности, это специально позвонить FB.XFBML.parse(document.getElementById('')) чтобы SDK не тратил время на весь DOM.

3

хотя этот вопрос стар, и человек, задающий его, вероятно, не увидит моего ответа, вот альтернатива для всех с той же проблемой-если вы не против пожертвовать показом количества лайков/акций/и т. д.

вы можете просто добавить ссылки, которые отправляют посетителя в фактическую социальную сеть и открыть окно обмена с предварительно заполненным URL и описанием.

код очень прост, и вы можете использовать любое изображение или текст, который вы хотите, что сделает его проще установите кнопки в соответствии с дизайном вашего сайта.

<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a>
<a href="https://twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

просто заменить URL С URL вашего сайта и текст с кратким описанием.

Это решение не требует JavaScript и поэтому очень легкий. Вы можете использовать логотипы, значок шрифта, простой текст ("Поделиться на Facebook").

Я также написал сообщение в блоге, что охватывает многие другие социальные сети.

3

время загрузки плагина (кнопка социальных сетей) будет варьироваться в зависимости от ряда факторов, в том числе (но не ограничиваясь):

  • время отклика вашего сервера (Плагины не загружаются, пока ваш код не скажет им тоже.)
  • скорость интернета пользователя (в данном случае, ваша)
  • расстояние до сервера сайта социальных сетей (например, сервер Facebook может быть расположен на другой стороне континента, создавая задержку)
  • нагрузка время веб-сайта социальных сетей в целом

это означает, что вы мало что можете сделать, кроме как сделать свой код максимально оптимизированным.

кроме того, рекомендуется запускать ваши плагины Javascript после того, как документ будет готов, если иное не указано в документации плагина. SetInterval не является хорошим подходом, так как он не знает, готова ли вся страница к изменению или нет. Поэтому, пожалуйста, не забудьте использовать $(document).ready() подход для делать что-нибудь это изменяет содержимое страницы.

2

внутри скриптов, которые загружают социальные медиа, поставить "отложить" в них.

<script defer src="http://api.facebook.com/....."></script>
1

попробуйте использовать асинхронную загрузку для социальных сценариев инициализации:

<script async="async">...</script>
1

большинство основных кнопок социальных сетей предлагают асинхронную версию своего JavaScript. Вам просто нужно прокрутить немного ниже на страницах официальной документации.

0

Попробуйте поместить кнопку like в многоразовый iframe и передать url-адрес like.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fphys.org" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>
0

Если вы пришли сюда, чтобы найти решение, как загрузить социальные плагины facebook быстрее - например, как сделать их перед окном.onload () событие происходит (из-за медленной сети на wifi / большое изображение на странице / ...) вы можете попробовать мое решение:

window.fbAsyncInit = function () {
    dispatchEvent(new Event('load'));
}

fbAsyncInit вызывается, как только загружается файл JS Facebook sdk (например, быстро), и вы можете подделать социальные кнопки для визуализации ранее (до загрузки других ресурсов, таких как изображения) с помощью пользовательской диспетчеризации событий загрузки. Будьте в курсе последствия при запуске события onload () ранее в зависимости от вашего другого кода/библиотек javascript.

другое решение-обернуть ваш социальный плагин с загрузкой sdk в iframe. FB API не будет ждать окна.onload родительского окна и будет отображать социальные плагины ранее.

0