Что такое Core Web Vitals

В 2020 году компания Google предложила набор метрик, которые переводят ощущение «сайт быстрый и удобный» в конкретные цифры, и назвала их Web Vitals. Самые важные из них получили статус Core Web Vitals, или основные метрики. С 2021 года улучшение этих показателей уже не просто рекомендация: Core Web Vitals стали одним из сигналов ранжирования в поиске Google. Если две страницы одинаково подходят под запрос, хорошие Core Web Vitals могут стать тем самым дополнительным преимуществом, которое склонит выдачу в пользу одной из них.

Когда вы открываете любой сайт, между кликом по ссылке и моментом, когда страницей можно пользоваться, происходит довольно много событий: браузер получает данные, загружает изображения, стили и скрипты, а затем постепенно отрисовывает страницу. На каждом из этих этапов могут возникать задержки: главный контент появляется слишком поздно, элементы прыгают, а кнопки не сразу реагируют на нажатие. Всё это напрямую влияет на восприятие скорости сайта пользователем. Долгое время разработчики в основном ориентировались на технические показатели вроде времени загрузки страницы или события load, но они слабо отражали то, что на самом деле ощущает пользователь.

Далее разберём, зачем Google ввёл эти метрики, какие они бывают и по каким порогам их оценивают. А как разбираться с причинами плохих значений и что улучшать — в отдельных статьях про LCP, INP, CLS, FCP и TTFB.

У производительности сайтов есть две стороны, и обе важны:

• пользовательский опыт — медленный и нестабильный сайт заставляет людей уходить, не дойдя до просмотра, заявки или заказа. Core Web Vitals выражают в понятных показателях три главных раздражителя: долгую загрузку, медленную реакцию на действия и прыжки элементов;
• SEO — Core Web Vitals остаются одним из сигналов ранжирования. Google оценивает метрики не по замерам на тестовом стенде (когда страницу прогоняют в контролируемых условиях), а по данным реальных пользователей Chrome с включённой отправкой статистики из отчёта Chrome UX Report (CrUX).

Все Core Web Vitals оцениваются по 75-му перцентилю. Это означает, что метрика считается хорошей, только если значение 75-го перцентиля ниже порога.

Как понять 75-й перцентиль? Представьте, что есть результаты 100 посещений сайта. Если отсортировать их от самых быстрых к самым медленным, то значение на 75-й позиции и будет 75-м перцентилем. Иными словами, установленному порогу должны соответствовать не менее 75% посещений.

Изначально в 2020 году в тройку основных метрик входил FID (First Input Delay) вместо INP. У FID было два ограничения: он учитывал только самое первое взаимодействие пользователя со страницей и измерял лишь задержку до начала обработки события, не считая время выполнения обработчика и последующей отрисовки. В мае 2023 года Google объявила о замене FID на INP, а 12 марта 2024 года изменение вступило в силу. INP снимает оба ограничения: измеряет полное время отклика — от действия до отрисовки — и учитывает все взаимодействия (клики, тапы, нажатия) за всё время жизни страницы, а не только первое.

Core Web Vitals — это три основные метрики: LCP (Largest Contentful Paint, загрузка основного контента), INP (Interaction to Next Paint, отзывчивость) и CLS (Cumulative Layout Shift, визуальная стабильность). Есть ещё две метрики, FCP (First Contentful Paint, первая отрисовка) и TTFB (Time to First Byte, время до первого байта) — они не входят в Core Web Vitals, но считаются «диагностическими»: помогают понять причины плохих значений LCP, INP и CLS.

Если коротко, три основные метрики отвечают на три простых вопроса:

• LCP — «когда я увидел основной контент страницы?»
• INP — «я нажал, страница быстро отреагировала или заставила долго ждать?»
• CLS — «почему элементы неожиданно сдвигаются при загрузке и я могу случайно нажать на другой элемент?»

А диагностические метрики отвечают на такие вопросы:

• FCP — «когда на экране вообще появилось хоть что-нибудь?»
• TTFB — «как быстро сервер начал отвечать на запрос браузера?»

Для каждой метрики есть три зоны: «хорошо» (зелёная), «нужно улучшить» (жёлтая) и «плохо» (красная). К этим значениям мы ещё не раз будем обращаться в других статьях раздела.

CLS — безразмерная величина, которая обычно принимает значения от 0 до 1, но может быть и больше: например, в бесконечной ленте, которая постоянно вставляет контент сверху. Остальные метрики измеряются в секундах или миллисекундах.

Пороговые значения одинаковы для мобильных и десктопных устройств, но статистика собирается отдельно. Из-за менее стабильных сетей и более слабых процессоров показатели одного и того же сайта на мобильных устройствах часто оказываются хуже, чем на десктопах. Поэтому всегда смотрите обе выборки в CrUX или PageSpeed Insights: и мобильную, и десктопную.

Здесь мы собрали всё, на что опирались в статьях этого раздела о Web Vitals.

• Web Vitals
• Optimize LCP
• Optimize INP
• Optimize CLS
• Optimize TTFB
• Optimize long tasks
• Optimize input delay
• Avoid large, complex layouts and layout thrashing
• How large DOM sizes affect interactivity
• Client-side rendering of HTML and interactivity
• Preload responsive images
• Back/forward cache
• Lab and field data differences
• Best practices for fonts
• Optimize webfont loading
• High-performance animations
• Best practices for carousels
• Reduce webfont size
• Defer non-critical CSS
• Content delivery networks (CDNs)
• Image CDNs
• Fetch Priority
• Browser-level image lazy loading
• The preload scanner
• Rendering on the Web
• CSS for Web Vitals
• Core Web Vitals workflows with Google tools
• Best practices for measuring Web Vitals in the field
• Debug performance in the field
• Debug layout shifts
• Find slow interactions in the field
• Diagnose slow interactions in the lab
• Lighthouse user flows
• Why is CrUX data different from my RUM data?
• Defining the Core Web Vitals metrics thresholds
• The most effective ways to improve Core Web Vitals
• Best practices for cookie notices
• Best practices for using third-party embeds
• Best practices for tags and tag managers
• Use web workers to run JavaScript off the browser's main thread
• content-visibility: the new CSS property that boosts your rendering performance
• Reduce the scope and complexity of style calculations
• Script evaluation and long tasks

• Use scheduler.yield()
• Test back/forward cache
• Enabling bfcache for Cache-Control: no-store
• INP in frameworks

• Fix your website's LCP by optimizing image loading
• Scheduler.yield()

• Understanding Core Web Vitals and search results
• Core Web Vitals report (Search Console)
• About PageSpeed Insights

• Use fetchpriority=high to load your LCP hero image sooner, Addy Osmani
• Web Almanac 2025 — Performance, HTTP Archive

• Библиотека web-vitals, GoogleChrome
• Image Optimization, Next.js
• Font Optimization, Next.js
• useReportWebVitals, Next.js
• React 19.2 Further Advances INP Optimization, Web Performance Calendar
• Progressive Hydration, patterns.dev

• 8 Ways to Optimize Your JavaScript Bundle Size, Codecov
• webpack-bundle-analyzer, GitHub
• Why you should avoid Barrel Files in JavaScript Modules
• Guides: Package Bundling, Next.js
• How we optimized package imports in Next.js, Vercel

• 9 Core Web Vitals monitoring tools, DebugBear
• CrUX vs RUM, DebugBear
• Fixing layout shifts caused by web fonts, DebugBear
• scheduler.yield: a beginner's guide, DebugBear
• Partytown + web workers, DebugBear
• Yield to the main thread to improve INP, corewebvitals.io
• Fix slow hero images, corewebvitals.io

• Core Web Vitals Optimization: INP, LCP, CLS Guide 2025, digitalapplied
• Case Study: Optimizing Core Web Vitals in a Next.js Content Blog, wellally.tech
• How to Optimize Core Web Vitals in Next.js App Router for 2025, Makers' Den
• Third-Party Scripts Are Killing Your Core Web Vitals, PageSpeedFix
• Image Optimization for Website Speed: The 2026 Playbook, Logos Web Designs
• How to Fix Cumulative Layout Shift (CLS) in 2025, Natclark