Core Web Vitals — три метрики, по которым поисковые системы оценивают, удобно ли посетителю пользоваться страницей. Речь не о скорости вообще, а о конкретных характеристиках: когда виден основной контент, как быстро отзывается интерфейс и не прыгают ли элементы. Разберём каждую метрику по причинам и способам исправления.
Что измеряют три метрики
Краткая суть, без технических деталей.
| Метрика | Что показывает | Норма | Что означает на практике |
|---|---|---|---|
| LCP | Когда показан главный элемент | до 2,5 с | Понял ли человек, что на странице |
| INP | Отзывчивость на действия | до 200 мс | Реагирует ли сайт на нажатия |
| CLS | Стабильность вёрстки | до 0,1 | Не прыгает ли страница при загрузке |
Важное уточнение: метрики измеряются на реальных устройствах посетителей, а не на компьютере разработчика. Быстрый сайт в офисе может показывать плохие значения на смартфоне со слабой связью — именно эти данные учитываются.
LCP: когда видно главное
Метрика отвечает на вопрос, как быстро человек видит основной контент. Это может быть заголовок, крупное изображение, блок с информацией.
Основные причины плохого значения:
- Медленный ответ сервера. Пока сервер думает, браузер ничего не показывает.
- Тяжёлое изображение в первом экране. Самая частая причина в магазинах и на услугах.
- Шрифты, блокирующие отрисовку. Текст не появляется, пока не загрузится шрифт.
- Блокирующие скрипты. Код выполняется до показа контента.
- Отсутствие кэша. Сервер собирает страницу заново для каждого посетителя.
Что делать по порядку:
- Проверить время ответа сервера. Если больше 500 мс — вопрос к хостингу и кэшу.
- Оптимизировать главное изображение. Современный формат, правильный размер, отдельная
загрузка для мобильных.
- Убрать блокирующие скрипты. Отложенная загрузка для всего, что не нужно сразу.
- Отдать шрифты локально. И настроить подмену, чтобы текст показывался сразу.
Практический приём: определите, какой элемент считается главным. В отчёте это указано явно. Часто выясняется, что это не заголовок, а большое изображение в шапке — и именно его нужно оптимизировать в первую очередь.
INP: как быстро реагирует интерфейс
Метрика заменяет прежнюю оценку скорости реакции. Отвечает на вопрос: если человек нажал кнопку, как быстро он увидит результат.
Причины плохого значения:
- Тяжёлые скрипты, выполняющиеся при взаимодействии.
- Сторонние виджеты: чаты, карты, системы аналитики.
- Сложная логика на стороне браузера.
- Множество обработчиков событий на странице.
Что делать:
- Проверить сторонние скрипты. Отключить по одному и замерить: часто один виджет
даёт больше нагрузки, чем весь остальной сайт.
- Загружать виджеты отложенно. Чат может подгрузиться после отрисовки страницы.
- Убрать лишние счётчики. Три системы аналитики вместо одной — нагрузка без пользы.
- Оптимизировать собственный код. Разбить тяжёлые операции, убрать лишние вычисления.
CLS: стабильность страницы
Метрика показывает, насколько элементы сдвигаются при загрузке. Это раздражает посетителей сильнее медленной загрузки: человек уже наводит палец на кнопку, а она перемещается, и клик попадает в другое место.
Причины:
- Изображения без указанных размеров.
- Баннеры и всплывающие окна, вставляемые в поток.
- Шрифты, загружающиеся без резервирования места.
- Динамические блоки: рекомендации, отзывы, реклама.
Что делать:
- Указывать размеры изображений. Браузер должен знать, сколько места резервировать.
- Резервировать место под баннеры. Особенно под окно с согласием на обработку данных.
- Вставлять динамические блоки после отрисовки. А не в процессе загрузки.
- Использовать подмену шрифтов с фиксированной высотой строки.
Порядок работ
Правильная последовательность важнее отдельных приёмов.
1. Замерить текущие значения. Отдельно на мобильных и на компьютере. Без данных вы не узнаете, что помогло.
2. Начать с сервера. Кэширование, сжатие ответов. Это даёт быстрый и заметный эффект.
3. Затем изображения. Основной вклад в LCP почти всегда здесь.
4. Потом шрифты и скрипты. Они влияют на LCP и INP одновременно.
5. В конце вёрстка. Резервирование места под элементы, устранение прыжков.
6. Проконтролировать результат. Замеры через неделю и через месяц.
| Этап | Что делаем | Что улучшается |
|---|---|---|
| Сервер | Кэш, сжатие | LCP, TTFB |
| Изображения | Формат, размеры, ленивая загрузка | LCP, CLS |
| Шрифты | Локальное подключение, подмена | LCP, CLS |
| Скрипты | Отложенная загрузка, ревизия виджетов | INP, LCP |
| Вёрстка | Резервирование места | CLS |
Что даёт оптимизация
Помимо позиций, эффект заметен и в конверсии. Быстрая страница даёт больше заявок при том же трафике: посетители реже уходят до загрузки и реже ошибаются при нажатиях.
Ориентир: переход из «красной» зоны метрик в «зелёную» обычно даёт заметный рост конверсии. Причём это относится и к платному трафику, где каждый визит оплачен.
Если проблема в ответе сервера, а не в вёрстке, сначала стоит разобраться с площадкой — как измерять, описано в материале скорость хостинга: как проверить TTFB.
Частые ошибки
- Замеры только на компьютере. Реальные посетители используют телефоны.
- Оптимизация всего сразу. Непонятно, что дало результат.
- Ленивая загрузка на первый экран. Главное изображение начинает ждать прокрутки.
- Погоня за идеальными цифрами. После «зелёной» зоны отдача снижается.
- Игнорирование сторонних виджетов. Часто именно они съедают отзывчивость.
- Отсутствие замеров после работ. Нет подтверждения результата.
- Оптимизация без учёта контента. Быстрая страница без ответа на запрос бесполезна.
Что важно запомнить
- Core Web Vitals измеряются на реальных устройствах, а не у разработчика.
- LCP — когда виден главный элемент; обычно тормозят изображения и сервер.
- INP — скорость реакции; главный виновник — сторонние скрипты.
- CLS — прыжки элементов; лечится резервированием места.
- Порядок работ: сервер, изображения, шрифты, скрипты, вёрстка.
- Замеры нужно делать до и после, отдельно для мобильных.
- Оптимизация даёт и рост позиций, и рост конверсии.
Если нужно привести метрики в порядок, но нет времени разбираться с деталями, разумнее заказать продвижение и оптимизацию сайтов — работа со скоростью входит в базовый набор услуг.
