Я.Метрика и GA тормозят сайт

Симптом

• Время первой рендер‑показа (FCP) увеличивается на 200–500 мс после включения Яндекс.Метрики.
• В DevTools → Performance виден длительный интервал, связанный с загрузкой и выполнением скрипта https://mc.yandex.ru/metrika/tag.js.
• При отключении Метрики сайт загружается быстрее, а в отчётах Lighthouse показатель «Time to Interactive» падает.
• В консоли браузера появляются предупреждения о том, что скрипт блокирует рендеринг (например, Script execution blocked).
• На мобильных устройствах, где ресурсы ограничены, заметно ухудшение общей производительности.

Причина

Яндекс.Метрика подключается как обычный <script> без атрибутов async/defer.
Браузер загружает и синхронно исполняет скрипт до того, как продолжит парсинг HTML, что блокирует рендеринг страницы.
Кроме того, скрипт сразу начинает собирать данные о пользователе, создавая несколько запросов к серверам Яндекса. Это увеличивает сетевой трафик и задержку, особенно при медленном соединении.

Как проверить

1. Проверьте порядок загрузки скрипта
   ```html
   

`` Если атрибутыasyncилиdefer` отсутствуют – это потенциальная причина.

2. Измерьте влияние скрипта в DevTools
   - Откройте DevTools → Performance.
   - Запустите запись и откройте страницу.
   - Найдите событие load для tag.js и посмотрите, сколько времени занимает его выполнение.

3. Проверьте сетевой трафик
   - В DevTools → Network откройте вкладку XHR.
   - Посмотрите, сколько запросов отправляется сразу после загрузки скрипта (обычно 2–3).

4. Сравните скорость с отключённой Метрикой
   - Отключите скрипт в коде (комментарием) и запустите Performance снова.
   - Сравните FCP и TTI.

Решение

1. Добавить атрибуты async и defer

<script async defer src="https://mc.yandex.ru/metrika/tag.js"></script>

• async позволяет браузеру загружать скрипт параллельно с парсингом страницы, а defer гарантирует, что он выполнится после завершения парсинга, не блокируя рендеринг.

2. Отложенная инициализация

Если вы хотите, чтобы Метрика запускалась только после полной загрузки страницы, используйте defer и вызов ym внутри события DOMContentLoaded:

<script async src="https://mc.yandex.ru/metrika/tag.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    ym(12345678, 'init', {
      clickmap:true,
      trackLinks:true,
      accurateTrackBounce:true,
      webvisor:true
    });
  });
</script>

3. Lazy‑load скрипт

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

<script>
  function loadYandexMetrika() {
    var script = document.createElement('script');
    script.src = 'https://mc.yandex.ru/metrika/tag.js';
    script.async = true;
    script.onload = function () {
      ym(12345678, 'init', {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
      });
    };
    document.head.appendChild(script);
  }

  // Загрузить после первого клика
  document.addEventListener('click', loadYandexMetrika, { once: true });
</script>

4. Использовать data- атрибуты для конфигурации

Если вы используете ym через атрибуты, можно задать параметры в data-:

<script async src="https://mc.yandex.ru/metrika/tag.js"></script>
<script>
  ym(12345678, 'init', {
    clickmap: true,
    trackLinks: true,
    accurateTrackBounce: true,
    webvisor: true
  });
</script>

5. Проверка после изменений

• Запустите Performance снова, убедитесь, что FCP и TTI улучшились.
• В Network убедитесь, что запросы к tag.js теперь выполняются асинхронно и не блокируют рендеринг.

Связанные

• Как оптимизировать загрузку JavaScript
• Проблемы с Lighthouse: Time to Interactive