Core Web Vitals без мифов: что действительно ускоряет сайт

Core Web Vitals — набор метрик, по которым оценивают скорость и стабильность страницы с точки зрения пользователя. Их три, и у каждой есть понятные причины ухудшения.

LCP — когда появился главный контент

Largest Contentful Paint измеряет время, за которое отрисовывается самый крупный элемент первого экрана: обычно главная картинка или заголовок. Хорошим считается результат до 2,5 секунды. Что помогает:

• сжать главную картинку и подобрать её размер под экран, использовать современные форматы (WebP, AVIF);
• не откладывать загрузку главной картинки (loading="lazy" для неё вреден), а при необходимости подсказать браузеру через fetchpriority="high";
• убрать из критического пути лишние стили и блокирующие скрипты;
• отдавать статические файлы со сжатием и долгим кэшированием.

INP — как быстро страница реагирует

Interaction to Next Paint показывает задержку между действием пользователя (клик, нажатие) и следующей отрисовкой. Цель — до 200 миллисекунд. Основные причины плохого результата — тяжёлые обработчики событий и длинные задачи в основном потоке. Разбивайте долгую работу на части, откладывайте второстепенное и избегайте больших синхронных вычислений в обработчиках.

CLS — прыгает ли вёрстка

Cumulative Layout Shift измеряет неожиданные сдвиги элементов при загрузке. Хорошим считается значение до 0,1. Типичные причины и решения:

• у изображений и видео не указаны размеры — задайте width и height или aspect-ratio;
• шрифты подменяются после загрузки — используйте font-display: swap и близкий по метрикам запасной шрифт;
• баннеры и вставки появляются сверху уже отрисованного контента — резервируйте под них место.

Как измерять

Лабораторные инструменты (Lighthouse, панель Performance в браузере) подходят для поиска причин. Реальную картину дают полевые данные: отчёт Chrome UX Report и библиотека web-vitals, которая собирает метрики у настоящих посетителей.

С чего начать

Откройте страницу на медленном соединении и замерьте три метрики. Исправьте самую плохую, замерьте снова. Скорость сайта почти всегда упирается в один-два крупных фактора, а не в десятки мелочей.