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

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

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

Внешние сервисы, блокирующие скорость загрузки сайта.

На всех сайтах, особенно больших, очень много стороннего кода, так называемых трекеров. Это коды внешних сервисов, подключенных к сайту — маркетинговые инструменты, инструменты аналитики, А/В-тестирования.
Их можно распознать на любом сайте (наличие и количество), поставив расширение Ghostery в браузер Google Chrome.

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

Кроме трекинговых утилит, куки-отслеживателей, Яндекс-метрики, Google-аналитики, Roistat и т. д., есть еще и отдельные сервисы для создания поп-апов (pop-up), квизов (Quiz — викторина), чатов, виджетов, кнопок социальных сетей (типа AddThis), где есть и своя аналитика.

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

Многое можно было сделать самостоятельно на стороне сайта. В место этого люди подключают внешние сервисы. Где не минимизированные Java-скрипты и CSS-стили, ничего не кэшируется.
Это уже беда 21 века.

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

Вот здесь, как раз и кроется основная проблема быстродействия сайтов. Внешние скрипты блокируют основной поток, мешают взаимодействию сайта с пользователем.
Показатель TTI — время до взаимодействия с пользователем (PageSpeed Insights) равен 20, а то и 50 секунд. Представляете, сколько ресурсов тратится теми же гаджетами, пока загружается сайт — батарея садится.

Подключение сторонних сервисов.

Сторонние сервисы нужно подключать во многом не так, как предлагают их инструкции.
Использовать отложенную загрузка скриптов по времени, подключать тогда, когда пользователь выполнил какое-то действие — скролл (scroll), сенсорный старт (touch start), щелчок мыши (mousedown), изменение размеров окна (resize) и другие.
Знакомство человека с сайтом всегда начинается со скролла сайта, его визуальной оценки.

Тормозить могут внешние коды, выполняющие задачи, ненужные для первого взаимодействия с посетителем.
Особенно, когда подгружаются некоторые скрипты, необходимые только для настольного компьютера (desktop), а в мобильной версии только грузят процессор.

А теперь, конкретно, перейдем к рассмотрению скриптов для отложенной загрузки аналитических сервисов Google Analytics и Яндекс-метрики.

Скрипты для отложенной загрузки кода Google Analytics.

Потребность в использовании отдельного скрипта для отложенной загрузки кода Google Analytics возникает не всегда.
Усовершенствуя инструменты тестирования PageSpeed Insights скорости загрузки страниц сайтов, Google позаботился и о своих кодах аналитики — применив функцию асинхронной загрузки asunc.

Совсем недавно Google предложил заменить тег Google Аналитики (analytics.js) на новый тег (gtag.js). Вы его можете увидеть и прочитать о его преимуществах в своем аккаунте.
Это скрипт, который подключается самостоятельно или через Google Tag Manager.
Вот его пример:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());</pre>
gtag('config', 'UA-XXXXXXXX');
</script>

Во многих Темах-шаблонах WordPress, особенно Premium, предусмотрена вставка кода, и загрузка его уже оптимизирована. Но не везде. А также на сайтах, созданных программистами под заказ, продающих одностраничников — Landing Page.

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

А.Белогородцев, из LOADING.express, предложил три варианта скрипта для отложенной загрузки кода аналитики — отдельно для Google Analytics, Яндекс-метрики и универсальный для всех.

Здесь пример кода подключения Google Analytics для отложенной загрузки, в котором указан src:

<script>
var fired = false;
window.addEventListener('scroll', () => {
if (fired === false) {
fired = true;
setTimeout(() => {
 // Пример подключения скрипта, который просто использует вставку через <script src="..."></script>
 // В данном случае - это пример вставки гугл аналитикс
var GTMObject = document.createElement("script");
GTMObject.src = 'https://www.googletagmanager.com/gtag/js?id=<ID>';
GTMObject.async = true;
document.getElementsByTagName('head')[0].appendChild(GTMObject);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '<ID>');
}, 5000);
}
},{passive: true});
</script>

Нельзя же, весь код аналитики туда вставить.
Код, который дает Google Analytics, в скрипте оборачиваем в дополнительный Тайм-аут. Не забываем вписать значение ID (UA-XXXXXXXX) вашего кода аналитики.
Время отложенной загрузки в скрипте 5000 м/сек — 5 секунд.

Параметр времени выставляете сами — по результатам тестирования, чтобы сам код не блокировал основной поток (минимальное время).
В этот скрипт, через src, можно подставлять и другие коды от Google, с каждой строки отдельно. С одним лишь условием — время отложенной загрузки скрипта одинаково.
Если время разное, значит и скрипты отдельные.

Есть еще и Универсальный вариант скрипта — своего рода обвертка, используемая здесь.
Через него можно откладывать все внешние скрипты: вроде живосайта, метрики, аналитики, обратные звонки, коллтрекинги и так далее.

Все три скрипта, и отдельно варианты для WordPress, можно скачать в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog.
И не только это. Любые дополнительные материалы — Premium-темы, плагины для WordPress.

Скрипт для отложенной загрузки кода Яндекс-метрики.

Скрипт для отложенной загрузки кода Яндекс-метрики, один из самых востребованных. До сих пор идут дискуссии в Рунете — может ли код метрики тормозить загрузку сайта?

Яндекс-метрика, действительно, может очень сильно блокировать основной поток.

Самой настройкой функционала метрики замедлить сайт нельзя. Даже, если вы не включаете веб-визор (тепловые-карты), они все равно грузятся — код выполняется.
Единственное, что на каждый клик не будут отправляться запросы о действиях пользователей. Но и это не так страшно — запросы не так замедляют скорость сайта, как сам код метрики.
А если там не только Яндекс-метрика?

Передавайте привет Яндексу — когда он, наконец-то представит новый оптимизированный код метрики для всех своих пользователей.
Код должен быть меньше, выполняться в разы быстрее — не так сильно тормозить сайт.

Скрипт для отложенной загрузки кода Яндекс-метрики, по типу обвертки, почти идентичен скрипту Google Analytics, с небольшой разницей.

В новом скрипте, код, который дает сервис Яндекс-метрика, так же оборачивается в дополнительный Timeout.
Время отложенной загрузки в скрипте выставляется исходя из результатов тестирования, чтобы сам код не блокировал основной поток (время минимальное).
В коде подставляется только свой ID счетчика метрики.

Когда будет отложено время выполнения Яндекс-метрики, при замере скорости на PageSpeed, вы увидите, чем на самом деле — еще параллельно, в основном потоке блокируется сайт — ранее скрытый внешний скрипт, который тормозит.

Для отображения счетчика в виджете сайта WordPress, используется код informer — верхняя часть из кода Яндекс-метрики самого сервиса:

<!-- Yandex.Metrika informer -->
<a href="https://metrika.yandex.ru/stat/?id=ХХХХХХХХ&amp;from=informer"
target="_blank" rel="nofollow"><img src=
"https://informer.yandex.ru/informer/ХХХХХХХХ/3_1_FFFFFFFF_EFEFEFFF_0_uniques"
style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title=
"Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" 
class="ym-advanced-informer" data-cid="ХХХХХХХХ" data-lang="ru" /></a>
<!-- /Yandex.Metrika informer -->

Вместо ХХХХХХХХ подставляете номер (ID) вашего счетчика.

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

В этот скрипт можно вставить не только метрику, но и онлайн-консультант, чат.
Чаты, вообще, можно откладывать на 10 секунд — это минимальное время, когда посетитель начнет с ним какие-либо действия.
Кстати, когда чат появляется через определенное время, он больше привлекает к себе внимание.

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

Вам в помощь версия видео-урока из раздела Profi-bizblog:

Весь набор скриптов от LOADING.express предназначен для всех сайтов, любой CMS. Выбор того или иного вида скрипта зависит от структуры вашего сайта, его движка.
Возможно нужно будет что-то изменить.

Обязательно тестируйте скрипты на работоспособность. Проверка тех же счетчиков Яндекс-метрики на правильность подключения. Она очень капризна.

Иногда бывает несовместимость с каким-либо кодом. Особенно в свете последних кардинальных обновлений того же WordPress, за которым не успевают разработчики плагинов.

Продолжение темы об оптимизации Java-скриптов и кода стилей CSS, их асинхронной или отложенной загрузке, читайте в следующей статье.

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

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

Не забываете нажать на кнопку Поделиться в социальных сетях.