Ускоряем работу сайта на этапе разработки и обгоняем конкурентов в поиске - Часть 2

Приветствую!

В предыдущей статье мы обсудили как ускорить работу своего сайта самостоятельно, как включить кеширование статических файлов, как оптимизировать JS и CSS, зачем нужен CDN и lazy loading, и почему всё это так важно.

Во второй части статьи мы подробно остановимся на следующем вопросе. Что делать с счетчиками Яндекс.Метрика, Google Analytics, пикселями ретаргетинга социальных сетей и прочими внешними скриптами, которые мы не можем кешировать на стороне сервера?

Размещать коды аналитики, пиксели социальных сетей и прочие внешние JS напрямую в коде сайта - не самое лучше решение. Как минимум потому, что эти блоки кодов нельзя оптимизировать и они будут замедлять скорость работы сайта. Об этом нужно думать ещё на этапе разработки.

Для быстрого управления множеством скриптов и оптимизации скорости загрузки сайта есть инструмент - Google Tag Manager (GTM).

Сам по себе контейнер GTM без каких-либо тегов оказывает минимальное влияние на скорость загрузки сайта. Но, если бездумно добавлять в контейнер множество тегов, то это может существенно замедлить работу сайта, особенно на смартфонах.

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

Даже асинхронные скрипты влияют на скорость работы сайта. Использование асинхронной загрузки JS не является гарантией попадания в зелёную зону теста PageSpeed Insights.

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

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

1. «Page View - просмотр страницы - gtm.js».

Данное событие означает, что контейнер GTM загружен.

2. «DOM Ready - объектная модель документа построена - gtm.dom».

Это событие говорит нам о том, что весь HTML-код страницы загружен и готов к рендерингу в браузере. У браузера есть все пути для изображений, JS и CSS файлов.

3. «Window Loaded - окно загружено - gtm.load».

Страница сайта полностью отрисована в браузере пользователя.

Схематически загрузка страницы сайта с контейнером GTM будет выглядеть вот так:

На этой наглядной схеме видно, что лучшим момент для отложенной загрузки кодов аналитики - это событие «Window Loaded - окно загружено - gtm.load».

В этом случае коды аналитики не будут мешать отрисовке страницы в браузере пользователя и страница будет загружаться намного быстрее.

Бывают сервисы, которые требуют загружать их внешние скрипты сразу после «DOM Ready». Если скрипты этих сервисов отказываются работать, то тут без вариантов, отложить их выполнение не получится и они будут замедлять скорость работы сайта.

1. Создаем в GTM новый тег.

Заходим в GTM, слева в меню нажимаем «Теги», далее нажимаем кнопку «Создать».

Имя тега – произвольно, например, AfterLoad.

Конфигурация тега – Пользовательский HTML.

Содержимое конфигурации тега:

«1500» - это 1,5 секунды, время, на которое откладываем загрузку внешних скриптов.

«afterLoad» – имя события, которое будет использовано далее.

Расширенные настройки – никаких дополнительных настроек устанавливать не нужно.

Секция триггеры – создаем новый триггер с произвольным именем, например, WindowLoaded, в настройках триггера выбираем тип «Окно загружено».

Сохраняем настройки. Настройка нового тега завершена.

2. Создаем в GTM новый триггер.

Заходим в GTM, слева в меню нажимаем «Триггеры», далее нажимаем кнопку «Создать».

Имя триггера - произвольно, например, AfterLoad.

Тип триггера – пользовательское событие.

Имя события – afterLoad.

Условия активации триггера – Все специальные события.

Сохраняем настройки. Настройка нового триггера завершена.

3. Настраиваем теги аналитики и рекламных систем.

Заходим в GTM, слева в меню нажимаем «Теги», выбираем код Яндекс.Метрика.

В секции «Триггеры» выбираем ранее созданный триггер с именем «AfterLoad».

После публикации новой версии контейнера Яндекс.Метрика будет загружаться через 1,5 секунды после полной отрисовки страницы сайта, не замедляя скорость.

Аналогичные действия делаем с остальными тегами аналитики, пикселями социальных сетей для ретаргетинга, и так далее, выполнение которых хотим отложить на 1,5 секунды.

Полторы секунды - это много или мало? В современных реалиях - это целая вечность.

Недавно со мной рядом летела пассажирка, которая устроила целый скандал на борту самолёта, потому что она не могла смотреть видео с Youtube на своём iPad в разрешение 4К.

В HD 1080 проблем нет, а в 4К видео постоянно прерывается из-за недостаточной скорости интернет-соединения.

Сидя в мягком кресле на высоте 11 000 метров и перемещаясь со скоростью 850 км/ч пользователя не устраивает просмотр видео через wi-fi сеть в HD 1080.

Запросы пользователей постоянно растут.

Уменьшение времени загрузки сайта на 2,5-1,5 секунды могут увеличить количество конверсий и транзакций, а так же уменьшить количество отказов с органического или платного трафика.

Всё это в конечном итоге влияет на деньги.

Вычистите весь мусор и неиспользуемые теги из GTM, если таковые имеются.

Проверьте, не установлено ли несколько счетчиков Яндекс.Метрика, Google Analytics или несколько пикселей ретаргетинга Вконтакте. Сделайте ревизию и поддерживайте порядок в контейнере GTM.

Очень надеюсь, что разработчики Google в скором времени реализуют отслеживание на стороне сервера GTM, а не в браузере пользователей. Разработка этого решения началась в январе 2020 года.

Вместо того, чтобы выполнять скрипты аналитики на стороне пользователя, их выполнение можно перенести в Google Cloud Platform. Это существенно увеличит производительность сайта и не будет нагружать лишними процессами смартфоны и ПК пользователей.

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

До встречи!

#selectel_инструкция