Spread the love

Как асинхронно загрузить кнопку Facebook?

Почти в каждом блоге или веб-сайте есть кнопка «Мне нравится», «Поделиться» или «Подписаться».

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

Это увеличит время загрузки вашего сайта и ухудшит оценку SEO. Это просто не SEO, но также портит пользовательский опыт.

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

Обновление: новые фрагменты кода, предлагаемые 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? Прочтите этот пост, в котором объясняется, как оптимизировать производительность без плагина. И если вы ищете плагин для социальных сетей, который не тормозит, я настоятельно рекомендую Новашер.

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

Понравилось читать статью? Как насчет того, чтобы поделиться с миром?

x