Новые скрипты для отложенной загрузки кода внешних сервисов, чтобы, в итоге, сократить время загрузки сайта в целом. Предлагаю Вам те наработки, что в данное время использую сам.
Хочу еще раз напомнить — в марте 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 возникает не всегда.
Усовершенствуя инструменты тестирования 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=ХХХХХХХХ&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, чтобы вовремя знать о выходе нового поста.
Не забываете нажать на кнопку Поделиться в социальных сетях.