Отложенная загрузка метрики

Введение

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

Преимущества отложенной загрузки

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

• Ускорить начальную загрузку страницы
• Улучшить показатели Core Web Vitals
• Снизить нагрузку на браузер при первом рендеринге

Логика работы

В приведенном ниже коде реализована следующая логика:

• Скрипт метрики загружается при первом взаимодействии пользователя со страницей (скролл, клик, касание)
• Если взаимодействия не произошло, скрипт загрузится через 5 секунд после загрузки DOM
• Для роботов Яндекса метрика загружается сразу

Реализация

Такой подход позволяет собирать аналитику, не жертвуя скоростью загрузки сайта. Давайте посмотрим на реализацию:

<script>( function () {
    var loadedAnal = false,                    
        timerId;

    if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) {
            loadAnal();
        } else {
        window.addEventListener( 'scroll', loadAnal, {passive: true} );
        window.addEventListener( 'touchstart', loadAnal, {passive: true} );
        document.addEventListener( 'mouseenter', loadAnal, {passive: true} );
        document.addEventListener( 'click', loadAnal, {passive: true} );
        document.addEventListener( 'DOMContentLoaded', loadFallback, {passive: true} );
    }

    function loadFallback() {
        timerId = setTimeout( loadAnal, 5000 );
    }

    function loadAnal( e ) {
        if ( e && e.type ) {
            console.log( e.type );
        } else {
            console.log( 'DOMContentLoaded' );
        }
        if ( loadedAnal ) {
            return;
        }
        setTimeout(
            function () {
                var metricaId = КОД-МЕТРИКИ;(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(metricaId, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); console.log("ym start");},
            100
        );
        loadedAnal = true;
        clearTimeout( timerId );
        window.removeEventListener( 'scroll', loadAnal, {passive: true}  );
        window.removeEventListener( 'touchstart', loadAnal, {passive: true}  );
        document.removeEventListener( 'mouseenter', loadAnal );
        document.removeEventListener( 'click', loadAnal );
        document.removeEventListener( 'DOMContentLoaded', loadFallback );
    }
} )()</script>

Заключение

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