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

Question

Accepted Answer

Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS — сдвиги вёрстки при загрузке (≤ 0,1). LCP улучшают быстрым ответом сервера, приоритетом главной картинки и меньшим блокирующим JS/CSS; INP — дроблением долгих задач и лёгкими обработчиками; CLS — явными размерами картинок и зарезервированным местом под динамический контент. Оценивается 75-й перцентиль пользователей, а не среднее Lighthouse — лабораторный замер; правду показывают данные реальных пользователей (CrUX, web-vitals) Метрики влияют на ранжирование в поиске Google INP заменил FID в 2024 году: учитывается задержка всех взаимодействий, а не только первого LCP (Largest Contentful Paint): - ответ сервера: кэш, CDN, SSR или статическая генерация; - главная картинка: fetchpriority="high", без loading="lazy", современный формат, правильный размер; - меньше блокирующего CSS и JS на критическом пути, предзагрузка шрифтов. INP (Interaction to Next Paint): - долгие задачи (> 50 мс) дробить, отдавать управление браузеру; - тяжёлые вычисления — в Web Worker; - не перерисовывать большие деревья на каждый ввод (React: useTransition, мемоизация, виртуализация); - меньше стороннего JS. CLS (Cumulative Layout Shift): - width/height или aspect-ratio у картинок и видео; - место под рекламу, баннеры, подгружаемые блоки; - font-display и подбор запасного шрифта по метрикам.

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

Подробно

Что хотят услышать

Связанные вопросы

Подсказки на собеседовании — в реальном времени