PageSpeed OptiPic — автоматическая оптимизация сайта для требований Google Pagespeed Insights
JavaScript: Слияние, сжатие, ленивая загрузка. CSS: Сжатие размера и оптимизация загрузки. Оптимизация изображений. Оптимизация сторонних виджетов и систем аналитики.

Как избежать проблемы, связанной с Google Tag Manager в скорости страницы для улучшения производительности?

У нас есть официальный сайт компании. При проверке скорости загрузки страницы сайт имеет низкий рейтинг и показывает скрипт Google Tag Manager в разделе «Уменьшить неиспользуемый JavaScript». Поскольку Google Tag Manager важен для сайта, есть ли способ решить эту проблему? Атрибут 'defer' не работает с этим скриптом.

#1

Google Tag Manager по определению снижает производительность. Его единственная цель - позволить неспециалистам загрузить случайные мусорные очень важные сторонние скрипты на сайт. Если вы обойдете GTM, вставив внешние теги/скрипты, которые вы хотите использовать на своем сайте напрямую, это немедленно улучшит производительность.

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

<!-- Google Tag Manager --> <script>(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-XXXX');</script> <!-- End Google Tag Manager --> 

Теперь вы не можете просто добавить атрибут defer к тегу скрипта, так как это не работает со встроенными скриптами. Но если вы внимательно посмотрите, что делает этот скрипт, вы увидите, что он просто вставляет другой элемент скрипта, который загружает gtm.js с серверов Google. Он даже асинхронный по умолчанию, смотрите эту строку j.async=true. Если вы измените ее на j.defer=true, gtm.js будет загружен отложенно. Имейте в виду, что некоторые скрипты/теги, вставленные GTM, могут быть не готовы к этому, поэтому это может вызвать непредвиденные проблемы.

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

#2

Вы можете предзагрузить библиотеку GTM в теге.

<link href="https://www.googletagmanager.com/gtag/js?id=mygtmid" rel="preload" as="script"> 

Вы также можете добавить предварительную загрузку DNS.

<link rel="dns-prefetch" href="https://www.googletagmanager.com/"> 

Также можно оптимизировать свою GTM внимательно.

  1. Удаляем ненужные теги из GTM
  2. Можно оптимизировать инъекции ваших javascript-кодов из GTM
#3

Вы ТЕСТИРОВАЛИ размещение скриптов на странице вместо контейнера GTM?

Потому что я сделал это с до 40 скриптами, и улучшение практически не заметно.

?