Core Web Vitals: LCP, CLS, INP — как улучшить и пройти тест

Core Web Vitals — набор метрик от Google, который с 2021 года стал официальным фактором ранжирования. Яндекс использует аналогичные метрики в своём алгоритме. В этой статье — детальный разбор каждой метрики (LCP, CLS, INP), инструментов измерения и техник оптимизации от SEO Мастера.

LCP — Largest Contentful Paint

Измеряет время загрузки самого большого видимого элемента на первом экране (Hero-картинка, заголовок, главный блок текста).

Целевые значения

• Хорошо: < 2.5 секунды
• Нужно улучшить: 2.5 - 4.0 секунды
• Плохо: > 4.0 секунды

Что влияет на LCP

• Время ответа сервера (TTFB)
• Скорость загрузки ресурсов (CSS, JS, шрифтов)
• Размер и формат LCP-элемента
• Клиентский рендеринг vs серверный

Как улучшить LCP

CLS — Cumulative Layout Shift

Измеряет визуальную стабильность страницы. Сколько раз элементы «прыгают» при загрузке.

Целевые значения

• Хорошо: < 0.1
• Нужно улучшить: 0.1 - 0.25
• Плохо: > 0.25

Причины плохого CLS

• Картинки без указанных размеров (width/height)
• Шрифты, которые подменяются после загрузки (FOUT, FOIT)
• Реклама и виджеты, вставляющиеся динамически
• Элементы, которые появляются над уже отрендеренным контентом
• Iframe без фиксированной высоты

Как исправить CLS

• Указывать width и height у всех картинок и видео
• Задавать aspect-ratio через CSS
• Font-display: swap + правильный fallback шрифт
• Резервировать место под рекламу и виджеты
• Использовать transform для анимаций, а не top/left
• Никогда не вставлять контент над уже видимым, кроме как по действию пользователя

INP — Interaction to Next Paint

Измеряет задержку между действием пользователя (клик, тап, ввод текста) и визуальным откликом страницы.

Целевые значения

• Хорошо: < 200 мс
• Нужно улучшить: 200 - 500 мс
• Плохо: > 500 мс

Причины плохого INP

• Тяжёлые JS-обработчики событий
• Третьесторонние скрипты, замедляющие главный поток
• Частые ре-рендеры в React/Vue без мемоизации
• Синхронные запросы к серверу в обработчиках
• Большие DOM-деревья

Как улучшить INP

• Декомпозиция тяжёлых функций через setTimeout или requestIdleCallback
• Web Workers для тяжёлых вычислений
• Debounce и throttle для частых событий (scroll, resize, input)
• Мемоизация и React.memo
• Виртуализация длинных списков
• Сокращение DOM до 1500 элементов

Инструменты измерения

Частые вопросы

Работа с Real User Metrics (RUM)

Синтетические тесты (PageSpeed) показывают лабораторные условия. RUM — реальные данные пользователей. Для полной картины используйте оба:

• web-vitals.js — легкая библиотека для сбора CWV от реальных пользователей
• Отправка в Яндекс.Метрику или Google Analytics
• Сегментация по устройствам, браузерам, регионам
• Мониторинг аномалий и регрессов после деплоев

Оптимизация CWV на разных CMS

WordPress

• LiteSpeed Cache или W3 Total Cache для кеша
• ShortPixel, Smush для картинок
• Autoptimize для объединения CSS/JS
• WP Rocket для общей оптимизации
• Lazy-loading встроен с 5.5

1C-Битрикс

• Встроенный композит
• Модуль ускорения от вендора
• Настройка кеша через админку
• Оптимизация шаблонов вручную

MODX

• MinifyX для сжатия CSS/JS
• pThumb/phpThumbOn для изображений
• Встроенный кеш фронта и бэка
• Nginx-настройки для статики

Tilda и другие конструкторы

• Ограниченные возможности оптимизации
• Часто нужно переходить на свой код для ТОПа
• Платные тарифы дают чуть больше контроля

Оптимизация под мобильные сети

Core Web Vitals на мобильном строже, чем на десктопе. Причины:

• Меньше CPU-ресурсов на телефонах
• Часто мобильный интернет (3G/4G) медленнее Wi-Fi
• Меньший экран — LCP-элемент загружается пропорционально быстрее
• Touch-события сложнее обработать быстро

Для мобильной оптимизации нужны специальные техники:

• Адаптивные картинки через srcset — разные размеры для разных устройств
• Мобильная версия шрифтов с меньшим количеством начертаний
• Упрощение анимаций для слабых процессоров
• Отключение «тяжёлой» рекламы на мобильном
• Специальный мобильный шаблон вместо адаптива для сверхтяжёлых сайтов

Оптимизация базы данных

TTFB (время ответа сервера) часто страдает из-за медленных запросов к БД. Типичные решения:

• Индексы — на поля в WHERE, ORDER BY, JOIN
• Кеширование запросов — Redis, Memcached, встроенный кеш CMS
• N+1 queries — устранение через eager loading
• Денормализация — для часто запрашиваемых данных
• Репликация — чтение с реплик, запись на мастер
• Шардирование — для очень крупных таблиц

Снижение TTFB с 2 секунд до 200 мс даёт +15-20 баллов PageSpeed и чувствуется пользователями мгновенно.

Мониторинг CWV в продакшене

После улучшения нужно постоянно отслеживать метрики, чтобы не допустить регресса:

• Чек-лист после каждого релиза — сравнение CWV до и после
• Алерты при деградации > 10%
• Автоматические тесты в CI/CD
• Еженедельный обзор Яндекс.Метрики → Core Web Vitals
• Ежемесячный глубокий аудит

CWV vs пользовательский опыт

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

• Воспринимаемая скорость — что видит пользователь. Skeleton screens, progressive loading могут сделать сайт «ощущаться» быстрее, даже если LCP не изменился.
• Отзывчивость интерфейса — моментальная реакция на клики, даже если фоновая загрузка ещё идёт.
• Стабильность — элементы не прыгают, тексты не подменяются.
• Плавность — 60 FPS анимации, нет дёрганья при скролле.
• Предсказуемость — одинаковое поведение на разных устройствах и сетях.

Лабораторные метрики отражают 70-80% реального опыта. Остальное — это детали UX, которые нужно тестировать на живых пользователях.

Связь CWV и SEO

Влияние Core Web Vitals на позиции в выдаче:

• Прямой фактор ранжирования (с 2021 года для Google, с 2022 — для Яндекса)
• Косвенное влияние через поведенческие факторы — медленный сайт повышает bounce rate
• Влияние на CTR в выдаче — у сайтов с плохой скоростью ниже CTR
• Влияние на индексацию — бот выделяет меньше времени на медленные сайты

По нашим данным, улучшение CWV из «красной зоны» в «зелёную» даёт +15-30% позиций в органической выдаче в течение 2-3 месяцев.

Инструменты для глубокого анализа

• Chrome DevTools Performance Tab — детальный анализ каждого этапа загрузки
• WebPageTest — запись видео загрузки + waterfall
• GTmetrix — визуальные графики, Waterfall Chart
• Request Map Generator — визуализация всех запросов
• Bundle Analyzer — разбор JS-бандла
• Coverage Tab (DevTools) — показывает неиспользуемый CSS/JS

Как сделать сайт действительно быстрым

Это длинный путь, но результат того стоит. Общая последовательность:

Типичный путь оптимизации для middle-сайта

Вот как выглядит процесс у клиента с PageSpeed 45/100 на мобильном:

• Неделя 1: TTFB 2.1 с → 0.4 с через смену хостинга и настройку кеша → PageSpeed 58
• Неделя 2: WebP, lazy-loading, правильные размеры картинок → PageSpeed 72
• Неделя 3: Critical CSS, удаление неиспользуемого JS → PageSpeed 81
• Неделя 4: Preload LCP-ресурса, оптимизация шрифтов → PageSpeed 89

Результат: рост органического трафика на 28% за 3 месяца. Позиции по многим запросам улучшились на 5-15 позиций. Средний чек из органики вырос на 12% за счёт более качественной аудитории с мобильных устройств, которая раньше уходила из-за медленной загрузки. Окупаемость вложений в оптимизацию — 4-5 месяцев за счёт роста конверсий и позиций в выдаче.

CWV и пользовательский опыт в цифрах

Сводная таблица влияния Core Web Vitals на бизнес-показатели по нашей практике:

Разница между красной и зелёной зоной — это трёхкратная разница в конверсии и десятикратная в позициях. Инвестиции в CWV — одни из самых окупаемых в SEO.