Яндекс РСЯ и Метрика ленивая (отложенная) загрузка

При создании сайта необходимо доводить все параметры нового ресурса до уровня требований современных поисковых систем. Должны учитываться все современные тенденции и стандарты, а также технические требования предявляемые поисковыми машинами. В упрощеннном варианте, на СЕО жаргоне, это относится к разделу - "техничка". Где одним из  последних требований является хороший показатель скорости загрузки страниц сайта - pagespeed(пейджспид). В основные параметры этого показателя, на время написания этой статьи, входят CLS, FID, LCP.

• LCP Largest Contentful Paint (отрисовка самого крупного контента)
• FID First Input Delay (задержка после первого ввода)
• CLS Cumulative Layout Shift (Совокупное смещение макета)

Как это рекомендует Google:

Вот тут и возникает основная проблема с счётчиками и скриптами Яндекса. При подключении Я.Метрики показатель скорости загрузки сползает вплоть до красной зоны из-за подгружаемого файла tag.js. При подключении рекламной сети РСЯ, так же очень сильно начинает "тормозить" сайт скрипт context.js. Как нивелировать влияние этих скриптов на скорость загрузки страниц сайта?

Ленивая (отложенная) загрузка кода Яндекс.Метрики

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

Подходящий ответ я нашёл на станице плагина для Wordpress - https://wordpress.org/plugins/true-lazy-analytics/. Если взять Ява скрипт код из плагина, то рабочий вариант выглядит так:

<script>( function () {
        var loadedTLAnalytics = false,timerId;
      if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) > -1){ //Это пропуск робота Метрики
             loadTLAnalytics();
      } else {
             window.addEventListener( 'scroll', loadTLAnalytics, { passive: true } );
             window.addEventListener( 'touchstart', loadTLAnalytics, { passive: true } );
             document.addEventListener( 'mouseenter', loadTLAnalytics, { passive: true } );
            document.addEventListener( 'click', loadTLAnalytics, { passive: true } );
            document.addEventListener( 'DOMContentLoaded', loadFallback, { passive: true } );
     }
 function loadFallback() {
           timerId = setTimeout( loadTLAnalytics, 5000 ); //Тут глобальное время задержки 5000 - 5 сек.
 } 
function loadTLAnalytics( e ) {
     if ( loadedTLAnalytics ) {
          return;
     }
    setTimeout(function () {
              //Здесь счетчик 1
     },0); //Тут можно отложить загрузку для каждого счетчика
    setTimeout(function () {
            //Здесь счетчик 2
      },0); //Тут можно отложить загрузку для каждого счетчика

   loadedTLAnalytics = true;
   clearTimeout( timerId );
   window.removeEventListener( 'scroll', loadTLAnalytics, { passive: true} );
   window.removeEventListener( 'touchstart', loadTLAnalytics, {passive: true} );
   document.removeEventListener( 'mouseenter', loadTLAnalytics, { passive: true } );
   document.removeEventListener( 'click', loadTLAnalytics, { passive: true } );
   document.removeEventListener( 'DOMContentLoaded', loadFallback, { passive: true } );
 }
} )();
</script>

Ленивая (отложенная) загрузка рекламных блоков РСЯ

Код подключения РСЯ выглядит так, добавление в head:

<script>window.yaContextCb = window.yaContextCb || []</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>

Самая "большая проблема" это сам скрипт context.js, хоть он и загружается асинхронно, но все равно "ест" много ресурсов, пытаясь что-то отобразить на странице. Но ведь страница ещё не загружена для пользователя полностью, а это потеря времени. Скорость загрузки страницы и отрисовка первого контента для пользователя сейчас это приоритет номер один. Выход простой, надо сделать так, чтобы скрипт загружался через 2-2,5 секунды.

Теперь осталось только немного "допилить" логику работы скриптов и будет "правильный" код для работы с Метрикой и РСЯ. Для начала добавим функцию для запуска любого стороннего скрипта в код страницы:

function addscript(a,callback,d){
         var eli = document.createElement("script");
         eli.src = a;
         if(!d)eli.async = true;
         else eli.defer = true;
         m=document.getElementsByTagName("script")[0];
         m.parentNode.insertBefore(eli,m);
          eli.onload = () => {
             if (callback) callback();
          } 
 }

Конечный скрипт ленивой (отложенной) загрузки

Теперь осталось сложить все элементы в единое целое, и мы получим работчий скрипт ленивой (отложенной) загрузки Яндекс.Метрика и Яндекс.РСЯ.

<script>
( function () {
    var loadedTLAnalytics = false,timerId;
   if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1) {    //Это пропуск робота Метрики
        loadTLAnalytics();
   } else {
        window.addEventListener( 'scroll', loadTLAnalytics, { passive: true } );
        window.addEventListener( 'touchstart', loadTLAnalytics, { passive: true } );
        document.addEventListener( 'mouseenter', loadTLAnalytics, { passive: true } );
        document.addEventListener( 'click', loadTLAnalytics, { passive: true } );
        document.addEventListener( 'DOMContentLoaded', loadFallback, { passive: true } );
   }
   function loadFallback() {
        timerId = setTimeout( loadTLAnalytics, 5000 ); //Это глобальное время задержки 5000 - 5 сек.
   }
   function loadTLAnalytics( e ) {
        if ( loadedTLAnalytics ) {
                return;
        }

        setTimeout(function () { //Загрузка счетчика Метрики, где XXXXXXX - это номер вашего счётчика
                 (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( XXXXXXX, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ecommerce:"dataLayer", triggerEvent:true } );
        },0); //Тут можно отложить загрузку для скритпа метрики дополнительно

        setTimeout(function ()  {
                addscript("https://yandex.ru/ads/system/context.js", function()  {

                   if( document.getElementById("yandex_rtb_R-A-XXXXX-X") ) {
                        window.yaContextCb.push(()  => {
                             Ya.Context.AdvManager.render( {
                                renderTo: 'yandex_rtb_R-A-XXXXX-X',
                                blockId: 'R-A-XXXXX-X'
                             } )
                         } );
                  }

                  /* Здесь можно добавить второй и более блоков */

               });
        },2000); //Тут можно отложить загрузку для скритпа context.js дополнительно
   loadedTLAnalytics = true;
   clearTimeout( timerId );
   window.removeEventListener( 'scroll', loadTLAnalytics, { passive: true} );
   window.removeEventListener( 'touchstart', loadTLAnalytics, {passive: true} );
   document.removeEventListener( 'mouseenter', loadTLAnalytics, { passive: true } );
   document.removeEventListener( 'click', loadTLAnalytics, { passive: true } );
   document.removeEventListener( 'DOMContentLoaded', loadFallback, { passive: true } );
}
} )();
function addscript(a,callback,d) {
   var eli = document.createElement("script");
   eli.src = a;
   eli.async = true;
   m=document.getElementsByTagName("script")[0];
   m.parentNode.insertBefore(eli,m);
   eli.onload = () => {
        if (callback) callback();
   }
}
</script>

 XXXXXXX - это номер вашего счётчика в Метрике, а R-A-XXXXX-X - это ваши  номера блоков в РСЯ.

В итоге мы получаем

При визите пользователя на старницу сайта, если пользователь не предпринял никаких действий в виде скрола, клика, или просто движения мышкой, то скрип загрузится через 5 секунд, а блоки РСЯ  через 7 секунд, в указанной конфигурации. Если же было какое либо действие пользователя, то грузится скрипт Меррики, и через 2 секунды РСЯ.

Для вывода блока рекламы в контенте, нужно просто вывести <div id="yandex_rtb_R-A-XXXXXX-X"></div> в нужном месте.