Core Web Vitals
Тема дорожной карты · Frontend разработчик
Core Web Vitals — это стандартизированный набор метрик реальных пользователей от Google, напрямую влияющих на позиции в поисковой выдаче и измеряющих качество пользовательского опыта на веб-странице. Три основных Core Web Vitals: Largest Contentful Paint (LCP) — измеряет производительность загрузки и должен оставаться ниже 2,5 секунды; Interaction to Next Paint (INP), заменивший First Input Delay; и Cumulative Layout Shift (CLS), количественно оценивающий неожиданную визуальную нестабильность и должный оставаться ниже 0,1. Frontend-разработчики измеряют Core Web Vitals с помощью Lighthouse в Chrome DevTools, npm-пакета web-vitals (import { getLCP, getINP, getCLS } from 'web-vitals') и полевых данных из Google Search Console. Оптимизация Core Web Vitals во фреймворках Next.js, Astro и Nuxt включает техники SSR/SSG для ускорения LCP, ленивую загрузку изображений с loading="lazy", разделение кода и резервирование пространства для динамического контента во избежание смещений макета.
Как это работает
Core Web Vitals меряется Core Web Vitals: LCP (Largest Contentful Paint, цель < 2.5s), INP (Interaction to Next Paint, цель < 200ms), CLS (Cumulative Layout Shift, цель < 0.1). Инструменты: Chrome DevTools Performance + Lighthouse, WebPageTest, real-user monitoring (Sentry, web-vitals lib). Победы: минимизация JS-бандла (code split, tree shake), современные форматы (AVIF/WebP для картинок, woff2 для шрифтов), lazy-load below-the-fold, preconnect к API, CDN.
Когда применять
Оптимизируйте по реальным данным юзеров (RUM), не только lab-тестам на гигабитном wifi. Performance-бюджеты в CI (bundle-size-action); вальте PR при превышении. Performance — это фича: каждый квартал спринт на неё. Lighthouse < 80 на mobile = оставляете платящих юзеров за бортом.
Типичные ошибки
Ловушки Core Web Vitals: оптимизация на "100 Lighthouse" без реальных юзеров (другие боттлнеки); preload всего ("preconnect/prefetch-шум" жрёт bandwidth); JS-тяжёлые "loading"-state маскируют реальный баг (большой бандл); анимация layout-затрагивающих свойств (используйте transform + opacity для дешёвого GPU compositing). Профилируйте на реальных mid-range mobile, не на M-series Mac.