awesome-everything EN
↑ Обратно к восхождению

Браузер и фронтенд-рантайм

Core Web Vitals: что измеряют LCP, INP и CLS

Суть Три полевые метрики, которые реальные пользователи Chrome генерируют при каждом посещении — и почему вся остальная работа по производительности в этом пилларе в конечном счёте сводится к этим трём числам.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на junior-высоте — поверхность
◷ 10 min

Страница загружается. Появляется hero-фото. Пользователь тапает кнопку и ждёт. Реклама врывается сверху и текст прыгает — пользователь тапает не на ту ссылку. Всё в этом пилларе — event loop, пайплайн рендера, V8, гидратация — порождает именно такой опыт. Три полевые метрики его измеряют, и по ним Google ранжирует страницы.

Три метрики — по одному вопросу каждая.

Каждая Core Web Vital отвечает на один вопрос, который у реального пользователя возникает в момент захода на страницу:

  • LCP — Largest Contentful Paint — быстро ли появился главный контент? Хорошо: ≤2.5 с.
  • INP — Interaction to Next Paint — отвечает ли страница, когда я тапаю или печатаю? Хорошо: ≤200 мс.
  • CLS — Cumulative Layout Shift — стояло ли всё на месте, или кнопка выпрыгнула из-под пальца? Хорошо: ≤0.1 (безразмерная оценка).

Каждый порог измеряется на 75-м перцентиле реальных пользователей. Это важно: оптимизация только под быстрые устройства прячет медленную четверть аудитории — а именно её отражает оценка.

Метафора магазина.

Зайти в магазин — самый чёткий фрейм для этих трёх метрик. LCP — сколько времени, прежде чем вы видите, что продаёт магазин: если полки ещё заполняют, вы ждёте у двери. INP — отвечает ли продавец сразу, когда вы задаёте вопрос: хороший магазин отвечает немедленно, плохой заставляет повторять. CLS — стоит ли пол на месте: представьте, что тянетесь за товаром, и полка съезжает вбок ровно в этот момент — вы хватаете не то. Хорошая страница — хороший магазин.

Откуда берутся числа — и почему это важно.

Core Web Vitals в том виде, в котором их оценивает Google, берутся с реальных пользователей Chrome в поле, а не из тестового прогона на машине разработчика. Публичный датасет называется CrUX — Chrome User Experience Report. Он агрегирует визиты от пользователей Chrome, давших согласие на отчётность, и именно field p75 из CrUX использует ранжирование в поиске. Отличный Lighthouse-score на ноутбуке и плохие field vitals — вполне совместимые вещи. Именно field-число имеет значение.

На практике это означает: каждый фикс производительности в этом пилларе в конечном счёте живёт или умирает в зависимости от того, двигает ли он field p75 для реальных пользователей. Лабораторные инструменты (Lighthouse, DevTools) — для отладки и перехвата регрессий; CrUX — вердикт.

Хорошие пороги Core Web Vitals (при field p75)
LCP — Largest Contentful Paint
≤2.5 с
INP — Interaction to Next Paint
≤200 мс
CLS — Cumulative Layout Shift
≤0.1
Почему это работает

INP заменила First Input Delay (FID) как Core Web Vital в марте 2024. FID измерял только задержку до старта обработчика первого ввода — она пропускала весь остальной жизненный цикл страницы. INP измеряет полную задержку input-to-paint каждого взаимодействия на протяжении всей сессии и репортит высокий перцентиль из них — это куда ближе к тому, что пользователь реально чувствует, используя страницу, а не просто заходя на неё.

Расставь шаги по порядку

Сопоставьте жалобу пользователя с Core Web Vital — расставьте в порядке LCP, INP, CLS.

  1. 1 LCP — «страница вечность показывала статью»
  2. 2 INP — «я тапнул кнопку, и секунду ничего не происходило»
  3. 3 CLS — «текст прыгнул, я потерял место / тапнул не туда»
Викторина

Пользователь тапает кнопку, и страница видимо не отвечает почти секунду. Какая Core Web Vital это ловит?

Викторина

Откуда берутся числа Core Web Vitals, когда Google использует их для ранжирования в поиске?

Закончи аналогию

В метафоре магазина одна vital про то, стоит ли пол на месте — съезжает ли полка вбок ровно когда вы тянетесь за товаром, заставляя схватить не то. Какая это Core Web Vital?

Посчитай

«Хороший» LCP достигается, когда самый крупный контент рисуется в пределах скольки секунд, на 75-м перцентиле реальных пользователей?

секунды
Вспомните перед уходом
  1. 01
    Что измеряет каждая Core Web Vital — одной фразой на метрику?
  2. 02
    Почему порог на 75-м перцентиле полезнее среднего для этих метрик?
  3. 03
    Что такое CrUX и почему он важнее Lighthouse для SEO?
Итог

Core Web Vitals — это три полевые метрики, отвечающие на то, что замечают реальные пользователи: LCP (появился ли главный контент за 2.5 с), INP (ответила ли страница на тап за 200 мс), CLS (стоял ли лейаут на месте, оценка ≤0.1). Они измеряются на 75-м перцентиле реальных пользователей Chrome через CrUX — не из лабораторного теста — и именно CrUX p75 использует ранжирование в поиске. Каждый приём оптимизации производительности в этом пилларе — сокращение длинных задач для INP, оптимизация доставки изображений для LCP, резервирование места для CLS — в конечном счёте существует, чтобы двигать эти три field-числа. Отлаживайте в лабе; судите по полю.

Связанные уроки
встречается в267
Продолжить восхождение ↑LCP: четыре фазы, одна доминирующая стоимость
хоткеи развернуть
поиск
K
пред. пьеса
k
след. пьеса
j
тиры
t
это меню
?
sources3
expand
  1. 01
  2. 02
  3. 03

Trademarks belong to their respective owners. Editorial reference only.