Дата публикации: 29 июля 2021 г.
Теги – это фрагменты стороннего кода, которые вставляются на сайт, обычно с помощью менеджера тегов. Чаще всего теги используются в маркетинге и аналитике.
Влияние тегов и менеджеров тегов на производительность сильно различается на разных сайтах. Менеджер тегов можно сравнить с конвертом: он предоставляет оболочку, но то, чем вы ее наполните и как будете использовать, зависит от вас.
В этой статье мы расскажем, как оптимизировать теги и менеджеры тегов, чтобы повысить производительность и улучшить показатели Core Web Vitals. Хотя в этом документе упоминается Google Менеджер тегов, многие из обсуждаемых идей применимы и к другим менеджерам тегов.
Влияние на Core Web Vitals
Менеджеры тегов часто могут косвенно влиять на Core Web Vitals, используя ресурсы, необходимые для быстрой загрузки страницы и поддержания ее отзывчивости. Пропускная способность может расходоваться на скачивание JavaScript-кода Менеджера тегов для ваших сайтов или на последующие вызовы, которые он делает. Процессорное время в основном потоке может тратиться на оценку и выполнение кода JavaScript, содержащегося в Менеджере тегов и тегах.
На отрисовку самого крупного контента (LCP) может негативно повлиять конкуренция за пропускную способность во время загрузки страницы. Кроме того, блокировка основного потока может увеличить время отрисовки LCP.
Совокупный сдвиг макета (CLS) может быть затронут либо из-за задержки загрузки критически важных ресурсов перед первой отрисовкой, либо из-за того, что менеджеры тегов вставляют контент на страницу.
Interaction to Next Paint (INP) зависит от конкуренции за ресурсы ЦП в основном потоке. Мы заметили, что чем больше размер Менеджера тегов, тем хуже показатель INP.
Выберите тип тега
Влияние тегов на эффективность зависит от их типа. Как правило, наиболее эффективны теги изображений (пиксели), за ними следуют пользовательские шаблоны и, наконец, пользовательские HTML-теги. Теги поставщиков различаются в зависимости от функций, которые они выполняют.
Помните, что влияние тега на производительность во многом зависит от того, как вы его используете. Пиксели обладают высокой производительностью в основном потому, что этот тип тегов накладывает строгие ограничения на их использование. Пользовательские HTML-теги не всегда отрицательно влияют на производительность, но из-за уровня свободы, который они предлагают пользователям, их легко использовать неправильно, что может привести к снижению производительности.
При работе с тегами учитывайте их количество. Влияние одного тега на производительность может быть незначительным, но если на странице используются десятки или сотни тегов, оно может стать существенным.
Не все скрипты следует загружать с помощью менеджера тегов
Менеджеры тегов обычно не подходят для загрузки ресурсов, которые реализуют визуальные или функциональные аспекты пользовательского интерфейса, такие как уведомления о файлах cookie, главные изображения или функции сайта. Если загружать эти ресурсы с помощью менеджера тегов, то их доставка обычно задерживается. Это неудобно для пользователей и может привести к увеличению таких показателей, как LCP и CLS.
Кроме того, некоторые пользователи блокируют менеджеры тегов. Если вы используете менеджер тегов для реализации функций UX, у некоторых пользователей сайт может работать некорректно.
Будьте осторожны с пользовательскими тегами HTML
Пользовательские теги HTML существуют уже много лет и активно используются на большинстве сайтов. Пользовательские HTML-теги позволяют добавлять собственный код практически без ограничений. Несмотря на название, основное назначение этого тега – добавлять на страницу пользовательские элементы <script>.
Пользовательские HTML-теги можно использовать по-разному, и их влияние на производительность может значительно различаться. При оценке эффективности сайта имейте в виду, что большинство инструментов приписывают влияние пользовательского HTML-тега на эффективность менеджеру тегов, который его внедрил, а не самому тегу.
Пользовательские HTML-теги могут вставлять элементы на страницу. Вставка элементов на страницу может привести к проблемам с производительностью, а в некоторых случаях – к смещению макета.
- В большинстве случаев, когда на страницу вставляется элемент, браузер должен пересчитать размер и положение каждого элемента на странице. Этот процесс называется компоновкой. Влияние на производительность одного макета минимально, но когда это происходит чрезмерно это может стать источником проблем с производительностью. Влияние этого явления больше на устройствах низкого класса и страницах с большим количеством элементов DOM.
- Если видимый элемент страницы вставляется в DOM после того, как окружающая область уже отрисована, это может привести к сдвигу макета. Это явление не уникально для менеджеров тегов, однако, поскольку теги обычно загружаются позже, чем другие части страницы, они часто вставляются в DOM после того, как окружающая страница уже была отрисована.
Как использовать пользовательские шаблоны
Пользовательские шаблоны поддерживают некоторые из тех же операций, что и пользовательские HTML-теги, но создаются на основе изолированной версии JavaScript, которая предоставляет API для распространенных сценариев использования, таких как вставка скриптов и пикселей. Как следует из названия, они позволяют опытному пользователю создать шаблон, который будет работать эффективно. После этого менее опытные пользователи смогут использовать этот шаблон. Это безопаснее, чем предоставлять полный доступ к пользовательскому HTML.
Поскольку к пользовательским шаблонам предъявляются более строгие требования, теги на их основе реже вызывают проблемы с производительностью и безопасностью. По этим же причинам пользовательские шаблоны подходят не для всех случаев.
Правильно внедряйте скрипты
Внедрение скрипта с помощью менеджера тегов – очень распространенный способ. Рекомендуем использовать для этого пользовательский шаблон и API injectScript.
Информацию о том, как использовать injectScript API для преобразования существующего пользовательского HTML-тега, можно найти в разделе Преобразование существующего тега.
Если вам необходимо использовать пользовательский HTML-тег, помните о следующем:
- Библиотеки и большие сторонние скрипты следует загружать с помощью тега script (например,
<script src="external-scripts.js">), который скачивает внешний файл, а не копировать содержимое скрипта непосредственно в тег. Хотя отказ от использования тега<script>устраняет отдельный запрос туда и обратно для скачивания содержимого скрипта, такая практика увеличивает размер контейнера и не позволяет браузеру кешировать скрипт отдельно. - Многие поставщики рекомендуют размещать тег
<script>в верхней части раздела<head>. Однако для скриптов, загружаемых с помощью Менеджера тегов, это часто не требуется. В большинстве случаев к моменту запуска Менеджера тегов браузер уже завершает синтаксический анализ элемента<head>.
Использовать пиксели
Иногда сторонние скрипты можно заменить пикселями изображений или iframe. По сравнению со скриптами пиксели могут поддерживать меньше функций, поэтому их часто считают менее предпочтительным вариантом реализации. Однако при использовании в менеджерах тегов пиксели могут быть более динамичными, поскольку они могут срабатывать по триггерам и передавать разные переменные.
Пиксели – это наиболее эффективный и безопасный тип тегов, поскольку после их активации не выполняется код JavaScript. Пиксели имеют очень маленький размер (менее 1 КБ) и не вызывают сдвигов макета.
Чтобы узнать, поддерживаются ли пиксели, обратитесь к стороннему поставщику. Вы также можете проверить, есть ли в коде тег <noscript>.
Если поставщик поддерживает пиксели, он часто включает пиксель в тег <noscript>.
Альтернативы пикселям
Пиксели стали популярными в основном потому, что в свое время они были одним из самых дешевых и надежных способов сделать HTTP-запрос в ситуациях, когда ответ сервера не имеет значения ( например, при отправке данных поставщикам аналитики). API navigator.sendBeacon() и fetch() keepalive предназначены для решения той же задачи, но считаются более надежными, чем пиксели.
Вы можете продолжать использовать пиксели – они хорошо поддерживаются и минимально влияют на производительность. Однако если вы создаете собственные маяки, стоит подумать об использовании одного из этих API.
sendBeacon()
API navigator.sendBeacon() предназначен для отправки небольших объемов данных на веб-серверы в ситуациях, когда ответ сервера не имеет значения.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
navigator.sendBeacon(url, data);
У sendBeacon() ограниченный API: он поддерживает только запросы POST и не поддерживает настройку пользовательских заголовков. Она поддерживается всеми современными браузерами.
Fetch API keepalive
keepalive – это флаг, который позволяет использовать Fetch API для выполнения неблокирующих запросов, например для отчетов о событиях и аналитики. Для этого в параметры, передаваемые в fetch(), нужно включить keepalive: true.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
fetch(url, {
method: 'POST',
body: data,
keepalive: true
});
Если вам кажется, что fetch() keepalive и sendBeacon() очень похожи, то это действительно так. В браузерах на основе Chromium sendBeacon() теперь работает на базе fetch()
keepalive.
Выбирая между fetch() keepalive и sendBeacon(), важно учитывать, какие функции и поддержка браузеров вам нужны. API fetch() значительно более гибкий, однако keepalive поддерживается меньшим количеством браузеров, чем sendBeacon().
Что делают теги
Теги часто создаются в соответствии с инструкциями стороннего поставщика. Если вы не понимаете, как работает код поставщика, обратитесь за помощью к специалисту. Это поможет вам понять, может ли тег вызвать проблемы с производительностью или безопасностью.
Рекомендуем указывать владельца тега в Менеджере тегов. Легко забыть, кто владеет тегом, что приводит к страху удаления в случае, если это что-то сломает!
Триггеры
В целом оптимизация триггеров тегов заключается в том, чтобы теги не активировались чаще, чем нужно, и чтобы выбранный триггер обеспечивал баланс между потребностями бизнеса и затратами на производительность.
Триггеры – это код JavaScript, который увеличивает размер и стоимость выполнения Менеджера тегов. Хотя большинство триггеров незначительны, их совокупный эффект может суммироваться. Например, наличие нескольких событий клика или триггеров таймера может значительно увеличить рабочую нагрузку Менеджера тегов.
Выберите подходящее событие-триггер
Влияние тега на производительность может быть разным. Как правило, чем раньше активируется тег, тем сильнее он влияет на производительность. При первоначальной загрузке страницы ресурсы обычно ограничены, поэтому загрузка или выполнение определенного ресурса (или тега) отнимает ресурсы у чего-то другого.
Правильный выбор триггеров важен для всех тегов, но особенно для тех, которые загружают большие ресурсы или выполняют длинные скрипты.
Теги могут активироваться при просмотрах страниц (обычно Page load, DOM Ready, Window Loaded) или на основе специальных событий. Чтобы не замедлять загрузку страницы, активируйте необязательные теги после события Window Loaded.
Как использовать специальные события
Специальные события позволяют активировать триггеры в ответ на события, которые не поддерживаются встроенными триггерами Google Менеджера тегов. Например, во многих тегах используются триггеры просмотра страниц. Однако между событиями DOM Ready и Window Loaded может пройти много времени, поэтому точно настроить активацию тега бывает сложно. Решением этой проблемы могут стать специальные события.
Сначала создайте триггер специального события и обновите теги, чтобы они использовали этот триггер.
Чтобы активировать триггер, передайте соответствующее событие на уровень данных.
// Custom event trigger that fires after 2 seconds
setTimeout(() => {
dataLayer.push({
'event' : 'my-custom-event'
});
}, 2000);
Используйте конкретные условия активации
Задайте условия активации триггеров, чтобы теги не срабатывали без необходимости. Один из самых простых и эффективных способов – сделать так, чтобы тег активировался только на тех страницах, где он действительно используется.
Встроенные переменные можно включать в условия триггеров, чтобы ограничить активацию тегов.
Загружайте менеджер тегов в подходящее время
Вы можете повысить эффективность, изменив время загрузки самого Менеджера тегов. Триггеры, независимо от их конфигурации, не могут сработать до загрузки Менеджера тегов. Поэкспериментируйте со временем загрузки Менеджера тегов, так как это может оказать такое же или даже большее влияние. Это решение влияет на все теги на странице.
Загружая менеджер тегов позже, вы можете избежать проблем с производительностью в будущем, поскольку это предотвращает непреднамеренную слишком раннюю загрузку тега.
Переменные
Используйте переменные, чтобы считывать данные со страницы. Они используются в триггерах и в самих тегах.
Как и триггеры, переменные добавляют код JavaScript в Менеджер тегов и могут вызывать проблемы производительности. Переменные могут быть относительно небольшими, например, код для чтения частей URL-адреса, файлов cookie, уровня данных или DOM. Они также могут содержать пользовательский код JavaScript с неограниченными возможностями (и размером).
Используйте как можно меньше переменных, поскольку они постоянно проходят непрерывную оценку Менеджером тегов. Удалите старые переменные, которые больше не используются, чтобы уменьшить размер скрипта Менеджера тегов и время его обработки.
Управление тегами
Эффективное использование тегов снижает риск возникновения проблем с производительностью.
Использование уровня данных
Уровень данных – это массив объектов JavaScript, содержащих информацию о странице. Эти объекты содержат всю информацию, которую вы хотите передать в Google Менеджер тегов.
Уровень данных также можно использовать для активации тегов.
// Contents of the data layer
window.dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});
// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});
Хотя Google Менеджер тегов можно использовать и без уровня данных, мы настоятельно рекомендуем его настроить. Уровень данных объединяет данные, к которым могут получить доступ сторонние скрипты, в одном месте, что позволяет лучше контролировать их использование. Это позволит избежать лишних вычислений переменных и выполнения скриптов.
Используя уровень данных, вы можете контролировать, к каким данным теги имеют доступ, вместо того чтобы предоставлять полный доступ к переменным JavaScript или DOM.
Преимущества уровня данных в отношении производительности могут быть неочевидны, поскольку при его обновлении Google Менеджер тегов повторно оценивает все переменные контейнера и может активировать теги, что влечет за собой выполнение кода JavaScript. Хотя уровень данных можно использовать неправильно, в целом, если уровень данных кажется источником проблем с производительностью, скорее всего, проблемы с производительностью есть у самого контейнера. Слой данных делает эти проблемы более очевидными.
Удалите повторяющиеся и неиспользуемые теги
Дублирование тегов может произойти, если тег включен в HTML-разметку страницы и одновременно добавлен через менеджер тегов.
Неиспользуемые теги следует приостанавливать или удалять, а не блокировать с помощью триггера исключения. Приостановка или удаление тега удаляет код из контейнера, а блокировка – нет.
После удаления неиспользуемых тегов проверьте триггеры и переменные и удалите те, которые больше не нужны.
Приостановленные теги влияют на размер контейнера, но общий объем полезной нагрузки меньше, чем при активных тегах.
Используйте белые и черные списки
Используйте белые и черные списки, чтобы задать точные ограничения для тегов, триггеров и переменных, разрешенных на странице. Это позволяет обеспечивать соблюдение рекомендаций по повышению производительности и других правил.
Белые и черные списки настраиваются на уровне данных.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
Например, вы можете запретить использование пользовательских HTML-тегов, переменных JavaScript или прямой доступ к DOM. Это означает, что можно использовать только пиксели и стандартные теги с данными из уровня данных. Несмотря на то что это ограничивает возможности, это может повысить эффективность и безопасность реализации Менеджера тегов.
Используйте добавление тегов на стороне сервера
Рекомендуем перейти на добавление тегов на стороне сервера, особенно если у вас крупный сайт и вы хотите лучше контролировать свои данные. Добавление тегов на стороне сервера удаляет код поставщика из клиента и переносит обработку с клиента на сервер.
Например, при добавлении тегов на стороне клиента отправка данных в несколько аккаунтов Аналитики означает, что клиент инициирует отдельные запросы для каждой конечной точки. При добавлении тегов на стороне сервера клиент отправляет один запрос в серверный контейнер, а оттуда данные пересылаются в разные аккаунты аналитики.
Учтите, что добавление тегов на стороне сервера работает только с некоторыми тегами. Совместимость тегов зависит от поставщика.
Подробнее о добавлении тегов на стороне сервера…
Контейнеры
В настройках менеджеров тегов обычно можно задать несколько экземпляров, которые часто называют контейнерами. В одном аккаунте Менеджера тегов можно управлять несколькими контейнерами.
Используйте только один контейнер на странице
Если на одной странице размещено несколько контейнеров, это может привести к проблемам с производительностью, поскольку увеличивается нагрузка и выполняется больше скриптов. Как минимум, дублируется код основного тега, который передается в составе JavaScript контейнера и не может использоваться в других контейнерах.
Несколько контейнеров редко используются эффективно. Однако в некоторых случаях это может сработать, если все хорошо контролируется. Пример:
- Используйте два контейнера: один, более легкий, для ранней загрузки, а другой, более тяжелый, – для поздней.
- Использовать контейнер с ограниченным доступом для менее опытных пользователей и контейнер с меньшими ограничениями, но более строгим контролем для сложных тегов.
Если вам необходимо использовать несколько контейнеров на странице, следуйте инструкциям по настройке нескольких контейнеров в Google Менеджере тегов.
При необходимости используйте отдельные контейнеры
Если вы используете менеджер тегов для нескольких ресурсов, например для веб-приложения и мобильного приложения, количество контейнеров может повлиять на эффективность вашей работы. Это также может повлиять на эффективность.
Один контейнер можно использовать на нескольких сайтах, если они похожи по назначению и структуре. Например, мобильное и веб-приложение бренда могут выполнять схожие функции, но, скорее всего, они имеют разную структуру, поэтому ими эффективнее управлять через отдельные контейнеры.
Если использовать один контейнер для слишком большого количества ресурсов, он может стать слишком сложным и большим, поскольку для управления тегами и триггерами потребуется сложная логика.
Следите за размером контейнера
Размер контейнера определяется его тегами, триггерами и переменными. Небольшой контейнер может отрицательно повлиять на эффективность страницы, а большой – почти наверняка.
Размер контейнера не должен быть самым важным показателем при оптимизации использования тегов. Однако большой размер контейнера часто является признаком того, что он плохо поддерживается и, возможно, неправильно используется.
В Google Менеджере тегов размер контейнера ограничен 300 КБ. Когда он достигает 70 % от этого значения, вы получаете предупреждение.
Большинство сайтов должны стремиться к тому, чтобы их контейнеры были меньше этого ограничения. Для сравнения: медианный размер контейнера сайта составляет около 50 КБ. Сама библиотека Google Менеджера тегов в сжатом виде занимает около 33 КБ.
Как присваивать названия версиям контейнера
Версия контейнера – это снимок его содержимого в определенный момент времени. Использование осмысленного имени и краткого описания изменений может значительно упростить отладку будущих проблем с производительностью.
Рабочие процессы тегов
Важно управлять изменениями тегов, чтобы они не оказывали негативного влияния на эффективность страницы.
Тестирование перед развертыванием
Протестируйте теги перед развертыванием, чтобы выявить проблемы с производительностью и другие неполадки.
При тестировании тега следует учитывать следующее:
- Правильно ли работает тег?
- Вызывает ли тег смещение макета?
- Загружает ли тег какие-либо ресурсы? Каков размер этих ресурсов?
- Активирует ли тег скрипт, который выполняется долго?
Режим предварительного просмотра
Режим предварительного просмотра позволяет тестировать изменения тегов на сайте, не публикуя их. В режиме предварительного просмотра есть консоль отладки, в которой можно посмотреть информацию о тегах.
В режиме предварительного просмотра Google Менеджер тегов работает немного медленнее, поскольку для вывода информации в консоль отладки требуются дополнительные ресурсы. Поэтому не рекомендуется сравнивать показатели Web Vitals, собранные в режиме предварительного просмотра, с показателями, собранными в рабочей среде. Однако это расхождение не должно влиять на выполнение самих тегов.
Автономное тестирование
Другой способ тестирования тегов – создать пустую страницу с контейнером, содержащим только один тег, который вы хотите протестировать. Такая среда тестирования менее реалистична и не позволяет выявить некоторые проблемы (например, вызывает ли тег сдвиги макета), но она может упростить изоляцию и измерение влияния тега на такие вещи, как выполнение скрипта. Узнайте, как Telegraph использует этот подход для повышения производительности стороннего кода.
Отслеживайте эффективность тегов
Monitoring API Google Менеджера тегов позволяет собирать информацию о времени выполнения определенного тега. Эта информация передается в выбранную вами конечную точку.
Подробнее о том, как создать монитор Google Менеджера тегов…
Требовать одобрения изменений в контейнере
Собственный код обычно проходит проверку и тестирование перед развертыванием. То же самое относится и к тегам.
Один из способов – добавить двухэтапную аутентификацию, при которой для изменения контейнера требуется одобрение администратора. Если вы не хотите использовать двухэтапную аутентификацию, но желаете отслеживать изменения, настройте уведомления о контейнерах. Вы будете получать оповещения по электронной почте о выбранных вами событиях.
Периодически проверяйте использование тегов
Одна из проблем, связанных с тегами, заключается в том, что со временем их становится все больше и больше. Теги добавляются, но редко удаляются. Периодический аудит тегов – один из способов обратить эту тенденцию вспять. Частота проверок зависит от того, как часто обновляются теги на вашем сайте.
Если у каждого тега будет указан владелец, вам будет проще определить, кто за него отвечает и может сказать, нужен ли он ещё.
При проверке тегов не забывайте удалять ненужные триггеры и переменные. Они также часто могут быть причиной проблем с производительностью.
Подробнее о том, как контролировать сторонние скрипты…