Как асинхронно загрузить кнопку Facebook?
Почти в каждом блоге или веб-сайте есть кнопка «Мне нравится», «Поделиться» или «Подписаться».
Как вы, возможно, знаете, код социальных сетей Facebook по умолчанию загружается синхронно вместе с ресурсами вашей веб-страницы.
Это увеличит время загрузки вашего сайта и ухудшит оценку SEO. Это просто не SEO, но также портит пользовательский опыт.
Я уверен, что кнопка социальных сетей Facebook важна, но не как ваш фактический код, который должен отображаться первым. Многие блоги или веб-сайты имеют более высокое время загрузки страницы из-за кода Facebook по умолчанию.
Асинхронное использование кода Facebook поможет вам загрузить веб-страницу на 0,5–1,5 секунды быстрее. Это то, что вам нужно, чтобы быстрее загружать кнопку «Нравится», «Поделиться» или «Подписаться».
Вот код, который я получил от Разработчик Facebook за лайк и репост на toadmin.ru.com
<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_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Теперь все, что мне нужно добавить, это следовать одной строке в моем коде, что поможет быстрее загружать кнопки.
js.async=true;
Таким образом, модифицированный код будет таким:
<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.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Разве это не легко?
Обновление: новые фрагменты кода, предлагаемые Facebook, не требуют вышеуказанного, поскольку они уже включают асинхронный скрипт, который вы можете увидеть ниже.
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>
Используете WordPress? Прочтите этот пост, в котором объясняется, как оптимизировать производительность без плагина. И если вы ищете плагин для социальных сетей, который не тормозит, я настоятельно рекомендую Новашер.
Я уверен, что вам нравится, когда ваша веб-страница загружается быстрее, и я надеюсь, что это поможет вам.
Понравилось читать статью? Как насчет того, чтобы поделиться с миром?