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

Я создаю простой и быстрый сайт, и я стараюсь оптимизировать сайт настолько, насколько смогу. Я заметил, что кнопки в социальных сетях замедляют работу сайта довольно много. Я включаю кнопку "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:

Ответы

Ответ 1

Вы можете попробовать

$(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, чтобы они выглядели выше; таким образом вы можете иметь их там, где хотите, но они, похоже, не мешают времени загрузки страницы.

Вы можете попробовать более простые альтернативы oldschool, например здесь 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, чтобы увидеть, действительно ли они вам нужны, т.е. для вашего сайта происходит медленное снижение трафика? Имеет ли кнопки совместного доступа больше трафика, чтобы гарантировать их присутствие?

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

Вы можете просто добавить ссылки, которые отправляют посетителя в фактическую социальную сеть, и открыть окно совместного использования с предварительно заполненным 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" ).

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

Ответ 5

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

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

Ответ 6

Попробуйте использовать async-загрузку для скриптов Social init:

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

Ответ 7

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

Ответ 8

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

<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>

Ответ 9

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

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

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

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