RDRybin

Владельцы сайтов часто гонятся за высокими показателями скорости загрузки страниц в Google PageSpeed Insights и GTmetrix.

Давайте проверим как влияет установка Яндекс Метрики на показатели скорости загрузки сайта. Для этого используем:

  • чистую установку WordPress версии 5.9.3,
  • хостинг с версией php 8.0,
  • протокол HTTPS — HTTP/2
  • тема — Twenty Twenty-One.

А проверять будем стандартную страницу «Привет, мир!».

Скорость сайта без Яндекс Метрики

Начнем с замера скорости пустого сайта

Имеем следующие показатели:

  • PageSpeed для мобильных — 100
  • PageSpeed для десктопа — 100
  • GTmetrix: B, 85, 93
  • Размер страницы: 57,9 КБ
  • Запросов: 9

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

Скорость сайта с яндекс метрикой

Для начала возьмем счетчик с автоматическими целями и вебвизором, картой скроллинга, аналитикой форм. Добавим счетчик метрики в подвал сайта самым простым способом — через виджет.

И имеем следующее:

  • PageSpeed для мобильных — 92
  • PageSpeed для десктопа — 100
  • GTmetrix: B, 86, 93
  • Размер страницы: 129 КБ
  • Запросов: 15

Pagespeed отреагировал на добавление скрипта метрики, но только на мобильных сняв 8 пунктов.

В возможностях появились следующие пункты:

  • Удалите неиспользуемый код CSS 0,43 s
  • Устраните ресурсы, блокирующие отображение 0,28 s
  • Удалите неиспользуемый код JavaScript 0,15 s

Странно, но к самой метрике относится только «неиспользуемый код JavaScript»

GTmetrix даже показал улучшение, видимо из-за сократившегося (по неизвестным мне причинам) времени ответа сервера. Да и вообще GTmetrix выдает крайне нестабильный результат.

Теперь проверим с базовым скриптом метрики

И получаем довольно схожий результат:

  • PageSpeed для мобильных — 93
  • PageSpeed для десктопа — 100
  • GTmetrix: B, 85, 90
  • Размер страницы: 129 КБ
  • Запросов: 13

Изменения метрик в рамках погрешности, размер страницы не уменьшился, получилось сэкономить 2 запроса.

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

Самым распространенным вариантом решения проблемы «медленной загрузки сайта» является отложенная загрузка Яндекс Метрики. Идея проста — грузим сайт, ждем и загружаем метрику. . Есть несколько реализаций данного решения.

Откладываем загрузку по таймауту после загрузки страницы (DOM)

Самое простое решение отложить по таймауту поле загрузки DOM-дерева. Другими словами браузер грузит HTML, строит дерево элементов и тут мы запускаем функцию планирования setTimeout которая загружает код через заданное время.

Код ниже отложит загрузку яндекс Метрики на 4500 миллисекунд (4,5 секунды)

Все что находится внутри тега <script></script> кода метрики нужно завернуть в код javascript

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(function(){
    //Код метрики
  }, 4500); // время в миллисекундах на которое мы откладываем запуск скрипта
});

Было

<!-- Yandex.Metrika counter -->
<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(88235102, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/11111111" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

Стало

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
document.addEventListener('DOMContentLoaded', () => {
  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(88235102, "init", {
      clickmap:true,
      trackLinks:true,
      accurateTrackBounce:true
    });
  }, 4500); // время в миллисекундах на которое мы откладываем запуск скрипта
 });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/11111111" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

Откладываем загрузку метрики после событий скролла, клика, движения мыши

Эти варианты подсмотрел https://gist.github.com/Sentinel-7/4b0006c61a9ecf1a555e4734cdd78dca

Откладываем загрузку по таймауту после скролла

Скрипт ждет когда на странице произойдет скролл, а потом еще 1000 миллисекунд (1 секунду) и грузит скрипт метрики.

var fired = false;
window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Сюда вставляете метрики без тегов <script>           
        }, 1000)
    }
});

Откладываем загрузку по таймауту после скролла, движения мыши или клика

Еще более сложный вариант. Скрипт ждет скролла, движения мыши или клика. Ждет еще 500 миллисекунд и грузит скрипт метрики

var loadedMetrica = false;
window.addEventListener('scroll', loadMetrica);
window.addEventListener('click', loadMetrica);
window.addEventListener('mousemove', loadMetrica);
function loadMetrica() {
    if (!loadedMetrica) { 
        setTimeout(function() {
            /* ТУТ ВАШ КОД И СКРИПТЫ, метрика например*/        
        },500);
    }
    loadedMetrica = true;
    window.removeEventListener('scroll', loadMetrica);
window.removeEventListener('click', loadMetrica);
window.removeEventListener('mousemove', loadMetrica);
};

Скорость сайта с отложенной яндекс метрикой

Тестим и получаем:

  • PageSpeed для мобильных — 100
  • PageSpeed для десктопа — 100
  • GTmetrix: B, 85, 90
  • Размер страницы: 130 КБ
  • Запросов: 15

Google PageSpeed опять доволен нашим сайтом. С GTmetrix тоже все нормально, единственно, увеличилось время полной загрузки из-за отложенной загрузки скрипта, но на оценке это не сказывается.

Проблема такого решения — метрика начинает собирать информацию о посещении не сразу, а только после загрузки. Это может привести к увеличению показателя отказов.

Вывод

Теперь подытожим выше написанное:

  • Естественно метрика снимает очки PageSpeed на мобильном, но на оптимизированном сайте не выкинет вас из зеленой зоны.
  • Использовать только базовый код метрики имеет мало смысла, влияние на оптимизацию минимально
  • Откладывание загрузки кода метрики помогает вернуть потерянные очки на PageSpeed.
  • Отложенная загрузка не пишет начало посещения и может привести к увеличению показателя отказов в Яндекс Метрике

Добавить комментарий

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