Метрики производительности: Core Web Vitals

Каждый этап загрузки страницы — от первого байта до взаимодействия пользователя — измеряется конкретной метрикой. Core Web Vitals (LCP, INP, CLS) — это стандарт Google для оценки пользовательского опыта, влияющий на SEO-ранжирование с 2021 года. Понимание этих метрик необходимо для осознанной оптимизации.

Что происходит при загрузке страницы

Когда пользователь открывает веб-страницу, происходит последовательность событий:

Навигация — браузер отправляет запрос на сервер
Получение ответа — сервер обрабатывает запрос и отправляет HTML
Парсинг и рендеринг — браузер строит DOM и отрисовывает контент
Интерактивность — страница становится полностью функциональной

Каждый этап измеряется определёнными метриками.

Основные метрики (Core Web Vitals)

TTFB — Time to First Byte

Что это: Время от начала навигации до получения первого байта ответа от сервера.

На что влияет: Задержка перед тем, как браузер начнёт получать контент. Высокий TTFB отодвигает все последующие метрики.

Нормальные значения:

Хорошо: < 800 мс
Требует улучшения: 800–1800 мс
Плохо: > 1800 мс

Как улучшить:

Оптимизировать серверный код (быстрые запросы к БД, кэширование)
Использовать CDN для доставки статики
Применять серверное кэширование (Redis, Memcached)
Минимизировать количество middleware
Использовать HTTP/2 или HTTP/3

FCP — First Contentful Paint

Что это: Время от начала навигации до отрисовки первого элемента контента (текст, изображение, canvas).

На что влияет: Первое визуальное подтверждение, что страница загружается. Пользователь видит, что процесс идёт.

Нормальные значения:

Хорошо: < 1.8 с
Требует улучшения: 1.8–3.0 с
Плохо: > 3.0 с

Как улучшить:

Уменьшить TTFB (см. выше)
Убрать блокирующие ресурсы (CSS в <head>, критический CSS инлайн)
Оптимизировать шрифты (preload, font-display: swap)
Минимизировать JavaScript в начале страницы
Использовать серверный рендеринг (SSR) или статическую генерацию (SSG)

LCP — Largest Contentful Paint

Что это: Время от начала навигации до отрисовки самого большого видимого элемента контента (обычно hero-изображение, видео или большой блок текста).

На что влияет: Восприятие скорости загрузки основного контента. Ключевая метрика для SEO с 2021 года.

Нормальные значения:

Хорошо: < 2.5 с
Требует улучшения: 2.5–4.0 с
Плохо: > 4.0 с

Как улучшить:

Оптимизировать изображения (WebP/AVIF, правильные размеры, lazy loading для невидимых)
Preload критических изображений (<link rel="preload" as="image">)
Уменьшить время отдачи сервера (TTFB)
Убрать блокирующие CSS и JS
Использовать CDN
Кэшировать статические ресурсы

INP — Interaction to Next Paint

Что это: Время от взаимодействия пользователя (клик, тап, ввод) до следующего кадра, отрисованного браузером.

На что влияет: Ощущение отзывчивости интерфейса. Заменяет FID (First Input Delay) с марта 2024 года.

Нормальные значения:

Хорошо: < 200 мс
Требует улучшения: 200–500 мс
Плохо: > 500 мс

Как улучшить:

Разбить длинные задачи JavaScript на меньшие части
Использовать requestIdleCallback для некритичных задач
Оптимизировать обработчики событий (debounce, throttle)
Выносить тяжёлые вычисления в Web Workers
Использовать useTransition и useDeferredValue в React для приоритизации обновлений

CLS — Cumulative Layout Shift

Что это: Суммарная величина непредвиденных сдвигов макета на протяжении всей жизни страницы.

На что влияет: Визуальная стабильность. Элементы не должны “прыгать” во время загрузки.

Нормальные значения:

Хорошо: < 0.1
Требует улучшения: 0.1–0.25
Плохо: > 0.25

Как улучшить:

Всегда указывать размеры для изображений и видео (width/height или aspect-ratio)
Резервировать место для динамического контента (скелетоны, min-height)
Не вставлять контент выше существующего (реклама, баннеры)
Использовать transform для анимаций вместо top/left/width/height
Загружать шрифты заранее (font preload)

Дополнительные метрики

FID — First Input Delay (устаревшая, заменена на INP)

Что это: Время от первого взаимодействия пользователя до ответа браузера.

На что влияет: Первое впечатление от интерактивности.

TTI — Time to Interactive

Что это: Время от начала навигации до полной интерактивности страницы.

На что влияет: Когда пользователь может полноценно взаимодействовать со страницей.

Проблема: Метрика нестабильна и зависит от порядка событий, поэтому не входит в Core Web Vitals.

TBT — Total Blocking Time

Что это: Сумма времени всех задач JavaScript, которые выполнялись дольше 50 мс между FCP и TTI.

На что влияет: Задержка между появлением контента и интерактивностью.

Как улучшить:

Код-сплиттинг (динамические импорты)
Удаление неиспользуемого JavaScript (tree shaking)
Ленивая загрузка некритичных ресурсов
Оптимизация тяжёлых вычислений

Последовательность метрик на таймлайне

Навигация
    │
    ├─ TTFB ──────────────────────────────────────►
    │         │
    │         └─ FCP ─────────────────────────────►
    │                   │
    │                   └─ LCP ───────────────────►
    │                                              │
    │         FID/INP (при первом взаимодействии) ─►
    │                                              │
    │         TTI ─────────────────────────────────►
    │                                              │
    │         CLS (на протяжении всей загрузки) ───►

Инструменты измерения

Для разработки

Lighthouse — встроен в Chrome DevTools (вкладка Lighthouse)
Chrome DevTools Performance — детальный анализ загрузки
Web Vitals extension — расширение для браузера

Для продакшена

Chrome User Experience Report (CrUX) — реальные данные пользователей
PageSpeed Insights — лабораторные и полевые данные
Search Console — отчёты Core Web Vitals для вашего сайта

Библиотеки

// Установка web-vitals
npm install web-vitals

// Использование
import { onCLS, onINP, onLCP } from 'web-vitals';

onCLS(console.log);
onINP(console.log);
onLCP(console.log);

Связь метрик

Метрики взаимосвязаны:

TTFB → FCP → LCP: Улучшение TTFB автоматически улучшает FCP и LCP
FCP → TTI: Быстрый FCP без тяжёлого JS даёт ранний TTI
CLS: Не зависит напрямую от скорости, но влияет на общее восприятие
INP: Зависит от оптимизации JavaScript, а не от скорости загрузки

Приоритеты оптимизации

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

Практический чеклист

Быстрые победы

Включить сжатие gzip/brotli на сервере
Настроить кэширование статики (Cache-Control)
Добавить размеры к изображениям
Использовать CDN для статических ресурсов
Минифицировать CSS и JavaScript

Средние усилия

Оптимизировать изображения (WebP/AVIF)
Настроить preload для критических ресурсов
Реализовать код-сплиттинг
Убрать неиспользуемый CSS/JS
Настроить серверное кэширование

Большие изменения

Переход на SSR/SSG (Next.js, Remix)
Внедрение Edge Runtime
Оптимизация запросов к базе данных
Рефакторинг тяжёлых JavaScript-модулей
Миграция на HTTP/2 или HTTP/3

Ключевые тезисы для интервью

Core Web Vitals — три ключевые метрики: LCP (загрузка, < 2.5 с), INP (интерактивность, < 200 мс), CLS (стабильность макета, < 0.1). TTFB — фундамент цепочки: высокий TTFB сдвигает вправо FCP и LCP.
INP заменил FID с марта 2024 года: измеряет время от любого взаимодействия до следующего кадра (не только первого), что лучше отражает реальную отзывчивость.
CLS — суммарный сдвиг макета за время жизни страницы. Главные причины: изображения без размеров, динамически вставляемый контент выше существующего, шрифты без font-display: optional.
TBT (Total Blocking Time) — сумма задач JS дольше 50 мс между FCP и TTI. Улучшается code splitting, tree shaking и делением длинных задач на chunks < 50 мс.
INP оптимизируется теми же приёмами: деление длинных задач, debounce/throttle, вынос вычислений в Web Workers. TBT и INP связаны — снижение TBT автоматически улучшает INP.
Для измерения в продакшене используют CrUX (реальные пользователи), PageSpeed Insights (лабораторные данные) и библиотеку web-vitals для кастомного сбора метрик.

Заключение

Core Web Vitals — практический стандарт измерения пользовательского опыта. Оптимизация начинается с TTFB как фундамента всей цепочки: быстрый сервер ускоряет FCP и LCP. Для LCP критичны изображения (WebP, preload, правильные размеры) и CDN. INP улучшается делением длинных JavaScript-задач. CLS — резервированием места для динамического контента. Начинайте с быстрых побед из чеклиста, затем переходите к архитектурным изменениям вроде SSR/SSG и оптимизации запросов к базе данных.