Недавно я прошел несколько тестов и внимательно изучил эти проблемы. Так что есть какое-то решение и рекомендации, связанные с этим.

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

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

Мой рекомендуемый метод управления всеми этими сторонними скриптами - использовать Диспетчер тегов Google и управлять всеми этими тегами.

Как оптимизировать скорость сайта при использовании сторонних скриптов с Google Tag Manager:

1. Расставьте приоритеты для загрузки всех ваших скриптов и отсортируйте их по приоритетам

Используйте триггер просмотра страниц Диспетчера тегов Google, чтобы активировать теги при загрузке страниц в веб-браузерах. Существует три типа триггеров, которые отслеживают события загрузки страницы, и каждый из них имеет несколько разные критерии, определяющие, когда триггер должен активировать тег:

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

DOM Ready: запускается после того, как браузер завершит создание полной страницы в HTML и объектная модель документа (DOM) готова к синтаксическому анализу. Теги на основе просмотра страниц, которые взаимодействуют с DOM для заполнения переменных, должны использовать этот тип триггера, чтобы гарантировать, что правильные значения доступны в Диспетчере тегов.

Окно загружено: запускается после полной загрузки страницы, включая любые встроенные ресурсы, такие как изображения и скрипты.

Чтобы создать новый триггер просмотра страницы:

1. Щелкните "Триггеры", а затем "Создать".
2. Щелкните Конфигурация триггера и выберите тип триггера для просмотра страницы.

3. Необязательно, но рекомендуется для повышения производительности: укажите условия (обычно шаблон URL) для страниц, на которых вы ожидаете щелчка:

   • Under the heading "This trigger fires on", select "Some Events".
   • В разделе «Активировать этот триггер при возникновении события и выполнении всех этих условий» добавьте фильтр, чтобы активировать этот триггер только на тех страницах, которые в нем нуждаются, например URL-адрес клика содержит / путь / к / промо.

4. Сохраните триггер и опубликуйте.

Источник: https://support.google.com/tagmanager/answer/7679319?hl=en

Я рекомендовал использовать триггер просмотра страницы только для самых важных тегов, например, Google Analytics. Для всех остальных тегов вы должны использовать по крайней мере триггеры DOM Ready или, что более вероятно, Page Loaded. Использование триггера «Страница загружена» меньше повлияет на скорость вашего сайта для всех этих сторонних тегов, но вы увеличите вероятность того, что некоторые конверсии не будут отслеживаться, если пользователи закроют страницу благодарности раньше, чем загрузится скрипт отслеживания. .

Иногда сценарии, такие как HotJar или аналогичные сценарии тепловой карты, также следует использовать со сценарием просмотра страницы, чтобы повысить точность этих аналитических данных.

Если вы добавляете на свой сайт какие-то инструменты чата или поддержки, то для этих скриптов также следует использовать триггер «Страница загружена».

2. При необходимости просмотрите и обновите сценарии.

Вам следует просмотреть, изменить или поставить на паузу теги, которые вы не используете, или у этих сторонних инструментов нет активных кампаний.

Используйте подсказки ресурсов: предварительная выборка DNS и / или предварительное подключение

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

Короче говоря, вы должны использовать их для всех доменов, упомянутых в разделе «Уменьшение количества запросов DNS».

Код, который вы должны добавить себе на голову, должен выглядеть так:

<!-- Prefetch DNS for external assets -->
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com">
 <link rel="dns-prefetch" href="//cdn.domain.com">

<!-- Preconnect for external assets -->
 <link rel="preconnect" href="//fonts.googleapis.com" crossorigin>
 <link rel="preconnect" href="//www.google-analytics.com" crossorigin>
 <link rel="preconnect" href="//cdn.domain.com" crossorigin>

Я особенно замечаю fonts.googleapis.com на многих сайтах, которые зависают при загрузке страницы до 10+ секунд. Это очень раздражает, потому что мой блокировщик рекламы uBlock Origin не блокирует это.

Некоторые вещи, которые вы можете сделать, - это разместить контент на своих серверах (шрифты, JQuery), но тогда люди не будут кэшировать их для часто используемых библиотек. (Вероятно, у всех есть последняя версия JQuery в своем кеше из CDN, потому что все веб-сайты используют ее.) Вы можете попробовать разместить рекламные сценарии, но Google, вероятно, часто меняет их или включает хэш для каждого уникального пользователя, который сделает это невозможным. Если они не уникальны для каждого пользователя, вам может потребоваться часто обновлять их в фоновом режиме, возможно, каждый час или день. Не уверен.

Кроме того, разместите теги <script> внизу страницы, даже после </body>, но перед </html>. При этом скрипты будут загружены в последнюю очередь, а объявления - в последнюю.

Еще вы можете разместить функцию JQuery $(document).ready() {...} для вставки тегов ad <script> и <iframe> (?) В нужные места после загрузки документа. Тогда они не будут учитываться при скорости загрузки вашей страницы. Используйте заполнитель <div class="ad"></div>.