intermediate
Core Web Vitals
Измеряйте пользовательскую загрузку, интерактивность и визуальную стабильность через LCP, INP, CLS, field data и lab-диагностику.
Core Web Vitals — пользовательские метрики Google для page experience. На интервью фокус на **LCP** (загрузка), **INP** (отзывчивость взаимодействий; заменяет FID) и **CLS** (визуальная стабильность). Field data (CrUX, RUM) важнее lab-only Lighthouse.
| Метрика | Что измеряет | Типичные причины плохих значений | |---------|--------------|----------------------------------| | LCP | Largest contentful paint | Медленный server/TTFB, тяжёлое hero-изображение, render-blocking JS/CSS | | INP | Худшая latency взаимодействия | Long tasks на main thread, тяжёлая hydration, sync-работа в handlers | | CLS | Неожиданный layout shift | Картинки/шрифты без размеров, внезапные баннеры, поздние web fonts |
<img src="/hero.webp" width="1200" height="630" fetchpriority="high" alt="…" />
Приоритет LCP-элемента: preload критичного image/font, меньше blocking scripts, лучше CDN и cache HTML. Для INP — дробите long tasks, откладывайте некритичный JS, избегайте sync layout thrashing в обработчиках.
На интервью: LCP vs FCP; INP vs FID; field vs lab; как регрессия deploy видна в перцентилях CrUX.
Типовые ошибки: CLS в lab при поздней рекламе в production; замеры только desktop; погоня за 100 Lighthouse при провале p75 INP на Android.
Компромисс — богатая интерактивность против бюджета main thread на слабых устройствах.
Чеклист:
- p75 field vitals на money routes.
- Резерв места под media и шрифты.
- Меньше blocking JS на critical path.
- Проверка на реальных устройствах и сетях.