Як асинхронно завантажити кнопку Facebook?
Майже в кожному блозі чи веб-сайті є кнопки “Подобається”, “Поділитися” чи “Підписатися” на Facebook.
Як ви, напевно, знаєте, стандартний код соціальних мереж Facebook завантажується синхронно з ресурсами вашої веб-сторінки.
Це збільшить час завантаження вашого веб-сайту та погіршить рейтинг SEO. Це просто не SEO, але також псує досвід користувача.
Я впевнений, що кнопка соціального доступу Facebook є важливою, але не як ваш фактичний код, який потрібно відображати першим. Багато блогів або веб-сайтів мають більший час завантаження сторінок через код Facebook за замовчуванням.
Асинхронне використання коду Facebook допоможе вам завантажувати веб-сторінку на 0,5–1,5 секунди швидше. Це те, що вам потрібно, щоб швидше завантажити кнопку «Подобається», «Поділитися» або «Підписатися» на Facebook.
Ось код, який я отримав Розробник Facebook поставити лайк і поділитися на 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.
Я впевнений, що вам подобається, щоб ваша веб-сторінка завантажувалася швидше, і я сподіваюся, що це вам допоможе.
Вам сподобалось читати статтю? Як щодо того, щоб поділитися зі світом?