Опубликовано: 29 июля 2021 г.
Теги — это фрагменты стороннего кода, которые вставляются на сайт, обычно с помощью диспетчера тегов. Теги чаще всего используются для маркетинга и аналитики.
Влияние тегов и менеджеров тегов на производительность сильно различается на разных сайтах. Менеджеры тегов можно сравнить с конвертом: менеджер тегов представляет собой сосуд, но то, чем вы его наполняете и как используете, в основном зависит от вас.
Здесь мы обсуждаем методы оптимизации тегов и менеджеров тегов для повышения производительности и основных веб-показателей. Хотя в этом документе упоминается Диспетчер тегов Google, многие из обсуждаемых идей применимы и к другим менеджерам тегов.
Влияние на основные веб-показатели
Диспетчеры тегов часто могут косвенно влиять на ваши основные веб-показатели, используя ресурсы, необходимые для быстрой загрузки вашей страницы и поддержания ее отзывчивости. Пропускную способность можно потратить на загрузку JavaScript-кода диспетчера тегов для ваших сайтов или на последующие вызовы, которые он выполняет. Время ЦП в основном потоке может быть потрачено на оценку и выполнение кода JavaScript, содержащегося в диспетчере тегов и тегах.
Largest Contentful Paint (LCP) уязвим к конфликтам за полосу пропускания во время критического времени загрузки страницы. Кроме того, блокировка основного потока может задержать время рендеринга LCP .
На накопительный сдвиг макета (CLS) можно повлиять либо задержкой загрузки критически важных ресурсов перед первой отрисовкой, либо менеджерами тегов, внедряющими контент на страницу.
Взаимодействие с следующей отрисовкой (INP) подвержено конкуренции за процессор в основном потоке, и мы видели корреляцию между размером менеджеров тегов и более низкими оценками INP.
Выберите правильный тип тега
Влияние тегов на производительность зависит от типа тега. Вообще говоря, теги изображений («пиксели») являются наиболее эффективными, за ними следуют пользовательские шаблоны и, наконец, пользовательские теги HTML. Теги поставщиков различаются в зависимости от предоставляемых ими функций.
Помните, что то, как вы используете тег, во многом влияет на его производительность. «Пиксели» обладают высокой производительностью во многом потому, что природа этого типа тегов накладывает жесткие ограничения на их использование; Пользовательские HTML-теги не всегда вредны для производительности, но из-за уровня свободы, который они предлагают пользователям, их можно легко использовать неправильно, что отрицательно скажется на производительности.
Размышляя о тегах, помните о масштабе: влияние на производительность любого отдельного тега может быть незначительным, но может стать значительным, когда на одной странице используются десятки или сотни тегов.
Не все скрипты следует загружать с помощью менеджера тегов.
Менеджеры тегов обычно не являются лучшим способом загрузки ресурсов, которые реализуют непосредственные визуальные или функциональные аспекты взаимодействия с пользователем, такие как уведомления о файлах cookie, главные изображения или функции сайта. Использование диспетчера тегов для загрузки этих ресурсов обычно приводит к задержке их доставки. Это плохо сказывается на пользовательском опыте, а также может привести к увеличению показателей, таких как LCP и CLS.
Кроме того, некоторые пользователи блокируют менеджеры тегов. Использование диспетчера тегов для реализации функций UX может привести к неработоспособности веб-сайта для некоторых ваших пользователей.
Будьте осторожны с пользовательскими HTML-тегами.
Пользовательские HTML-теги существуют уже много лет и активно используются на большинстве сайтов. Пользовательские теги HTML позволяют вводить собственный код с небольшими ограничениями, поскольку, несмотря на название, основное использование этого тега — добавление пользовательских элементов <script> на страницу.
Пользовательские HTML-теги можно использовать самыми разными способами, и их влияние на производительность существенно различается. Измеряя производительность вашего сайта, имейте в виду, что большинство инструментов связывают влияние пользовательского HTML-тега на производительность с менеджером тегов, который его внедрил, а не с самим тегом.
Пользовательские теги HTML могут вставлять элемент на окружающую страницу. Вставка элементов на страницу может стать источником проблем с производительностью, а в некоторых случаях также вызвать изменения макета.
- В большинстве ситуаций, если элемент вставлен на страницу, браузер должен пересчитать размер и положение каждого элемента на странице. Этот процесс известен как макет . Влияние на производительность одного макета минимально, но когда оно проявляется чрезмерно, оно может стать источником проблем с производительностью. Влияние этого явления сильнее на устройствах более низкого уровня и страницах с большим количеством элементов DOM.
- Если видимый элемент страницы вставляется в DOM после того, как окружающая область уже отрисована, это может вызвать сдвиг макета. Это явление характерно не только для менеджеров тегов, однако, поскольку теги обычно загружаются позже, чем другие части страницы, их обычно вставляют в DOM после того, как окружающая страница уже отрисована.
Используйте пользовательские шаблоны
Пользовательские шаблоны поддерживают некоторые из тех же операций, что и пользовательские теги HTML, но созданы на основе изолированной версии JavaScript, которая предоставляет API для распространенных случаев использования, таких как внедрение сценариев и внедрение пикселей. Как следует из названия, они позволяют опытному пользователю создать шаблон, который может создать его с учетом производительности. Менее технические пользователи смогут использовать этот шаблон. Зачастую это безопаснее, чем предоставление полного доступа к пользовательскому HTML.
Из-за более строгих ограничений, налагаемых на пользовательские шаблоны, эти теги с гораздо меньшей вероятностью будут вызывать проблемы с производительностью или безопасностью. По этим же причинам пользовательские шаблоны подходят не для всех случаев использования.
Правильно внедряйте скрипты
Использование менеджера тегов для внедрения сценария — очень распространенный вариант использования. Рекомендуемый способ сделать это — использовать собственный шаблон и API-интерфейс injectScript .
Информацию об использовании API-интерфейса injectScript для преобразования существующего пользовательского тега HTML см. в разделе Преобразование существующего тега .
Если вам необходимо использовать собственный HTML-тег, помните:
- Библиотеки и крупные сторонние скрипты следует загружать с помощью тега скрипта (например,
<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 и не поддерживает настройку пользовательских заголовков. Он поддерживается всеми современными браузерами.
Получение keepalive API
keepalive — это флаг, который позволяет использовать Fetch API для выполнения неблокирующих запросов, таких как отчеты о событиях и аналитика. Он используется путем включения keepalive: true в параметры, передаваемые в fetch() .
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 Tag Manager сжата примерно на 33 КБ.
Назовите версии контейнера
Версия контейнера — это снимок содержимого контейнера в определенный момент времени. Использование осмысленного имени и краткое описание значимых изменений внутри могут значительно облегчить отладку будущих проблем с производительностью.
Рабочие процессы тегов
Важно управлять изменениями в тегах, чтобы они не оказывали негативного влияния на производительность страницы.
Тестируйте перед развертыванием
Протестируйте свои теги перед развертыванием, чтобы выявить проблемы, производительность и другие проблемы еще до их отправки.
При тестировании тега следует учитывать следующее:
- Тег работает корректно?
- Вызывает ли тег какие-либо изменения в макете?
- Загружает ли тег какие-либо ресурсы? Насколько велики эти ресурсы?
- Запускает ли тег долго выполняемый скрипт?
Режим предварительного просмотра
Режим предварительного просмотра позволяет тестировать изменения тегов на вашем реальном сайте без необходимости предварительного их публичного развертывания. Режим предварительного просмотра включает консоль отладки, предоставляющую информацию о тегах.
Время выполнения Диспетчера тегов Google отличается (немного медленнее) при запуске в режиме предварительного просмотра из-за дополнительных затрат, необходимых для предоставления информации в консоли отладки. Таким образом, сравнение показателей Web Vitals, собранных в режиме предварительного просмотра, с показателями, собранными в рабочей среде, не рекомендуется. Однако это несоответствие не должно влиять на поведение выполнения самих тегов.
Автономное тестирование
Альтернативный подход к тестированию тегов — создать пустую страницу, содержащую контейнер с единственным тегом — тегом, который вы тестируете. Эта настройка тестирования менее реалистична и не позволяет выявить некоторые проблемы (например, вызывает ли тег сдвиги макета), однако с ее помощью можно легче изолировать и измерить влияние тега на такие вещи, как выполнение скрипта. Узнайте, как Telegraph использует этот подход к изоляции для повышения производительности стороннего кода.
Отслеживание эффективности тегов
API мониторинга Диспетчера тегов Google можно использовать для сбора информации о времени выполнения определенного тега. Эта информация передается в конечную точку по вашему выбору.
Дополнительную информацию см. в разделе «Как создать монитор Диспетчера тегов Google» .
Требовать одобрения для изменений контейнера
Собственный код обычно проходит проверку и тестирование перед развертыванием. Относитесь к своим тегам одинаково.
Одним из способов сделать это является добавление двухэтапной проверки , которая требует одобрения администратора на изменения контейнера. В качестве альтернативы, если вы не хотите требовать двухэтапной проверки, но все равно хотите следить за изменениями, вы можете настроить уведомления контейнера , чтобы получать оповещения по электронной почте о событиях контейнера по вашему выбору.
Периодически проверять использование тегов.
Одна из проблем работы с тегами заключается в том, что они имеют тенденцию накапливаться с течением времени: теги добавляются, но редко удаляются. Периодический аудит тегов — один из способов обратить эту тенденцию вспять. Идеальная частота для этого зависит от того, как часто обновляются теги вашего сайта.
Маркировка каждого тега так, чтобы его владелец был очевиден, позволяет легче определить, кто отвечает на этот тег, и сказать, нужен ли он еще.
При аудите тегов не забудьте очистить триггеры и переменные. Они также часто могут быть причиной проблем с производительностью.
Дополнительную информацию см. в разделе «Как держать сторонние сценарии под контролем» .