Web Vitals — набор метрик от Google, которые показывают, насколько быстро и стабильно загружается ваш сайт, как плавно отображается контент и насколько оперативно интерфейс реагирует на действия пользователя.

В этой статье вы найдёте пошаговую инструкцию по интеграции Web Vitals в проект, отправке метрик в Яндекс.Метрику и настройке отчётов для оперативного мониторинга. Благодаря этому вы сможете своевременно выявлять и устранять «узкие места» в работе приложения ещё до появления жалоб пользователей.

Web Vitals - основные метрики

Метрика	Что измеряет	Хорошо	Требует улучшения	Плохо
CLS (Cumulative Layout Shift)	Насколько «прыгает» контент страницы без взаимодействия пользователя	≤ 0.1	≤ 0.25	> 0.25
LCP (Largest Contentful Paint)	Время загрузки самого большого видимого элемента (например, изображения или заголовка)	≤ 2500 мс	≤ 4000 мс	> 4000 мс
FCP (First Contentful Paint)	Когда на экране появляется первый видимый элемент	≤ 1800 мс	≤ 3000 мс	> 3000 мс
TTFB (Time To First Byte)	Время до получения первого байта от сервера	≤ 800 мс	≤ 1800 мс	> 1800 мс
INP (Interaction to Next Paint)	Время отклика интерфейса на взаимодействие пользователя	≤ 200 мс	≤ 500 мс	> 500 мс

Обратите внимание:
FCP и TTFB снимаются только один раз при первой загрузке страницы.
LCP, CLS и INP могут обновляться несколько раз, но в SPA-проектах при навигации между роутами метрики не пересчитываются заново — после перехода вы увидите уже зафиксированные ранее значения.

Создание счётчика в Яндекс.Метрике

Зайдите на https://metrika.yandex.ru/ и нажмите “Добавить счётчик”.

В поле “Адрес сайта” укажите домен вашего проекта, например example.com

На следующем этапе скопируйте код счётчика и добавьте его номер в ваш проект.

// src/constants/yandexMetrika
export const YM_ID = '101945078'

Подключение Яндекс.Метрики

Подгрузите асинхронно скрипт Яндекс.Метрики, вызовите её API через функцию safeYm после загрузки и сразу инициализируйте счётчик с нужными опциями (их набор зависит от особенностей вашего проекта).

//src/utils/yandexMetrika.js

// Достаём ваш ID счётчика из констант
import { YM_ID } from "@/constants/yandexMetrika";

// Безопасный вызов метода ym
export const safeYm = (...args) => {
  if (
    typeof window !== "undefined" && // если у нас есть объект window
    typeof window.ym !== "undefined" // и библиотека Я.Метрики уже загружена
  ) {
    window.ym(YM_ID, ...args);
  }
};

// Инициализация Яндекс.Метрики
export const initYandexMetrika = () => {
  (function (m, e, t, r, i, k, a) {
    // m — window, e — document, t — имя тега ("script"), r — URL тега,
    // i — имя глобальной функции ("ym"), k, a — вспомогательные переменные
    m[i] =
      m[i] ||
      function () {
        (m[i].a = m[i].a || []).push(arguments);
      };
    m[i].l = 1 * new Date(); // метка времени загрузки

    // Не встраиваем скрипт повторно, если уже есть tag.js
    for (var j = 0; j < document.scripts.length; j++) {
      if (document.scripts[j].src === r) {
        return;
      }
    }

    // Создаём <script async src="https://mc.yandex.ru/metrika/tag.js">
    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");

  // После загрузки скрипта сразу инициализируем Метрику с нужными опциями
  safeYm("init", {
    clickmap: true, // тепловые карты кликов
    trackLinks: true, // отслеживание переходов по ссылкам
    accurateTrackBounce: true, // точный расчёт отказов
    webvisor: true, // запись поведения пользователя (WebVisor)
  });
};

Подключение Web Vitals

Установите пакет. В данном примере используется версия 5.0.1

yarn add web-vitals

Настройте сбор ключевых метрик Web Vitals и их отправку в Яндекс.Метрику.

// src/utils/webVitals.ts
import { onCLS, onLCP, onFCP, onTTFB, onINP } from "web-vitals";
import { safeYm } from "@/utils/yandexMetrika";
import router from "@/router";

// Задаём пороговые значения [good, poor] для каждой метрики
const thresholds: Record<string, [number, number]> = {
  CLS: [0.1, 0.25],
  LCP: [2500, 4000],
  FCP: [1800, 3000],
  TTFB: [800, 1800],
  INP: [200, 500],
};

// Определяем статус метрики по её значению:
 
function getMetricStatus(name: string, value: number): string {
  const [good, poor] = thresholds[name] || [];
  if (good == null) return "unknown";
  if (value <= good) return "good";
  if (value <= poor) return "needsImprovement";
  return "poor";
}

/* Когда срабатывает метрика, вычисляем её статус и отправляем событие 
   в Яндекс.Метрику с параметрами */
async function sendToYandex({
  name,
  value,
  id,
}: {
  name: string;
  value: number;
  id: string;
}) {
  const status = getMetricStatus(name, value);
  console.log(`[WebVitals] ${name}:`, value, `(status: ${status})`);

  // Для CLS сохраняем точность до тысячных, для остальных — округляем
  const ymValue = name === "CLS" ? Number(value.toFixed(3)) : Math.round(value);

  safeYm("reachGoal", name, {
    value: ymValue,
    sessionId: id,
    status,
    url: router.currentRoute.value.name,
  });
}

Инициализация Web Vitals и Яндекс.Метрики

// src/App.vue
import { initYandexMetrika } from '@/utils/yandexMetrika'
import { initWebVitals } from '@/utils/webVitals'

if (configStore.config.env === 'production') { 
  initYandexMetrika()
  initWebVitals()
}

Поскольку в Яндекс.Метрике нельзя зарегистрировать localhost, счётчик нужно подключать в production-сборке. Чтобы протестировать сбор Web Vitals локально, соберите приложение командой:

npm run build  
npm run serve

Открывайте тестовую версию в режиме инкогнито, чтобы не было кэшированных скриптов, и в DevTools включайте эмуляцию медленной сети (Network → Throttling) и CPU Throttling (Performance → ⚙️), чтобы оценить, как меняются метрики при разных условиях.

Настройка отчётов в Яндекс.Метрике

В сайдбаре выберите "Цели" → "Добавить цель".

Тип условия: JavaScript-событие. В названии и идентификаторе укажите имя метрики (LCP, CLS, TTFB, FCP, INP).

Аналогично добавьте цели для остальных метрик - CLS, TTFB, FCP, INP.

После сбора первых данных перейдите в "Отчёты" → "Параметры цели".

Выберите период (например, 15–16 мая 2025).

Прямо под графиком нажмите на кнопку "Группировки" и выберите следующие параметры:

Далее нажмите на кнопку "Метрики" и отметьте "Сумма параметров события" и "Среднее параметров события".

В отчёте по каждой метрике есть подробный список её параметров. Чтобы на графике отображалось среднее значение, выберите для метрики "Среднее параметров события" и отметьте галочкой параметр value.

Дашборды и виджеты

Теперь мы можем гибко фильтровать и анализировать полученные данные. Создадим для примера несколько виджетов.

1. Линейный график колебаний метрики

Показывает, как менялось среднее значение выбранной метрики во времени, позволяя сразу увидеть тренды, пики и аномалии.

Снимите чекбоксы у всех метрик, кроме той, которую хотите отобразить.

Выберите сегмент, включающий только события нужной метрики.

Нажмите "На дашборд" в правом верхнем углу отчёта.

И выберите следующие значения:

На созданном виджете вы увидите линейный график со средней величиной метрики за выбранный период.

2. Круговая диаграмма статусов

Показывает процентное распределение статусов выбранной метрики (good, needsImprovement, poor).

Переключите метрики на процентное соотношение. Вверху отчёта выберите "Количество событий" → %, чтобы построить диаграмму долей. Снимите галочку с параметра value и поставьте отметки рядом с нужными статусами.

В меню визуализации графика нажмите "Круговая".

Далее нажмите "На дашборд" и выберите следующие значения:

В готовом виджете отобразится круговая диаграмма с процентным распределением статусов метрики.

3. Столбчатый график URL с плохими показателями

И наконец создадим виджет для отслеживания URL страниц, на которых у нас зафиксированы метрики с плохими показателями.

Добавьте для выборки новый сегмент по значению параметра status = poor.

В меню визуализации графика нажмите "Колонки".

Отметьте галочками только отфильтрованные страницы с плохим статусом.

Далее создайте виджет.

На выбранном дашборде появится виджет следующего вида (в отображении графика выберите "Столбчатый график - по категориям") :

Заключение

Интеграция Web Vitals и Яндекс.Метрики позволяет не просто собирать «сырые» показатели производительности, но и быстро визуализировать их в виде удобных дашбордов.

Вы увидите, как меняются ключевые метрики (LCP, CLS, FCP, TTFB, INP) в динамике, и сможете сразу реагировать на ухудшения.
Круговые и линейные графики помогут оценить распределение статусов и тенденции за любой период.
Столбчатые отчёты по URL показывают, на каких страницах проблемы возникают чаще всего, чтобы вы не теряли время на поиск «узких мест».

После настройки регулярного мониторинга вы получите чёткую картину пользовательского опыта и сможете планомерно улучшать скорость загрузки, стабильность верстки и отзывчивость интерфейса.

Следующий шаг — добавить автоматические алерты в Метрике или связать её с системой оповещений (Slack, электронная почта), чтобы ключевые члены команды мгновенно узнавали о серьёзных падениях показателей.

Надеюсь, эта статья поможет вам выстроить эффективный процесс мониторинга производительности и сделать ваше приложение ещё быстрее и надёжнее для пользователей!

Полезные ссылки

https://web.dev/articles/vitals - Web Vitals
https://www.npmjs.com/package/web-vitals - Web Vitals docs
https://yandex.ru/support/metrica/ru/ - Yandex.Metrika docs

Мониторинг Web Vitals через Яндекс.Метрику: пошаговое руководство