Как уменьшить файлы JavaScript от GTM в PageSpeed Insights

Файлы JavaScript (JS) в Google Tag Manager (GTM) полезны для отслеживания и анализа поведения посетителей сайта. Однако избыток JS-файлов может существенно повлиять на производительность и функциональность вашего веб-сайта.

Такие JS-скрипты замедляют загрузку сайта, что ухудшает пользовательский опыт. Кроме того, согласно исследованию Amazon, каждые 100 мс времени загрузки страницы стоят 1% выручки. Поэтому сокращение JS-файлов критически важно для вашего сайта.

В этой статье мы покажем способы сократить количество JS-файлов GTM: от аудита контейнеров до перехода на серверный трекинг.

Главное преимущество оптимизации JS-файлов в GTM — это значительное увеличение скорости загрузки сайта.

Для загрузки каждого JS-файла требуется отдельный HTTP-запрос, и чем больше таких файлов, тем больше запросов. Для пользователей это приводит к задержкам загрузки контента, что может повысить показатель отказов. А для самого сайта это чревато ухудшением позиций в SEO и падением трафика.

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

Файлы GTM обычно отображаются в следующих разделах отчетов PageSpeed Insights:

• Уменьшите влияние стороннего кода
• Уменьшите объем неиспользуемого кода JavaScript в Google Tag Manager

Нажмите на раздел, с которым у вас возникли проблемы, чтобы сразу перейти к нему.

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

Для решения проблем с файлами GTM мы рекомендуем следующие подходы:

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

Для этой задачи мы рекомендуем использовать GTM.Tools. Здесь вы можете проанализировать свой контейнер, а также редактировать и массово обновлять содержимое Workspace.

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

CDN кэширует данные вашего сайта и доставляет определенные страницы с сервера, расположенного ближе к вашим посетителям. Это обеспечивает более быструю отдачу JS-файлов.

Некоторые теги не обязательно активировать при загрузке страницы. Настройте последовательность тегов для тех тегов, активацию которых можно отложить. Последовательность тегов позволяет указать теги, которые должны срабатывать непосредственно перед или после активации заданного «основного» тега. Чтобы найти эту опцию, перейдите в «Advanced Settings» тегов, которые вы хотите отложить.

Если сокращение тегов Custom HTML и/или удаление части тегов вам не подходит, мы рекомендуем попробовать серверный трекинг. 

Как это работает? При переходе на серверный трекинг вы переносите все теги GTM из веб-контейнера в серверный. Эти теги будут загружаться в серверный контейнер, а не в браузеры пользователей. В результате сайт будет загружаться быстрее.

Неиспользуемый JS-код — это код, который не требуется для рендеринга страницы (для загрузки и отображения ее контента). Этот код увеличивает размер бандла JavaScript, что приводит к замедлению загрузки сайта.

Самый эффективный способ решить эту проблему — провести аудит контейнера GTM и удалить ненужные теги.

Однако имейте в виду, что, скорее всего, вы не сможете полностью исключить такие JS-файлы из этого раздела в PageSpeed Insights. 

Некоторые типы переменных являются частью самого GTM и необходимы для его работы в целом. К таким переменным относятся Auto Event Variable, DOM Element, Element Visibility и др. Вы можете даже не добавлять эти переменные в свой контейнер, но при этом видеть их как «неиспользуемый код JS» в PageSpeed Insights.

Они входят в библиотеку GTM, и их удаление может нарушить целостность кода и привести к некорректной работе или полной неработоспособности GTM.

Почему они появляются в категории «неиспользуемый код JS», если они входят в библиотеку GTM и критически важны для его функционирования? PageSpeed Insights помечает такой код как неиспользуемый, потому что в вашем контейнере переменные этого типа отсутствуют. Они находятся исключительно в библиотеке GTM.

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

Контролировать размер контейнера GTM можно двумя способами:

Установите расширение Get Google Tag Manager Size в браузер и используйте его на своем сайте всякий раз, когда требуется проверка.

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

Используйте ссылку ниже, чтобы проверить размер вашего контейнера GTM. Вместо части «YOUR_ID» в URL добавьте идентификатор своего контейнера (нажмите «Workspace» в GTM, и вы увидите этот идентификатор).

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

Когда откроется страница с результатом, скопируйте ее содержимое и вставьте в TextEdit (для Mac OS) или Notepad (для Windows OS). После этого вы сможете увидеть размер файла — это и есть размер вашего контейнера GTM.

Когда проверять размер контейнера GTM?

Предельный размер контейнера составляет 200 КБ, однако GTM предупредит вас при достижении 140 КБ. Разумеется, настоятельно рекомендуется сохранять размер контейнеров значительно ниже этого предела, чтобы не влиять на производительность сайта.

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

Избыток JS-файлов GTM может существенно снизить показатели производительности вашего сайта в PageSpeed Insights. Эти скрипты замедляют загрузку, что приводит к росту показателя отказов и ухудшению позиций в SEO.

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