Скрипт Яндекс.Метрики (tag.js) негативно влияет на PageSpeed: что делать

0 10

Итак, вы решили улучшить ваш показатель PageSpeed. Но в процессе проверки вы заметили, что скрипты Яндекс.Метрики серьезно ухудшают положение дел (что особенно заметно при проверке сайта на мобильных устройствах). Давайте посмотрим на примере с нашим сайтом oddstyle.ru.

В поддержке Яндекса признавали эту проблему (но дальше тестирования ничего не сдвинулось до сих пор):

Скрипт Яндекс.Метрики (tag.js) негативно влияет на PageSpeed: что делать

upd 28/07/2021: Счетчик был обновлен (спасибо за информацию Mihdan), но результаты все равно далеки от идеала. См. комментарии.

У нас стоит следующий код для подключения Яндекс.Метрики:

 <script type="text/javascript">    (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();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(xxxxxxxx, "init", {         clickmap:true,         trackLinks:true,         accurateTrackBounce:true    }); </script> 

При проверке мы получаем следующие показатели.

Скрипт Яндекс.Метрики (tag.js) негативно влияет на PageSpeed: что делать

Естественно, показатели эти так себе. Смотрим ниже и видим следующее:

Скрипт Яндекс.Метрики (tag.js) негативно влияет на PageSpeed: что делать

Как видно отсюда, Метрика сильно блокирует основной поток загрузки.

Естественно, у нас есть вариант вообще от нее отказаться. Если Метрику вообще отключить, то показатель будет следующим:

Скрипт Яндекс.Метрики (tag.js) негативно влияет на PageSpeed: что делать

В разы лучше.

Но как быть, если Метрика все же нужна, хочется использовать некоторые ее особенности?

Одно из решений – заключить вызов функции в setTimeout, чтобы загрузка скрипта была отложена, пока основной контент не будет загружен.

Вот как будет выглядеть код скрипта (не забудьте подставить вместо xxxxxxxx номер своего счетчика):

 <script data-cfasync="false" type="text/javascript">   setTimeout(function(){        (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();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(xxxxxxxx, "init", {             clickmap:true,             trackLinks:true,             accurateTrackBounce:true         });     }, 5000); //set this as high as you can without ruining your stats. </script>  

Вместо 5000 нужно будет подобрать значение, которое позволит вам поддерживать хороший показатель PageSpeed (можно задавать больше, чем 5000).

Вставляем данный код в header.php и имеем следующее:

Скрипт Яндекс.Метрики (tag.js) негативно влияет на PageSpeed: что делать

Чуть похуже, чем без скрипта Метрики вообще, но все равно отлично.

Собственно, setTimeout помог добиться хороших результатов для мобильных, при этом не отказываясь вообще от Метрики.

Для десктопов мы имеем следующее с данным кодом:

Скрипт Яндекс.Метрики (tag.js) негативно влияет на PageSpeed: что делать

Если вы знаете другие методы улучшения PageSpeed для скриптов Метрики, делитесь ими в комментариях.

Источник: oddstyle.ru

Оставьте ответ

Ваш электронный адрес не будет опубликован.