Оптимізація завантаження кнопок Facebook: асинхронний підхід
На багатьох веб-ресурсах, чи то блоги, чи веб-сайти, незмінно присутні кнопки соціальної взаємодії Facebook, такі як “Подобається”, “Поділитися” або “Підписатися”.
Зазвичай, стандартний код, наданий Facebook для цих кнопок, завантажується одночасно з іншими елементами вашої веб-сторінки.
Такий підхід може значно збільшити час, необхідний для повної загрузки сторінки, і негативно вплинути на її позицію в результатах пошуку (SEO). Це не тільки шкодить SEO, але й погіршує враження користувача від сайту.
Звісно, інтеграція кнопок соціальних мереж є важливою, але вони не є пріоритетними елементами, які повинні завантажуватися в першу чергу. Нерідко, довгий час завантаження багатьох веб-сторінок є наслідком саме стандартного коду Facebook.
Асинхронне завантаження коду Facebook дозволяє пришвидшити завантаження вашої веб-сторінки на 0,5–1,5 секунди. Це дозволить вам швидше відобразити кнопки “Подобається”, “Поділитися” або “Підписатися” на Facebook.
Нижче представлений початковий код, який надає Facebook Developers для розміщення кнопок “Подобається” та “Поділитися” на прикладі techukraine.net.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, рекомендуємо ознайомитися з матеріалом про оптимізацію продуктивності без застосування плагінів. А для тих, хто шукає плагін для соціальних мереж, який не впливатиме на швидкість завантаження, рекомендуємо звернути увагу на Novashare.
Сподіваємося, ви цінуєте швидке завантаження вашої веб-сторінки, і що ця інформація виявиться вам корисною.
Стаття вам сподобалася? Можливо, ви захочете поділитися нею зі своїми читачами?