D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2017 год

RSS лента новостей, Подписка по Email

      Асинхронная загрузка комментариев и других скриптов Вконтакте - улучшаем Google PageSpeed Insights

         И заодно решаем проблему с блокировкой ВК и Яндекса в Украине. Ну и на рабочих местах в некоторых организациях, где доступ к соцсетям закрыт криво.

(06.06.2017 ) Асинхронная загрузка скриптов Вконтакте и Яндекса - улучшаем Google PageSpeed Insights - И решаем проблему с блокировкой ВК в Украине

         Почему это так важно?
         При синхронной (обычной) загрузке скрипта браузер ждет его полной загрузки. И только потом показывает посетителю идущий ниже в коде контент. Так как обычно все скрипты идут в <HEADER> страницы, при блокировке домена или его «подвисании», дальнейшая загрузка может занимать до 3 минут. Нужно также учесть, что скрипт комментариев ВК весит около мегабайта. И на мобильных устройствах может грузиться довольно долго.
         При асинхронной загрузке браузер выполнят скрипты по мере загрузки. И не ждет их.

         Все замечательно, но возникает одна проблема. Можно легко получить асинхронный код для рекламы Яндекса и Гугла. Даже для блока «Поделиться» Яндекса (достаточно добавить атрибут async в скрипт).
         Но с Контактом все плохо. У него дополнительные параметры идут прямо в коде страницы. И если основной скрипт не успел загрузиться, ничего работать не будет.
         Я пробовал заменить атрибут async на defer, который должен обеспечить правильный порядок загрузки скриптов (асинхронно) и заставлять их срабатывать только после отрисовки страницы.... но с ВК ничего не вышло. Хотя, позже я использовал defer для блока кнопок от Яндекса (вместо async). Ошибок пока не было.

         В интернете полно одинаковых сложных асинхронных кодов для комментариев Вконтакте. Все с какими-то циклами, созданием элементов и прочей фигней. Мой же - забавный и простой.

<div id='vk_comments'></div>
<script type="text/javascript">
function start(){
VK.init({apiId: 2900000, onlyWidgets: true});
VK.Widgets.Comments("vk_comments", {limit: 5, width: "496", attach: "*"});
}
</script>
<script async onload="start();" type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>

         Скрипту просто добавляется async и функция start при загрузке: onload="start();" В самой функции я вызываю комментарии как обычно - с нужными мне параметрами и ID блока (apiId: 2900000).
         В принципе, это все! Если нужно добавить на страницу еще одну кнопку лайка или виджет комментариев, просто переносим основной скрипт ниже, добавляя ему в onload вызовы функции start2(); start3(); и так далее. А в нужных местах на странице расставляем вызов кнопок, окруженных function start2(), function start3() и так до бесконечности.

         В итоге, PageSpeed Insights у меня лично увеличился процентов на 15. Да и сайт стал открываться практически моментально.

         Ну и известная всем информация по обходу блокировки Яндекс Метрики в Украине:
         s.src = "https://mc.yandex.ru/metrika/watch.js";
         меняем на
         s.src = "https://d31j93rd8oukbv.cloudfront.net/metrika/watch_ua.js";