Содержание
Что такое Core Web Vitals
Core Web Vitals (CWV) — набор метрик, измеряющих реальный пользовательский опыт при загрузке и взаимодействии с веб-страницей. Хотя концепция изначально принадлежит Google, Яндекс также учитывает аналогичные показатели качества при ранжировании.
Три основные метрики
LCP — Largest Contentful Paint
Время загрузки самого крупного видимого элемента на первом экране (обычно это изображение или блок текста). Отражает воспринимаемую скорость загрузки.
- Хорошо: менее 2,5 секунд
- Требует улучшения: 2,5–4 секунды
- Плохо: более 4 секунд
FID — First Input Delay (с 2024 заменён на INP)
INP (Interaction to Next Paint) — время отклика на любое взаимодействие пользователя. Измеряет, насколько быстро страница реагирует на клики, нажатия клавиш, тапы.
- Хорошо: менее 200 мс
- Требует улучшения: 200–500 мс
- Плохо: более 500 мс
CLS — Cumulative Layout Shift
Суммарный сдвиг макета — метрика визуальной стабильности. Измеряет, насколько элементы страницы смещаются во время загрузки (раздражающие «прыжки» контента).
- Хорошо: менее 0,1
- Требует улучшения: 0,1–0,25
- Плохо: более 0,25
Как улучшить LCP
- Оптимизируйте главное изображение: WebP, правильный размер, preload
- Ускорьте серверный ответ (TTFB менее 200 мс)
- Используйте CDN для статических ресурсов
- Уберите блокирующие рендеринг ресурсы из head
- Используйте критический CSS inline
Как улучшить INP
- Разбивайте длительные JavaScript-задачи на короткие (yield to main thread)
- Используйте requestIdleCallback для некритичных операций
- Минимизируйте сторонние скрипты (виджеты, аналитика)
- Оптимизируйте обработчики событий
Как улучшить CLS
- Задавайте width и height для всех изображений и видео
- Резервируйте место для рекламных блоков и виджетов
- Используйте font-display: swap и preload для шрифтов
- Избегайте динамической вставки контента выше текущего viewport
Связь CWV с поведенческими факторами
Показатели CWV напрямую влияют на показатель отказов и другие поведенческие факторы. Быстрый, стабильный, отзывчивый сайт удерживает пользователей дольше. Это усиливает и органические ПФ, и эффективность накрутки поведенческих факторов: на качественном сайте даже реальные посетители ведут себя лучше.
Workflow оптимизации Core Web Vitals
Оптимизация CWV — итеративный процесс. Необходим чёткий workflow, который позволяет системно улучшать показатели и отслеживать прогресс. Каждая итерация должна приближать метрики к «зелёной» зоне.
Пошаговый workflow
- Аудит: замерьте текущие CWV через PageSpeed Insights, CrUX и Метрику
- Приоритизация: определите, какая метрика наиболее далека от целевого значения
- Диагностика: используйте Lighthouse и Chrome DevTools для выявления конкретных причин
- Планирование: составьте список оптимизаций с оценкой ожидаемого эффекта
- Реализация: внедрите изменения последовательно, начиная с наиболее влиятельных
- Верификация: после каждого изменения проверьте результат в lab-тестах
- Мониторинг: дождитесь обновления полевых данных (CrUX обновляется раз в 28 дней)
- Итерация: повторите цикл для следующей метрики
Типичные проблемы и их решения
За годы оптимизации мы выявили наиболее частые причины плохих показателей CWV. Знание этих паттернов ускоряет диагностику и улучшение.
- Плохой LCP из-за hero-изображения: используйте preload, правильный размер, WebP формат, критический CSS
- Высокий CLS из-за рекламы: зарезервируйте место для рекламных блоков через CSS min-height
- Плохой INP из-за сторонних скриптов: загружайте аналитику и виджеты с defer, используйте Partytown
- Высокий TTFB из-за медленного сервера: обновите хостинг, настройте серверное кэширование
- CLS из-за веб-шрифтов: добавьте font-display: swap и предзагрузку WOFF2 файлов
Влияние CWV на бизнес-показатели
Улучшение Core Web Vitals даёт измеримый бизнес-эффект помимо SEO. По исследованиям: улучшение LCP на 100 мс увеличивает конверсию на 1-2%, достижение хороших CWV снижает показатель отказов на 10-20%, а улучшение INP повышает вовлечённость пользователей на 5-15%.
Для ранжирования в поисковой выдаче Яндекса хорошие CWV создают двойной эффект: прямой (Яндекс учитывает скорость) и косвенный (лучшие поведенческие метрики). В сочетании с накруткой ПФ оптимизированный сайт показывает более естественные поведенческие факторы — боты и реальные пользователи одинаково быстро загружают страницы, что делает накрутку менее заметной для антифрод системы.
Практическая оптимизация CWV
Улучшение Core Web Vitals требует системного подхода. Начните с самых критичных метрик и двигайтесь к менее влияющим на пользовательский опыт.
- LCP оптимизация: сжатие изображений, CDN, предзагрузка критических ресурсов
- FID/INP оптимизация: уменьшение JavaScript, разбиение длинных задач, web workers
- CLS оптимизация: указание размеров для img и video, предзагрузка шрифтов
- TTFB оптимизация: серверный кеш, оптимизация базы данных, HTTP/2
CWV и поведенческие факторы
Core Web Vitals — это прямые измерения пользовательского опыта. Сайты с хорошими CWV показывают более низкий показатель отказов, большую глубину просмотра и длительность сессий. Всё это — ключевые поведенческие факторы, которые Яндекс использует при ранжировании. Оптимизация CWV создаёт прочный фундамент, на котором накрутка поведенческих факторов работает максимально эффективно.