Конкурс инструкций

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

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

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

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

Зачем нужен Google Tag Manager

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

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

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

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

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

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

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

Настраиваем отложенную загрузку в GTM

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

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

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

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

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

<script> (function() { try { window.setTimeout( function(){ dataLayer.push({'event': 'afterLoad'}); }, 1500); } catch (err) {} })(); </script>

«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. Это существенно увеличит производительность сайта и не будет нагружать лишними процессами смартфоны и ПК пользователей.

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

До встречи!

0
17 комментариев
Написать комментарий...
Mikhail Bryzghunov

Простой и изящный способ.
Стало лучше.
Спасибо!

Ответить
Развернуть ветку
Vyacheslav Rubanyuk

Спасибо за подробные инструкции! Пишите ещё :)

Ответить
Развернуть ветку
Сантех Марка

Внёс изменения по инструкции - скорость загрузки ещё немного упала. С чем может быть связанно? Сайт: https://santehmarka.ru/

Ответить
Развернуть ветку
Артем Акулов
Автор

Здравствуйте, на вашем сайте не счетчики тормозят загрузку, а неоптимизированные css (4,96 сек), долгий ответ сервера (1,8 сек), неоптимизированные картинки и шрифты. Нужно проводить комплект работ по внутренней оптимизации и кешированию, затем подключать сервис Cloudflare. Все это значительно ускорит работу интернет-магазина.

Ответить
Развернуть ветку
Павел Александрович

сделал тоже саоме в сайт  https://oformlenoe-zemli.ru эффекта на 5 пунктов

Ответить
Развернуть ветку
Ventana

Оптимизировал все что возможно на сайте, обычная статика на nginx. Закешировал, подключил keep-alive, встроил стили в html. Но в тесте my site на thinkwithgoogle показывает что мой сайт ventana.kz - скорость средняя. Что ещё нужно, я уже не понимаю?

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Olga Timofeeva

Добрый день, большое спасибо за подробную и столь ценную информацию! Скажите, пожалуйста, то еще можно исправить на нашем сайте? Оценка загрузки всего 6 для мобильных устройств: http://shop.canadadrives.ca/ ?

Ответить
Развернуть ветку
Константин Чураков

Если брать ситуацию со счетчиком Я.Метрика, то сам Яндекс не хочет такого сценария, т.к. пишет, что если будем ставить в Window Loaded, то потеряем часть аналитики.

Если человек не дождался события Window Loaded и сделал какое-то действие или банально ушел, то мы его потеряем.

Ответить
Развернуть ветку
Артем Акулов
Автор

Мало ли что он там не хочет. У меня все работает отлично.
"Человек" который не дождался Window Loaded нам в принципе не интересен.

Ответить
Развернуть ветку
Olga Timofeeva

Можно ли заменить триггер All Pages на afterLoad? Спасибо!

Ответить
Развернуть ветку
Артем Акулов
Автор

нужно

Ответить
Развернуть ветку
Angela Babuhina

По пункту 3. Настраиваем теги аналитики и рекламных систем. — совсем не поняла. Откуда Яндекс метрика в тегах, если до этого в первых 2 пунктах, ничего про ЯМ не было написано. Как код счетчика добавить?

Ответить
Развернуть ветку
Roman Lipatov

Второй шаг - 2. Создаем в GTM новый триггер
непонятен.
Ведь когда мы создали тег с триггером, то в триггерах уже есть тот самый триггер.

Ответить
Развернуть ветку
Roman Lipatov

Да, и как убедиться, что отложенная загрузка работает?

Ответить
Развернуть ветку
Ivan Ze

Сделал все по инструкции, но теперь google tag manager грузится столько же, сколько yandex до этого.
Сайт - https://autokool.info
В чем может быть причина?

Ответить
Развернуть ветку
Coolbits

"Заходим в GTM, слева в меню нажимаем «Теги», выбираем код Яндекс.Метрика."
Откуда он там взялся, если на предыдущих этапах про него ни слова?
На каком этапе и куда вставляется код счетчика метрики? Совершенно непонятно. Ниже задают тот же самый вопрос. Спасибо!

Ответить
Развернуть ветку
Фарид Ниязов

Заходите в Теги, нажимаете Создать, нажимаете на Конфигурация тега, затем клик "В Галерее шаблонов сообщества вы сможете найти ещё больше типов тегов.", там ищем Яндекс.Метрику и настраиваем её.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален автором поста

Развернуть ветку

Комментарий удален автором поста

Развернуть ветку

Комментарий удален автором поста

Развернуть ветку

Комментарий удален автором поста

Развернуть ветку

Комментарий удален автором поста

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
14 комментариев
Раскрывать всегда