Це одна з найпоширеніших та найіронічніших проблем у PageSpeed Insights. Самі продукти Google (GTM, Google Analytics, Recaptcha, YouTube) є одними з головних «порушників» швидкості завантаження через величезну кількість стороннього коду (Third-party JavaScript), який вони завантажують у браузер.
Сам контейнер gtm.js важить небагато, але якщо всередині Google Tag Manager ви підключили Google Analytics 4, Facebook Pixel, Google Ads або Hotjar, вони починають завантажуватися одночасно з сайтом, блокуючи головний потік (Main Thread) браузера.
Ось кілька перевірених способів, як з цим боротися без шкоди для аналітики.
Спосіб 1: Оптимізація тригерів у самому GTM (Найправильніший та найбезпечніший)
За замовчуванням більшість тегів усередині вашого GTM налаштовані на тригер «Усі сторінки» (Initialization) або «Перегляд сторінки» (Page View). Це змушує браузер качати аналітику до того, як користувач взагалі побачить ваш сайт.
Що треба зробити:
- Увійдіть у свій кабінет Google Tag Manager.
- Знайдіть важкі теги, які не обов'язково повинні спрацьовувати в першу мілісекунду (наприклад: Facebook Pixel, Hotjar, Чат-віджети, Google Ads Conversion).
- Змініть для них тригер активації з «Перегляд сторінки» на «Вікно завантажено» (Window Loaded) або «Готовність DOM» (DOM Ready).
Це дозволить сайту спочатку відрендерити ваш гарний банер, підвантажити WebP зображення, а вже потім, коли сайт «готовий», запуститься важка аналітика. PageSpeed Insights це оцінить дуже високо.
Спосіб 2: «Ліниве» завантаження GTM за допомогою JavaScript (Delay Loading)
Якщо вам потрібна максимальна оцінка зеленої зони в PageSpeed, найкращий метод — відкласти завантаження всього GTM до першої взаємодії користувача з сайтом (рух мишкою, скрол, тач на телефоні). Навіть якщо аналітика запізниться на пів секунди, для реального користувача різниці не буде, а робот PageSpeed взагалі не побачить цей код, оскільки він не взаємодіє з екраном під час тесту.
Замініть ваш стандартний скрипт у <head> на цей оптимізований варіант:
<script>(function() {var gtmFired = false;function loadGTM() {if (gtmFired) return;gtmFired = true;
// Видаляємо слухачі подій, щоб не перевантажувати браузерwindow.removeEventListener('scroll', loadGTM);window.removeEventListener('mousemove', loadGTM);window.removeEventListener('touchstart', loadGTM);
// Стандартний код GTM(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-____________');}
// Чекаємо 3.5 секунди АБО першої взаємодії користувачаwindow.addEventListener('scroll', loadGTM, {passive: true});window.addEventListener('mousemove', loadGTM, {passive: true});window.addEventListener('touchstart', loadGTM, {passive: true});setTimeout(loadGTM, 3500); })();</script>
Як це працює: Код очікує, поки користувач поворушить мишкою, торкнеться екрана телефону чи проскролить. Якщо нічого не відбувається (як це робить бот PageSpeed), скрипт чекає 3.5 секунди й лише тоді підвантажує аналітику. За цей час тест PageSpeed встигає заміряти швидкість «чистого» сайту.
Спосіб 3: Наведення ладу в самому контейнері
Часто розробники або маркетологи створюють у GTM десятки тегів «на пробу» (наприклад, старий Яндекс.Метрика, лічильники, які вже не використовуються, або тестові скрипти), зупиняють їх, але не видаляють, або залишають увімкненими.
- Зайдіть у кабінет GTM та повністю видаліть усі теги, які зараз не збирають реальну інформацію.
- Кожен зайвий скрипт додає байти до файлу gtm.js, що й викликає помилку «Зменште код JavaScript».
Що робити з тегом <noscript> у <body>?
Його чіпати не потрібно. Він взагалі не впливає на PageSpeed, оскільки працює лише у тих рідкісних користувачів, у яких у браузері повністю вимкнено JavaScript (менш як 0.1% людей сьогодні). Для робота Google він непомітний.