Analiz_saita_na_PageSpeed_Insights
Оптимизация сайта под требования PageSpeed Insights
31 января 2021
Otlogennayz_zagruzka_koda_analytics
Скрипты для отложенной загрузки кода внешних сервисов
12 февраля 2021
Показать все

Оптимизация асинхронной загрузки кода виджетов социальных сетей

Asynchronnaya-zagruzka-widgetov

Оптимизация асинхронной загрузки кода виджетов социальных сетей, пожалуй, самая первая и больная тема, при тестировании на скорость отрисовки страниц сайта сервисом PageSpeed Insights.

Возьмем любую социальную сеть: русскоязычную ВКонтакте, или же Facebook. Обязательно PageSpeed предупредит — сторонний код заблокировал основной поток.

Мало того, что в инструкциях по подключению виджетов на сайт, эти сети предлагают часть кода JavaScript вставлять сразу после открытия тега <head>. Так он еще и генерирует энное количество ссылок на дополнительные их сервисы.

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

Использовать оптимизированный код у себя на сайте можно, никто и внимания не обратит. Но, если внести изменения (отличные от официальной версии) в оригинал  и предоставить его открыто для других, можно и в немилость попасть.
Сколько уже об этом писалось, а воз и ныне там.
Хотя, будем объективными, некоторые сервисы сдвинулись с места.

Оптимизация асинхронной загрузки виджета ВКонтакте.

Рассмотрим оптимизацию асинхронной загрузки виджета ВКонтакте — одной из самых популярных социальных сетей в русскоязычном сегменте интернета.
Здесь предоставлен пример кода виджета для сообществ VK, который дает сам сервис ВКонтакте.

Как это происходит в стандартном коде?
Код подгружается синхронно. Выполняется последовательно. Пока не будет загружена и выполнена библиотека VK, загрузка страницы сайта останавливается.

// Скрипт, который подгружает библиотеку ВК, которая будет выполнять ваш код:
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?168">
</script>

Код инициализации виджета:

// Код div, куда будет добавлен виджет:
<!-- VK Widget -->
<div id="vk_groups"></div>
// Скрипт, который инициализирует код и добавляет виджет:
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 4, width: "310", height: "400"}, 122647882);
</script>

ВКонтакте его предлагают поместить в начале содержания страницы (после открытия тега <head>).
Вся проблема в том, что скрипт грузится синхронно. То есть, сначала загрузится этот скрипт, загрузка страницы прервется на этом скрипте, вообще отрисовываться не будет.

Будет запрос к внешнему ресурсу, последует его ответ. Лишь после того как выполниться (интерпретируется) весь код, продолжится загрузка страницы сайта.

Но и это еще полбеды. Сам блок инициализации виджета состоит из кода в теге <div> и скрипта, который, в свою очередь, и съедает скорость загрузки страницы.
При тестировании в PageSpeed Insights, увидите еще массу ссылок на всевозможные сервисы от соцсети ВКонтакте.

Если мы этот скрипт сделаем асинхронным — добавим параметр async, загрузка страницы продолжиться. Но в таком случае нарушится порядок выполнения скриптов, потому как будет сначала подгружаться скрипт инициализации, без кода <div>.
Браузер будет загружать то, что ему легче. Первым — сам код инициализации, только после этого — библиотеку VK.

Есть еще параметр defer (отложенная загрузка). Он позволяет выполнять код отложено, но соблюдая порядок загрузки скрипта.
В таком случае, мы получим правильное выполнение данного скрипта. Но, не сможем с ним ничего сделать — отложить по времени.

Скрипт для асинхронной загрузки виджета ВКонтакте.

Чтобы решить проблему синхронной загрузки, А.Белогородцев (один из учредителей сайта LOADING.express) предложил подключать не через тег async или defer, а, непосредственно, через скрипт с функцией onload:

<script type="text/javascript">

Убирается версионность библиотек 168.
Создается переменная, объект скрипт, и внедряется в DOM тогда, когда это необходимо:

setTimeout(function(){
// создаем элемент script и добавляем его асинхронно в DOM
var VKO = document.createElement("script");
VKO.src = 'https://vk.com/js/api/openapi.js';
VKO.async = true;
document.getElementsByTagName('head')[0].appendChild(VKO);

Добавляется функция тайм-аут (setTimeout) — загрузку скрипта можно откладывать по времени, которое вам необходимо — 3сек.(3000м/сек) или 10сек.(10000м/сек).

Значение времени подбирается индивидуально для каждого сайта, в зависимости от взаимодействия с пользователями и местом расположения виджета.
Вряд ли, виджет на сайте будет расположен на первом экране, при загрузке страницы.
Хотя, бывают и исключения:

// подгружаем инициализацию виджета на загрузку
VKO.onload = function(){
// код, который дает сам виджет ВК
VK.Widgets.CommunityMessages("vk_community_messages", 
122647882, {expanded: "1",tooltipButtonText: "Есть вопрос?"});
};
},5000); // здесь указывается время в миллисекундах 5000 мс = 5 секунд
</script>

В итоге — в самом коде страницы (в WordPress — боковая колонка виджетов), вставляется только код <div>, который предоставляет соцсеть ВКонтакте, для вывода (отображения) самого виджета:

<!-- VK Widget -->
<div id="vk_groups"></div>

Весь остальной код сервиса VK заменяется на скрипт, с возможностью откладывать его загрузку по времени.
Вставляется он после открывающего тега <body> (у меня все внешние скрипты стоят перед закрывающим тегом </body>).

Этим скриптом можно инициализировать несколько разных виджетов от VK, добавляя коды инициализации в скрипт (пример, каждый с новой строки):

VK.Widgets.Group("vk_groups", {mode: 4, width: "310", height: "400"}, 122647882);

и вставляя необходимый <div> в виджетах или странице.

Полную версию этого скрипта можно скачать в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog. Регистрация платная, но во много раз дешевле стоимости полного комплекта самих скриптов.

Учебный раздел для тех, кто хочет профессионально подойти к созданию своего личного блога или тематического сайта, подписных и продающих страниц — Landing Page. Используя при этом уникальные Премиум-шаблоны и Плагины, на самом популярном и востребованном движке WordPress.

Виджет группы в Одноклассниках.

Оптимизировать асинхронную загрузку виджета группы в Одноклассниках нет необходимости.
Хоть эта социальная сеть и уступает по популярности самым именитым, но программисты здесь не поленились. Создали код виджета, который отвечает всем требованиям PageSpeed Insights при тестировании на скорость загрузки страниц сайта.
Что скажешь — молодцы!

Первая часть кода в теге <div> ставиться туда, где будет отображаться сам виджет:

<div id="ok_group_widget"></div>

Вторая часть — сам Java-скрипт, асинхронно, с функцией onload, вставляется перед закрывающимся тегом </body>:

<script>
!function (d, id, did, st) {
var js = d.createElement("script");
js.src = "https://connect.ok.ru/connect.js";
js.onload = js.onreadystatechange = function () {
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
if (!this.executed) {
this.executed = true;
setTimeout(function () {
OK.CONNECT.insertGroupWidget(id,did,st);
}, 0);
}
}};
d.documentElement.appendChild(js);
}(document,"ok_group_widget","53012638990490",'{"width":250,"height":285}');
</script>

Все просто. Если у Вас есть группа в Одноклассниках, создаете и настраиваете виджет — ширину и высоту. ID группы. Копируете и вставляете код на сайт.
При необходимости, можно отложить загрузку виджета на определенное время в м/секундах (заменяя 0 на нужное значение).
Нужно тестировать в PageSpeed Insights и смотреть рекомендации по оптимизации и производительности страниц сайта.

Оптимизация асинхронной загрузки виджета Facebook.

Над оптимизацией асинхронной загрузки самого скрипта виджета от Facebook пришлось немного повозиться.
Разработчики из LOADING.express предоставили вебмастерам только виджет для VK. Сам принцип построения скрипта для самописного сайта.
Для CMS WordPress пришлось вносить небольшие дополнения.

Используя его, нужно было самому реконструировать и оптимизировать сам код, предоставляемый Facebook.
Все разработки LOADING.express предназначены для подготовленных людей.
После некоторых консультаций, мне удалось сформировать нужный код скрипта.

Код инициализации виджета на странице (в боковой колонке виджетов WordPress), можно смело копировать и вставлять из того, что дает Facebook.
Сам код заключен в тег <div> (пример моего виджета):

<div class="fb-page" data-href="https://www.facebook.com/dg.sitinfo" 
data-tabs="timeline" data-width="" data-height="" 
data-small-header="false" data-adapt-container-width="true" 
data-hide-cover="false" data-show-facepile="true"><blockquote 
cite="https://www.facebook.com/dg.sitinfo" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/dg.sitinfo">DG.Sit-Info</a></blockquote>
</div>

SDK JavaScript, предоставленный Facebook для вставки на сайт перед тегом </body>, необходимо было переписать по принципу скрипта VK, заменив все значения от сервисов социальной сети Facebook.

В связи с тем, что после Нового Года, у меня был полностью закрыт доступ к аккаунту Facebook, по необъяснимым для меня причинам, не будем рисковать.
Сначала заставили включить двухфакторную аутентификацию (в обязательном порядке). Потом перестали приходить коды подтверждения.

Странные объяснения — людей не хватает. Причем тут люди? Потом, подтверждение личности. Что-то странное творилось. Только в конце января получил доступ.
Эту же статью мне придется постить и на своей бизнес-странице в Facebook.

В результате вышеизложенных фактов, оптимизированный скрипт виджета можете скачать в Учебном разделе Centr-Sit-Info Уровень Profi-bizblog.

Сокращенная видеоверсия урока из учебного раздела сайта Centr-Sit-Info Уровень Profi-bizblog:

 

Небольшое дополнение. Замерить скорость загрузки страниц сайта, получить рекомендации по улучшению производительности, можно не только на PageSpeed Insights.
Свой сервис предоставляет, с обновленной 7 версией Lighthouse и LOADING.express:
https://loading.express
с выбором серверов, расположенных в разных городах России, ближнего и дальнего зарубежья. Эмуляция тестирования скорости сайта из сети 3G на мобильном устройстве.

Продолжение об оптимизации скриптов для отложенной загрузки внешних сервисов читайте в следующей статье — Скрипты для отложенной загрузки кода внешних сервисов.

Нужна дополнительная информация, возникли сопутствующие вопросы? — пишите в комментариях – рад буду помочь.

Подписывайтесь на обновления Sit-Info, чтобы вовремя знать о выходе нового поста с необходимой информацией.
Не забываете нажать на кнопку Поделиться в социальных сетях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *