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

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

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

Обратите внимание:

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 и Яндекс.Метрики позволяет не просто собирать «сырые» показатели производительности, но и быстро визуализировать их в виде удобных дашбордов.

1. Вы увидите, как меняются ключевые метрики (LCP, CLS, FCP, TTFB, INP) в динамике, и сможете сразу реагировать на ухудшения.

2. Круговые и линейные графики помогут оценить распределение статусов и тенденции за любой период.

3. Столбчатые отчёты по 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