Core Web Vitals и производительность

Скорость и стабильность — измеримый фактор ранжирования. Разбираем три ключевые метрики и как их улучшать.

Core Web Vitals (CWV) — набор метрик Google, измеряющих реальный пользовательский опыт: скорость загрузки, стабильность вёрстки и отзывчивость. Они — официальный сигнал ранжирования.

Три метрики

Метрика	Что измеряет	Хорошо
LCP (Largest Contentful Paint)	когда отрисовался крупнейший элемент экрана	≤ 2.5 с
CLS (Cumulative Layout Shift)	насколько «прыгает» вёрстка при загрузке	≤ 0.1
INP (Interaction to Next Paint)	задержку отклика на действия пользователя	≤ 200 мс

LCP — скорость показа главного

LCP фиксирует, когда пользователь увидел основной контент (обычно крупную картинку или заголовок). Что портит LCP: тяжёлые неоптимизированные картинки, медленный сервер, блокирующий рендер CSS/JS. Что чинит: оптимизация картинок (WebP, нужный размер), CDN, приоритетная загрузка ключевого ресурса.

CLS — стабильность вёрстки

CLS наказывает за «скачки»: контент сдвигается, когда дозагружается картинка без размеров, шрифт или баннер. Бесит, когда вы целитесь в кнопку, а она «уезжает». Чинится тем, что мы уже проходили: width/height у картинок, резервирование места под динамические блоки.

INP — отзывчивость

INP измеряет, как быстро страница реагирует на клики и ввод. Высокий INP — признак тяжёлого JS, который блокирует главный поток. Чинится разбиением тяжёлых задач, ленивой загрузкой неважного JS, отказом от лишних библиотек.

Как работает под капотом: оценка по порогам

CWV оценивает каждую метрику по порогам «хорошо / нужно улучшить / плохо». Реализуем эту классификацию:

def rate(metric, value):
    thresholds = {
        "LCP": (2.5, 4.0),   # секунды
        "CLS": (0.1, 0.25),  # безразмерная
        "INP": (200, 500),   # миллисекунды
    }
    good, poor = thresholds[metric]
    if value <= good:
        return "хорошо"
    if value <= poor:
        return "нужно улучшить"
    return "плохо"

print("LCP 2.1с:", rate("LCP", 2.1))
print("LCP 3.5с:", rate("LCP", 3.5))
print("CLS 0.3: ", rate("CLS", 0.3))
print("INP 150мс:", rate("INP", 150))

Вывод:

LCP 2.1с: хорошо
LCP 3.5с: нужно улучшить
CLS 0.3:  плохо
INP 150мс: хорошо

Чем измерять

Lighthouse (в DevTools, вкладка Lighthouse, или CLI) — лабораторный замер на вашей машине; удобно для отладки.
PageSpeed Insights — Lighthouse + полевые данные реальных пользователей (CrUX).
Search Console → отчёт Core Web Vitals — агрегированные полевые данные по всему сайту.

Важно различать лабораторные (синтетический прогон) и полевые (реальные пользователи) данные — для ранжирования Google использует именно полевые.

Частые ошибки

Оптимизация только под лабораторный Lighthouse — зелёный балл в DevTools, но полевые данные плохие.
Картинки без размеров — главный источник плохого CLS.
Тонны клиентского JS — бьёт по INP и LCP.
Игнор мобильных — на слабых телефонах метрики хуже, а индексация mobile-first.

Итог

Core Web Vitals (LCP, CLS, INP) — официальный сигнал ранжирования, измеряющий реальный опыт.
Целимся: LCP ≤ 2.5 с, CLS ≤ 0.1, INP ≤ 200 мс; чиним картинками, резервированием места, лёгким JS.
Меряйте Lighthouse/PageSpeed, но ориентируйтесь на полевые данные — их использует Google.