Что такое Core Web Vitals и как улучшить эти метрики?

Core Web Vitals — набор метрик Google, который оценивает реальный пользовательский опыт: скорость загрузки, отзывчивость и визуальную стабильность. Они влияют на ранжирование в поиске.

Три метрики

• LCP (Largest Contentful Paint) — время появления самого крупного элемента (изображение, заголовок). Хорошо: до 2,5 с.
• INP (Interaction to Next Paint) — задержка отклика на действия пользователя (клик, ввод). Хорошо: до 200 мс. Заменила FID.
• CLS (Cumulative Layout Shift) — суммарный сдвиг макета при загрузке. Хорошо: до 0,1.

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

• Оптимизировать главное изображение: современный формат (WebP/AVIF), правильный размер, fetchpriority="high", предзагрузка <link rel="preload">.
• Быстрый ответ сервера, CDN, кеширование.
• Не блокировать рендеринг CSS и JS.

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

• Не занимать основной поток длинными задачами: разбивать работу, переносить вычисления в Web Worker.
• Уменьшать JavaScript, откладывать сторонние скрипты.
• Не вызывать лишних перерисовок на каждое событие (debounce, throttle).

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

• Задавать width/height или aspect-ratio у изображений, видео и рекламы.
• Резервировать место под динамический контент.
• Не вставлять элементы над уже отображённым контентом.
• Загружать шрифты с font-display: swap и подходящим fallback.

Где измерять

Lighthouse и DevTools (лабораторные данные), PageSpeed Insights и библиотека web-vitals (реальные пользователи), Search Console.

Коротко для собеседования

Core Web Vitals — LCP (загрузка), INP (отзывчивость), CLS (стабильность макета). Улучшают оптимизацией главного ресурса, облегчением основного потока и резервированием места под контент.