Асинхронная загрузка комментариев и других скриптов Вконтакте - улучшаем 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
меняем на
s.src = "https://d31j93rd8oukbv.
