Core Web Vitals простыми словами: LCP, CLS, INP
Core Web Vitals — это набор метрик Google, которые измеряют реальный опыт пользователя: насколько быстро страница загружается, насколько стабильна вёрстка и как быстро она реагирует на действия. Они влияют на ранжирование, поэтому важны и для SEO, и для конверсии.
Метрик три: LCP, CLS и INP.
LCP — скорость загрузки контента
Largest Contentful Paint фиксирует момент, когда отрисовался самый крупный видимый элемент (обычно hero-картинка или заголовок). Это ответ на вопрос «когда страница выглядит загруженной».
| Оценка | Значение |
|---|---|
| Хорошо | до 2.5 с |
| Нужно улучшение | 2.5–4.0 с |
| Плохо | более 4.0 с |
Как улучшить: оптимизировать и предзагружать hero-изображение, ускорить сервер (TTFB), убрать рендер-блокирующий CSS/JS, отдавать контент через SSR.
CLS — стабильность вёрстки
Cumulative Layout Shift суммирует, насколько элементы «прыгают» во время загрузки. Когда текст уезжает вниз из-за поздно подгрузившейся картинки или шрифта — это CLS.
| Оценка | Значение |
|---|---|
| Хорошо | до 0.1 |
| Нужно улучшение | 0.1–0.25 |
| Плохо | более 0.25 |
Как улучшить: задавать размеры медиа, резервировать место под динамические блоки и баннеры, аккуратно работать со шрифтами, не вставлять контент над видимым.
INP — отзывчивость
Interaction to Next Paint измеряет, как быстро страница реагирует на действия пользователя (клик, тап, ввод). Заменил прежнюю метрику FID и оценивает отзывчивость на протяжении всей сессии.
| Оценка | Значение |
|---|---|
| Хорошо | до 200 мс |
| Нужно улучшение | 200–500 мс |
| Плохо | более 500 мс |
Как улучшить: уменьшить и разбить тяжёлый JavaScript, убрать длинные задачи в главном потоке, отложить некритичные вычисления.
Где проверить свои метрики
- PageSpeed Insights — быстрый замер по любому URL с реальными данными.
- Google Search Console — отчёт Core Web Vitals по всему сайту.
- Lighthouse в DevTools — для диагностики, какой именно ресурс тяжёлый.
Важный нюанс: меряйте на проде и на мобильных — именно там метрики обычно проваливаются. Почему сайты тормозят на практике — разобрал в статье Почему сайт медленно загружается.
Хотите, чтобы все три метрики были в зелёной зоне? Я провожу аудит и ускорение сайта с замерами, приоритетами и планом фиксов — фикс-цена, фикс-объём.