Core Web Vitals: три числа, которые измеряет Google

Core Web Vitals — подтверждённый фактор ранжирования и, что важнее, фактор конверсии. Актуальная тройка:

• LCP (Largest Contentful Paint) — основной контент виден за < 2,5 с. Лечится: статика/ISR, priority на hero-картинке, минимум блокирующего CSS, быстрый TTFB (см. Стратегия рендеринга).
• INP (Interaction to Next Paint) — заменил FID в марте 2024; каждое взаимодействие должно отвечать за < 200 мс. Лечится: меньше и ленивее сторонние скрипты, меньше клиентский бандл ("use client" только где нужно), разбиение длинных задач.
• CLS (Cumulative Layout Shift) — < 0,1. Лечится: размеры у всех картинок/эмбедов, зарезервированное место под баннеры, next/font (без прыжков при подмене шрифта).

Измеряйте двумя способами:

• Лабораторно: Lighthouse в CI (например, @lhci/cli на каждый PR) ловит регрессии до деплоя.
• Полевые данные: именно на данных реальных пользователей Google и ранжирует. Подключается одним хуком:

// app/web-vitals.tsx
"use client";
import { useReportWebVitals } from "next/web-vitals";

export function WebVitals() {
  useReportWebVitals((metric) => {
    // отправляем в свою аналитику
    navigator.sendBeacon("/api/vitals", JSON.stringify(metric));
  });
  return null;
}

Полевые данные смотрите в Search Console → Core Web Vitals или в PageSpeed Insights (показывает CrUX, когда данных достаточно).

Чеклист:

• LCP < 2,5 с, INP < 200 мс, CLS < 0,1 в полевых данных, а не только в Lighthouse
• Lighthouse CI или аналог защищает от регрессий
• useReportWebVitals шлёт метрики реальных пользователей в аналитику
• Мобильные проверены отдельно — именно там сыпется большинство сайтов