Як зменшити файли JavaScript для GTM у PageSpeed Insights

Файли JavaScript (JS) для Google Tag Manager (GTM) корисні для відстеження та аналізу поведінки відвідувачів вебсайту. Проте надлишок JS-файлів може суттєво вплинути на продуктивність і функціональність вашого вебсайту.

Цей JS-код уповільнює завантаження вашого вебсайту, що погіршує користувацький досвід. Крім того, чи знали ви, що згідно з дослідженням Amazon кожні 100 мс часу завантаження сторінки коштують 1% доходу? Тому зменшення кількості JS-файлів має вирішальне значення для вашого вебсайту.

У цій статті ми покажемо рішення для зменшення кількості JS-файлів GTM: від аудиту контейнерів до переходу на серверний трекінг.

Головна перевага оптимізації JS-файлів у GTM — це суттєве покращення швидкості завантаження вебсайту.

Для завантаження кожного JS-файлу потрібен окремий HTTP-запит, і що більше таких файлів, то більше запитів. Для користувачів це призводить до затримок у завантаженні контенту вебсайту, що може збільшити показник відмов. Для самого вебсайту це може обернутися погіршенням позицій у SEO та зниженням трафіку.

Зменшення кількості JS-файлів скоротить кількість HTTP-запитів, завдяки чому ваш вебсайт завантажуватиметься швидше.

Файли GTM зазвичай можна знайти в таких розділах звітів PageSpeed Insights:

• Зменште вплив стороннього коду
• Зменште обсяг невикористаного JavaScript у Google Tag Manager

Натисніть на розділ, із яким у вас виникли проблеми, щоб перейти безпосередньо до нього.

Сторонній JS-код дає змогу налаштувати відстеження різних дій користувачів (кліки, прокручування, поширення контенту тощо). Однак він впливає на швидкість вебсайту й часто створює одне з найбільших навантажень на вебсторінку.

Щоб вирішити проблему з файлами GTM, радимо скористатися такими рішеннями:

Перегляньте всі теги у вашому контейнері GTM, оскільки деякі з них можуть більше не знадобитися для аналізу ефективності вебсайту. Цей простий крок допоможе зменшити кількість стороннього коду та навантаження на ваш вебсайт.

Для виконання цього завдання радимо використовувати GTM.Tools. Тут ви можете перевіряти свій контейнер, редагувати та масово оновлювати вміст Workspace.

Кастомні HTML-теги корисні для деяких персоналізованих налаштувань трекінгу; однак вони часто занадто громіздкі й під час спрацьовування впливають на час завантаження вебсайту. Перегляньте наявні кастомні теги та спробуйте перейти на шаблони GTM, оскільки вони краще оптимізовані.

CDN кешує дані вашого вебсайту та доставляє певні сторінки із сервера, розташованого ближче до ваших відвідувачів. Це забезпечує швидшу віддачу JS-файлів.

Деякі теги не обов'язково активувати відразу під час завантаження сторінки. Налаштуйте послідовність тегів для тегів, запуск яких можна відкласти. Послідовність тегів дозволяє призначити теги, які спрацьовуватимуть безпосередньо до або після активації певного "основного" тегу. Щоб знайти цю опцію, перейдіть до “Advanced Settings” тегів, які ви хочете відкласти.

Якщо зменшення кількості тегів Custom HTML та/або видалення частини тегів вам не підходить, ми радимо спробувати серверний трекінг. 

Як це працює? При переході на серверний трекінг ви переносите всі теги GTM з вебконтейнера до серверного. Ці теги завантажуватимуться в серверному контейнері, а не в браузерах користувачів. Це забезпечить швидше завантаження вебсайту.

Невикористовуваний JS-код — це код, який не потрібен для рендерингу сторінки (для завантаження та відображення її вмісту). Цей код збільшує розмір вашого бандла JavaScript, що призводить до повільнішого завантаження вебсайту.

Найефективніший спосіб вирішити цю проблему — провести аудит вашого контейнера GTM і видалити непотрібні теги.

Однак майте на увазі, що, найімовірніше, ви не зможете повністю виключити такі JS-файли з цього розділу в PageSpeed Insights. 

Деякі типи змінних можуть бути частиною самого GTM і є обов'язковими для роботи GTM загалом. До таких змінних належать Auto Event Variable, DOM Element, Element Visibility тощо. Ви можете навіть не додавати ці змінні у свій контейнер, але бачити їх як «unused JS code» у PageSpeed Insights.

Вони є частиною бібліотеки GTM, тому їхнє видалення може порушити роботу коду та призвести до некоректної роботи або повної зупинки GTM.

Чому ж цей код з'являється у списку «unused JS code», якщо він є частиною бібліотеки GTM і необхідний для його роботи? PageSpeed Insights позначає його як невикористовуваний, оскільки у вашому контейнері немає такого типу змінної. Він міститься лише в бібліотеці GTM.

Як бачите, фундаментальна проблема, з якою ви можете зіткнутися у випадку з JS-файлами GTM, пов'язана з невпорядкованими, перевантаженими контейнерами. Ключове рішення — своєчасно відстежувати розмір контейнера та видаляти непотрібні теги.

Є два способи відстежувати розмір контейнера GTM:

Додайте у свій браузер розширення Get Google Tag Manager Size і просто використовуйте його на своєму вебсайті, коли захочете перевірити розмір.

Розширення покаже вам розмір контейнера та надасть детальну інформацію про кількість змінних, тегів і тригерів.

Скористайтеся наведеним нижче посиланням, щоб перевірити розмір вашого контейнера GTM. Замість частини «YOUR_ID» в URL-адресі додайте ID вашого контейнера (натисніть «Workspace» у GTM, і ви побачите ID).

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

Коли відкриється сторінка з результатом, скопіюйте та вставте його вміст у TextEdit (для Mac OS) або Notepad (для Windows OS). Після цього ви зможете побачити розмір цього файлу — це і є розмір вашого контейнера GTM.

Коли перевіряти розмір контейнера GTM?

Граничний розмір контейнера становить 200 КБ, але GTM попередить вас, якщо ви досягнете 140 КБ. Звісно, наполегливо рекомендується тримати розмір контейнерів значно меншим за це значення, щоб не впливати на продуктивність вебсайту.

Ми рекомендуємо час від часу моніторити розмір контейнера, особливо після масштабних змін та налаштувань трекінгу, щоб ви могли контролювати вплив коду GTM на продуктивність вашого вебсайту.

Надлишок JS-файлів GTM може суттєво погіршити показник продуктивності вашого вебсайту в PageSpeed Insights. Цей код уповільнює завантаження, що призводить до вищого показника відмов і гіршого ранжування в SEO.

Найефективніші способи зменшити кількість JS-файлів GTM — контролювати їхній розмір, проводити аудит контейнерів GTM і видаляти непотрібні теги. Однак якщо зменшення кількості тегів не допомагає, ми радимо розглянути серверний трекінг замість клієнтського. Завдяки серверній частині всі теги GTM завантажуватимуться в серверний контейнер замість браузера, що пришвидшить завантаження вебсайту.