Core Web Vitals — три пользовательские метрики: насколько быстро появляется главное содержимое, насколько отзывчиво страница реагирует на действия и насколько стабильно расположены элементы. Они полезны не только для поиска: плохие значения часто совпадают с реальным раздражением посетителей.
Порог хорошего результата
| Метрика | Что измеряет | Хорошо |
|---|---|---|
| LCP | Появление крупнейшего содержательного элемента | ≤ 2,5 с |
| INP | Задержка реакции на взаимодействие | ≤ 200 мс |
| CLS | Суммарная нестабильность раскладки | ≤ 0,1 |
Оценка обычно смотрит на 75-й процентиль реальных посещений отдельно для мобильных и десктопных устройств. Один быстрый тест на рабочем ноутбуке не доказывает, что страница быстра для аудитории.
Полевые и лабораторные данные
Полевые данные собираются у реальных пользователей и отражают устройства, сеть, географию и поведение. Лабораторный тест воспроизводит контролируемые условия и помогает найти причину. Для принятия решения нужны оба: поле показывает проблему, лаборатория помогает её разобрать.
LCP: главное появилось слишком поздно
Частые причины:
- hero-изображение обнаруживается только после выполнения JavaScript;
- главный ресурс отмечен lazy loading;
- сервер долго формирует первый HTML;
- CSS или шрифт блокируют отображение;
- загружается изображение заметно больше реального размера;
- клиентское приложение сначала показывает пустой контейнер.
Начните с определения LCP-элемента. Если это изображение, задайте width и height, уберите lazy loading, используйте подходящий формат и при необходимости fetchpriority="high". Если это текст, проверьте серверный ответ, критический CSS и шрифты.
INP: интерфейс долго отвечает
INP ухудшается, когда основной поток занят длинными задачами. Пользователь нажал кнопку, но обработчик ждёт выполнения большого JavaScript-блока.
- разделите длинную работу на короткие задачи;
- не инициализируйте все виджеты до того, как они понадобятся;
- уменьшите объём клиентского JavaScript;
- виртуализируйте очень длинные списки;
- перенесите тяжёлые вычисления в Web Worker, если это оправдано;
- покажите визуальный ответ сразу, даже если операция продолжается.
Оптимизация INP — это управление временем основного потока, а не только уменьшение размера файла.
CLS: элементы прыгают
Основные источники — изображения без размеров, поздние баннеры, реклама, заменяющий шрифт и динамический контент над уже видимой областью. Резервируйте место через размеры или aspect-ratio, не вставляйте новые блоки над текущим содержанием и подбирайте метрики fallback-шрифта.
Особый случай: 3D и WebGL
Иммерсивная сцена может быть частью бренда, но она должна быть прогрессивным улучшением. Основной текст остаётся в HTML, предусмотрен статичный режим, учитывается prefers-reduced-motion, ограничивается pixel ratio, а анимация не должна удерживать ресурсы на скрытой вкладке.
Порядок исправлений
- Выберите страницу с трафиком и плохой полевой метрикой.
- Проверьте шаблон: проблема на одном URL или на всём типе страниц.
- Найдите конкретный элемент или длинную задачу в лабораторном профиле.
- Исправьте одну крупную причину и сравните до/после.
- Проверьте, что улучшение не сломало конверсию и доступность.
- Дождитесь обновления полевых данных; обычно это не происходит мгновенно.
Что исправлять первым
Сначала берите проблему с большим охватом и понятной причиной: общий тяжёлый hero, блокирующий скрипт, изображения без размеров. Затем переходите к редким сценариям. Цель — не идеальная цифра в одном тесте, а устойчиво хороший опыт для большинства пользователей.
Для регулярного контроля можно подключить техническую поддержку сайта, а полный SEO-контекст собран в статье о поисковой оптимизации в 2026 году.