Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

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

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

Необходимо передать код Google Tag Manager во внешний JavaScript-файл, а затем загрузить этот файл в HTML с помощью атрибута defer. Этот атрибут гарантирует, что скрипт будет выполнен после завершения загрузки страницы, что может быть особенно полезно, если скрипт не должен выполняться немедленно, а вы хотите улучшить производительность загрузки страницы. Я показываю, как это сделать:.

Сначала создайте новый JavaScript-файл (например, googleTagManager.js) и вставьте в него JavaScript-код Google Tag Manager:

// googleTagManager.js
(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-XXXXXB');

Затем в HTML-файле добавьте тег <script>, ссылающийся на этот новый файл, используя атрибут defer:

<!-- Cargando el script de Google Tag Manager -->
<script src="googleTagManager.js" defer></script>

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