Увеличение скорости загрузки сайта с помощью серверного Google Tag Manager

Оптимизация скорости загрузки страниц сайта была одним из ключевых преимуществ, которые маркетологи и веб-разработчики увидели при выходе первой версии серверного Google Tag Manager. Предполагалось, что это произойдет благодаря тому, что скрипты отслеживания больше не будут жестко прописаны в коде, а будут добавляться через Google Tag Manager. 

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

Еще в 2016 году Google установил, что идеальное время загрузки сайта составляет 3 секунды. При этом в среднем для полной загрузки мобильной страницы требуется 22 секунды. 

Мы живем во время, когда смартфонами пользуются чаще, чем компьютерами, а на смартфоны приходится более 50% всего интернет-трафика. Однако, по данным Google, коэффициент конверсии на мобильных телефонах ниже, чем на десктопах. Именно поэтому скорость загрузки сайта играет ключевую роль в соблюдении стандартов эффективности.

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

Согласно исследованию Amazon, задержка отклика страницы всего в 1 секунду приводит к потере 1% конверсий. Для них это эквивалентно потере 1,6 миллиарда долларов годового дохода.

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

Каждый тег, добавляемый через Google Tag Manager, выполняется как JavaScript в браузере пользователя. Каждый скрипт необходимо скачать, распарсить и выполнить до или после загрузки страницы, а это требует времени.

Не каждая конфигурация GTM работает одинаково, и именно здесь возникает больше всего путаницы. То, как реализован контейнер — веб или серверный, — определяет, увеличивает ли GTM нагрузку на браузер или снижает ее. В веб-контейнере каждый добавленный тег (аналитика, рекламные пиксели, виджеты чатов, тепловые карты) представляет собой скрипт, который загружается и выполняется непосредственно в браузере посетителя.

Каждый из них конкурирует за одни и те же ограниченные ресурсы: основной поток, пропускную способность сети и время рендеринга. Чем больше тегов вы добавляете, тем сильнее суммарное влияние Google Tag Manager на производительность, даже несмотря на то, что сам по себе GTM является легковесным контейнером.

Серверный GTM меняет место выполнения тегов. Вместо десятков сторонних скриптов, работающих на стороне клиента, ваш серверный контейнер принимает данные и пересылает их на маркетинговые и аналитические платформы из облака. Браузеру нужно обращаться только к вашему собственному серверу, а не к десятку различных сторонних доменов. Это главная причина, почему разрыв в показателях PageSpeed при использовании веб- и серверного Google Tag Manager обычно оказывается столь значительным.

В 2020 году Google выпустил серверный контейнер для Google Tag Manager и Tag Manager 360. Он позволяет рекламодателям перенести сторонние теги со своих сайтов в новый серверный контейнер, размещенный на облачных серверах. Благодаря этому сайт загружается быстрее, отслеживание становится точнее, а данные — безопаснее. Перенос тегов в серверный контейнер помогает устранить следующую ошибку Google PageSpeed: "Reduce the impact of third-party code — Third-party code blocked the main thread for 550 ms".

Если перенести теги из веб-контейнера в серверный, они будут загружаться непосредственно в серверный контейнер, а не в браузеры пользователей. Благодаря этому страница загружается быстрее, что положительно сказывается на пользовательском опыте. Как видите, это обеспечивает более быструю загрузку страниц, повышенную безопасность данных клиентов и больше инструментов для управления данными. Это один из самых наглядных примеров того, как серверный Google Tag Manager может повысить производительность сайта без ущерба для точности отслеживания.

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

Не все теги влияют на PageSpeed одинаково, и это важный нюанс, о котором следует помнить, прежде чем ожидать, что миграция решит абсолютно все проблемы с производительностью. Легковесный фрагмент аналитики и тяжелый пиксель ретаргетинга по-разному сказываются на времени загрузки, хотя и то, и другое — «всего лишь тег». Наибольшее влияние обычно оказывают теги, которые отправляют множество сетевых запросов, подгружают дополнительные скрипты или срабатывают при каждой загрузке страницы, а не по конкретным событиям.

Самый надежный способ убедиться в этом самостоятельно — проверить отчет PageSpeed Insights для вашего сайта с Google Tag Manager до и после миграции, напрямую сравнив раздел результатов, посвященный стороннему коду.

Для этого эксперимента я использовал демонстрационный сайт и сравнил результаты Google PageSpeed при добавлении тегов через веб-контейнер GTM и через серверный контейнер GTM. Не все теги одинаково влияют на Google PageSpeed. Проводя этот эксперимент, я решил выбрать самые популярные теги, используемые моим клиентом, и теги, которые можно перенести в серверный контейнер: Facebook, Bing и Active Campaign.

В серверном контейнере GTM есть встроенные теги для GA4. Здесь вы найдете подробную информацию о том, как настроить отслеживание GA4 с помощью серверного контейнера GTM. Мы также создали пользовательский шаблон, который поможет вам перенести Facebook Pixel на сервер. 

Ниже приведены результаты теста Google Speed Test. Google PageSpeed показал 95 баллов на мобильных устройствах и 100 на десктопах. 

В серверном контейнере у нас установлены следующие теги: GA4, Facebook (базовый трекинг и отслеживание конверсий), Hubspot и тег Klaviyo.

Когда мы перенесли пиксель в веб-контейнер, показатели Google PageSpeed снизились до 56 баллов. 

Если вы перенесете теги в серверный контейнер Google Tag Manager, это ускорит ваш сайт. Степень влияния будет зависеть от используемых вами тегов. В этом тесте самые популярные среди клиентов теги (GA4, Facebook и Active Campaign) показали явную, измеримую разницу после переноса на сторону сервера.