Что такое Core Web Vitals: LCP, INP и CLS простыми словами

Коротко: что такое Core Web Vitals

Core Web Vitals — набор из трёх метрик, которыми Google оценивает реальный пользовательский опыт на странице:

• LCP (Largest Contentful Paint) — как быстро появляется главный контент;
• INP (Interaction to Next Paint) — как быстро страница реагирует на действия;
• CLS (Cumulative Layout Shift) — насколько «прыгает» вёрстка во время загрузки.

Метрики измеряются на данных реальных посетителей (полевые данные), а не только в лабораторных тестах. Страница считается хорошей, если пороги выполняются для 75-го перцентиля визитов — то есть для большинства пользователей, а не в среднем.

Пороговые значения

LCP: скорость загрузки главного

LCP фиксирует момент, когда отрисован самый крупный видимый элемент первого экрана: обычно это баннер, фото товара или крупный заголовок.

Что чаще всего ухудшает LCP:

• медленный ответ сервера (высокий TTFB);
• тяжёлые изображения без сжатия и современных форматов;
• блокирующие CSS и JavaScript;
• hero-картинка, которая грузится лениво (loading="lazy") или подтягивается скриптом.

INP: отзывчивость интерфейса

INP показывает задержку между действием пользователя (клик, тап, ввод с клавиатуры) и следующей отрисовкой экрана. В 2024 году INP заменил прежнюю метрику FID, потому что учитывает все взаимодействия за визит, а не только первое.

Типичные причины плохого INP:

• длинные задачи JavaScript, которые занимают основной поток;
• тяжёлые сторонние скрипты: виджеты, чаты, трекеры;
• лишние перерисовки в React и других фреймворках;
• обработчики событий, которые делают слишком много работы сразу.

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

CLS суммирует неожиданные сдвиги элементов. Классический пример: вы собираетесь нажать кнопку, а сверху подгружается баннер, и палец попадает не туда.

Как избежать сдвигов:

• задавайте width и height (или aspect-ratio) для изображений и видео;
• резервируйте место под рекламу, embed-блоки и баннеры cookie;
• подгружайте шрифты так, чтобы замена не меняла размеры текста;
• не вставляйте контент над уже видимым без действия пользователя.

Как Core Web Vitals влияют на ранжирование

Core Web Vitals входят в сигналы page experience Google. Но важно понимать масштаб: это не главный фактор. Релевантный и полезный контент всё равно важнее, и быстрая страница со слабым содержанием не обгонит сильную, но медленную.

Где метрики реально решают:

• при близких по качеству конкурентах;
• в конверсии: медленный и нестабильный сайт теряет заявки независимо от позиций;
• на мобильных устройствах и слабом интернете, где проблемы заметнее всего.

Где проверить метрики

• PageSpeed Insights — полевые данные (если трафика достаточно) и лабораторный тест Lighthouse для конкретного URL.
• Google Search Console, отчёт «Основные интернет-показатели» — группы страниц сайта с проблемами.
• Chrome DevTools, вкладка Performance — для поиска конкретных причин.
• Библиотека web-vitals — сбор метрик с реальных пользователей в вашу аналитику.

Помните: лабораторный тест — это одна загрузка на эмулированном устройстве. Для оценки ориентируйтесь на полевые данные, а лабораторию используйте для диагностики.

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

• Оптимизировать только главную. Пользователи приходят на карточки товаров и статьи — проверяйте все шаблоны страниц.
• Гнаться за 100 баллами Lighthouse. Оценка Lighthouse — это не Core Web Vitals; важны пороги на реальных данных.
• Ждать результата сразу. Полевые данные агрегируются примерно за 28 дней, поэтому улучшения видны с задержкой.