Скорость сайта и Core Web Vitals: простые шаги для «зелёных» метрик

Core Web Vitals — это про реальный опыт пользователя: как быстро загрузился главный контент (LCP), не «прыгнула» ли вёрстка (CLS) и насколько отзывчив интерфейс (INP). Ниже — практичные шаги, чтобы вывести метрики в зелёную зону без тотальной переделки.

Целевые пороги (мобайл в приоритете)

• LCP ≤ 2.5 секунды — крупный видимый элемент появляется быстро.
• CLS ≤ 0.1 — минимальные сдвиги макета.
• INP ≤ 200 мс — интерфейс реагирует без «задумчивости».

Сначала измеряем

• PageSpeed Insights: снимок lab+field (обязательно смотрим «Полевые данные»).
• Chrome UX Report / Web Vitals extension: чтобы видеть LCP/CLS/INP в реальном времени.
• GA4/свой сбор: отправляйте web-vitals в аналитику, чтобы видеть метрики по страницам и устройствам.

LCP: что ускоряет «главный кусок» страницы

• Герой-изображение: сервить AVIF/WebP, правильные размеры, без ленивой загрузки на первом экране.
• В Next.js: `<Image priority fetchPriority="high" sizes="...">` и реальный `sizes` под ваши брейкпоинты.
• Критический текст/стили: вынесите критический CSS, шрифты — `font-display: swap`, предзагрузка основного начертания.
• Сервер и TTFB: SSG/ISR для стабильного контента, кеш CDN, ближние POP. Минимизируйте блокирующие middlewares.
• Скрипты: всё, что не нужно до первого рендера, грузим `defer/async` или после `DOMContentLoaded`.

CLS: как убрать «прыжки» интерфейса

• Резервируйте место: для изображений — фиксируйте размеры/соотношение (`width/height` или `aspect-ratio`).
• Карточки/баннеры: не вставляйте блоки сверху после загрузки — добавляйте под или резервируйте placeholder.
• Шрифты: используйте `next/font` или `font-display: swap`; предзагружайте woff2, избегайте «перепрыгивания» из-за смены гарнитуры.
• Анимации — только `transform/opacity`, не меняйте `top/left/height` в рантайме.
• Виджеты/реклама: фиксируйте контейнеры по высоте, показывайте skeleton вместо внезапной подстановки.

INP: отзывчивость и длинные задачи

• Рубим длинные таски: код-сплиттинг, динамический импорт, откладываем тяжёлые вычисления в `requestIdleCallback`/Web Worker.
• Меньше JS: уберите неиспользуемые библиотеки, объединяйте мелкие обработчики, ставьте `passive` для скролл-листенеров.
• Формы: мгновенная визуальная обратная связь, валидация по мере ввода, без блокировки основного потока.
• Третьи скрипты: грузим после первого взаимодействия или с низким приоритетом; периодически делаем ревизию «что реально нужно».
• React-практики: мемоизация, избегать лишних перерисовок, не тащить большие контексты в глубокие деревья.

Медиа и шрифты: быстрые выигрыши

• Изображения: генерация нескольких размеров, правильный `sizes`, жесткий контроль `max-width`/`height` в CSS.
• Постепенная загрузка: `loading="lazy"` вне первого экрана; для видео — постер и `preload=metadata`.
• Шрифты: 1–2 начертания, локальные subset’ы, предзагрузка критических, `display: swap`.

Статика, кеш и архитектура

• Кеш: `Cache-Control: public, max-age=31536000, immutable` для статики с хешами.
• HTML: короткий TTL + `stale-while-revalidate` (ISR) — быстрые ответы и свежесть.
• CDN: изображения, шрифты и медиа с ближайшей точки; preconnect к доменам статики.
• SSR только когда нужно: всё остальное — SSG/ISR, чтобы снизить TTFB и колебания LCP.

Порядок работ (без боли для команды)

1. Сняли метрики: выбрали 5–10 самых трафиковых страниц.
2. Исправили LCP (герой, шрифт, критический CSS) → проверили поле.
3. Убрали CLS (размеры, шрифты, баннеры) → проверили поле.
4. Оптимизировали INP (разбивка задач, третий код) → проверили поле.
5. Ввели «бюджеты» перформанса в CI: падаем билд, если регресс.

Мини-чек-лист перед релизом

• Герой без ленивой загрузки, `priority` у главного изображения.
• Нет внезапных вставок сверху (баннеры/куки): всё с плейсхолдерами.
• Нет длинных тасков > 200 мс в профайлере на взаимодействиях.
• Заголовки/критический контент приходят с сервера быстро (TTFB стабилен).
• PSI mobile: зелёные LCP/CLS/INP на ключевых страницах.

Итог

Зелёные CWV — это серия маленьких решений: правильные размеры, экономия JS, предсказуемая вёрстка и разумная архитектура. Начните с ключевых страниц, закрепите практики в пайплайне — и метрики останутся зелёными после любых релизов.