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.
  • Проверка на реальных устройствах и сетях.