Как улучшить Core Web Vitals
Что такое Core Web Vitals и конкретные шаги по улучшению LCP, INP и CLS.
12 мин чтения
Три ключевые метрики
Core Web Vitals — набор метрик Google, которые измеряют реальный пользовательский опыт на сайте. Это не абстрактный «балл скорости», а конкретные показатели: как быстро появляется контент, насколько отзывчив интерфейс и стабильна ли вёрстка при загрузке.
LCP (Largest Contentful Paint) — время до отрисовки самого крупного видимого элемента. Обычно это hero-изображение, баннер или крупный блок текста. Цель — до 2,5 секунды для 75-го перцентиля пользователей.
INP (Interaction to Next Paint) заменил FID как метрика отзывчивости. Он измеряет задержку между действием пользователя (клик, тап, ввод) и следующей отрисовкой страницы. Плохой INP — когда кнопка «не реагирует» из-за тяжёлого JavaScript.
CLS (Cumulative Layout Shift) фиксирует «прыжки» вёрстки: когда баннер подгружается и сдвигает текст, или шрифт меняет размер после загрузки. Цель — значение до 0,1.
Данные берите из PageSpeed Insights и Search Console (отчёт Core Web Vitals). Ориентируйтесь на полевые данные (CrUX) — это реальные пользователи, а не лабораторный тест на идеальном канале. SEOSCANUM при аудите подтягивает реальные метрики PageSpeed, без выдуманных «SEO-баллов».
- LCP — скорость появления основного контента (цель до 2,5 с)
- INP — отзывчивость на действия пользователя
- CLS — визуальная стабильность (цель до 0,1)
Как улучшить LCP
Начните с определения LCP-элемента на ключевых страницах — PageSpeed Insights показывает, какой именно блок тормозит. Чаще всего это изображение первого экрана, загружаемое в полном размере без оптимизации.
Оптимизируйте изображения: форматы WebP или AVIF, сжатие без видимой потери качества, размеры под реальное отображение (не грузить 4000px для блока 800px). Используйте srcset и sizes для адаптивной загрузки.
Ускорите серверный ответ (TTFB): кеширование, CDN для статики, оптимизация базы данных. На CMS-сайтах частый виновник — тяжёлые плагины и отсутствие object cache.
Уберите render-blocking ресурсы: отложите некритичный CSS и JS, inline-критический CSS для первого экрана. Шрифты подключайте с font-display: swap и preload для основного начертания.
Для LCP-изображения добавьте fetchpriority="high" и preload в <head>. Не лениво загружайте (loading="lazy") контент above the fold — это напрямую ухудшает LCP.
Как улучшить INP
INP страдает от длинных задач JavaScript, которые блокируют главный поток. Откройте DevTools → Performance, воспроизведите клик по «тормозящей» кнопке и найдите задачи дольше 50 мс.
Разбивайте тяжёлые вычисления: используйте requestIdleCallback, Web Workers или разделение кода (code splitting), чтобы при первой загрузке не тянуть весь бандл.
Сторонние скрипты — частый источник проблем: чаты, аналитика, виджеты рекламы. Загружайте их асинхронно или после взаимодействия. Каждый лишний тег <script> на странице checkout — риск для INP и конверсии.
На мобильных INP обычно хуже из-за слабого процессора. Тестируйте на реальных устройствах, а не только в десктопном Lighthouse.
После оптимизаций подождите 28 дней — CrUX обновляется с задержкой. Сравнивайте 75-й перцентиль до и после, а не единичные прогоны Lighthouse.
Как улучшить CLS
Указывайте width и height для всех изображений и видео — браузер зарезервирует место до загрузки. Для responsive-блоков используйте aspect-ratio в CSS.
Не вставляйте баннеры и промо-блоки над уже отрисованным контентом без резервирования высоты. Особенно опасны рекламные слоты и cookie-баннеры, которые «выталкивают» страницу.
Шрифты: подключайте с font-display: swap и по возможности используйте системные шрифты или ограниченный набор начертаний. Смена метрик шрифта после загрузки — частая причина CLS.
Динамический контент (рекомендации, «недавно просмотренные») добавляйте ниже первого экрана или в заранее зарезервированные контейнеры фиксированной минимальной высоты.
CLS влияет и на SEO, и на конверсию: пользователь кликает по кнопке, вёрстка сдвигается, и он попадает не туда. Исправление CLS часто даёт измеримый рост заявок без изменения контента.
Приоритизация и контроль
Не оптимизируйте все страницы сразу. Начните с URL, которые дают больше всего органического трафика в Search Console — улучшение CWV на них даст максимальный эффект для бизнеса.
Скорость — фактор ранжирования, но не заменяет релевантный контент. Страница с отличным LCP и пустым текстом не выйдет в ТОП. Встраивайте работу над CWV в общий SEO-план, а не выносите в отдельный «проект ради баллов».
Фиксируйте метрики «до» в Search Console и PageSpeed. После каждого релиза проверяйте регресс — новый слайдер или A/B-тест могут убить месяцы оптимизации.
SEOSCANUM включает проверку скорости в технический аудит на реальных данных PageSpeed Insights — вы видите конкретные URL с проблемами CWV и рекомендации, а не синтетический «performance score».
Частые вопросы
Скорость важнее контента?
Нужны ли 100 баллов в Lighthouse?
Как быстро обновятся данные после правок?
Читайте также
Почему страницы не индексируются и как это исправить
Основные причины, по которым страницы не индексируются, и пошаговый план, как вернуть их в поиск.
Как сделать SEO-аудит сайта: пошаговый гайд
Пошаговый план проведения SEO-аудита: от техники и индексации до семантики и приоритизации находок.
SEO интернет-магазина: полный гайд
Полный разбор SEO интернет-магазина: от структуры каталога и фильтров до карточек товаров и микроразметки.
Проверьте свой сайт за пару минут
Запустите бесплатное демо-аудита — увидите главные проблемы без оплаты и без подписки.