Asynchronnaya-zagruzka-widgetov
Оптимизация асинхронной загрузки кода виджетов социальных сетей
2 февраля 2021
Оптимизация_HTML_CSS_JavaScript
Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress
1 марта 2021
Asynchronnaya-zagruzka-widgetov
Оптимизация асинхронной загрузки кода виджетов социальных сетей
2 февраля 2021
Оптимизация_HTML_CSS_JavaScript
Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress
1 марта 2021
Показать все

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

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

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

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

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

tracker

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

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

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

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

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

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

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

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

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

Parametr_TTI

А теперь, конкретно, перейдем к рассмотрению скриптов для отложенной загрузки аналитических сервисов 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, за которым не успевают разработчики плагинов.

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

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

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

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

4 Comments

  1. Сейчас пытаюсь оптимизировать свой сайт. Гугл-анализатор выдаёт информацию что Яндекс-Метрика здорово тормозит открытие сайта, поэтому буду налаживать скрипт отложенной загрузки. Большое спасибо за подробную инструкцию!

    • Здравствуйте, Михаил!
      Если сможете сами, пожалуйста.
      Сам скрипт для отложенной загрузки Яндекс-метрики
      находится в Учебном разделе Уровень Profi-bizblog.
      Читайте в статье.
      Я его в открытый доступ не выставлял — Яндекс не жалует такие публикации.
      В этом же разделе можно скачать целый Блок скриптов для оптимизации сайта.
      Удачи Вам.

  2. Очень нужен был скрипт Google Analytics для отложенной загрузки. Спасибо!

    Еще сильно тормозил сайт от кода Фейсбука, но его я вообще удалила.

    • Здравствуйте, Nelly!
      Код виджета (и не только) от Facebook также можно настроить с отложенной загрузкой.
      Все скрипты в учебном разделе сайта — читайте статью.

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

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