Core Web Vitals для не-разработчиков: что это и как починить

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

Три метрики простыми словами

LCP — Largest Contentful Paint

Сколько времени проходит до отрисовки самого крупного элемента экрана (обычно главная картинка или заголовок). По сути — «когда стало видно главное».

🟢 Хорошо: до 2,5 с
🟡 Терпимо: 2,5–4 с
🔴 Плохо: больше 4 с

INP — Interaction to Next Paint

Насколько быстро сайт реагирует на действие (клик, тап, ввод). Заменил старую метрику FID в 2024 году.

🟢 Хорошо: до 200 мс
🟡 Терпимо: 200–500 мс
🔴 Плохо: больше 500 мс

CLS — Cumulative Layout Shift

Насколько скачет вёрстка при загрузке. Знакомо: хотите нажать кнопку, а сверху догрузился баннер и всё уехало.

🟢 Хорошо: до 0,1
🟡 Терпимо: 0,1–0,25
🔴 Плохо: больше 0,25

Что обычно тормозит сайт

В порядке частоты на сайтах малого бизнеса:

Тяжёлые картинки. Фото на 4 МБ в шапке — главный убийца LCP. Сжимайте и отдавайте в форматах WebP/AVIF, задавайте размеры.
Изображения без width/height. Браузер не знает, сколько места занять — отсюда скачки CLS. Всегда указывайте размеры или aspect-ratio.
Десятки сторонних скриптов. Виджеты чатов, аналитика, пиксели — каждый добавляет задержку отклика (INP). Оставьте только нужное.
Шрифты, грузящиеся с чужих серверов без font-display: swap — текст «мигает» или ждёт.
Нет кэширования и сжатия на сервере — каждый заход качает всё заново.

С чего начать

Сожмите и переведите в WebP крупные изображения — это даёт самый быстрый прирост.
Проставьте width/height всем картинкам.
Уберите скрипты, без которых сайт работает.
Включите кэш и gzip/zstd на сервере.
Перепроверьте метрики и повторите для следующего «узкого места».

Не гонитесь за идеальными 100 баллами — это редко окупается. Цель — увести все три метрики в зелёную зону на реальных страницах.

Измерьте свои метрики

Официальный инструмент — PageSpeed Insights (он же показывает данные реальных пользователей из Chrome). А чтобы увидеть скорость вместе с остальным техническим SEO — индексацией, мета-тегами, разметкой — запустите наш бесплатный аудит сайта: он измерит время ответа сервера и подскажет, что чинить в первую очередь, простым языком.

Дальше можно углубиться в robots.txt и мета-теги — это следующие по важности вещи после скорости.