Core Web Vitals: полное руководство

Что такое Core Web Vitals

Core Web Vitals — набор метрик от Google, измеряющих реальный пользовательский опыт на сайте. С 2021 года они являются фактором ранжирования в Google. Три основные метрики оценивают PageSpeed анализ, интерактивность и визуальную стабильность.

LCP — Largest Contentful Paint

LCP измеряет время загрузки самого крупного видимого элемента контента на первом экране. Это может быть изображение, видео, блок текста или фоновое изображение через CSS.

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

• Хорошо: до 2.5 секунд
• Требует улучшения: 2.5 — 4.0 секунды
• Плохо: более 4.0 секунд

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

1. Оптимизируйте LCP-ресурс
   • Сжимайте изображения, используйте WebP/AVIF
   • Задайте правильные размеры (width, height)
   • Предзагружайте: <link rel="preload" as="image" href="hero.webp">
   • Используйте fetchpriority="high" на LCP-элементе
2. Ускорьте серверный ответ
   • TTFB должен быть менее 800 мс
   • Используйте CDN
   • Включите HTTP/2 или HTTP/3
   • Оптимизируйте серверную логику и запросы к БД
3. Устраните render-blocking ресурсы
   • CSS: инлайните критический CSS, отложите остальной
   • JS: defer или async атрибуты
   • Шрифты: font-display: swap или optional
4. Не используйте lazy loading для LCP-изображения — это замедляет его загрузку

INP — Interaction to Next Paint

INP заменил FID в марте 2024 года. Он измеряет задержку между действием пользователя (клик, tap, нажатие клавиши) и визуальным обновлением страницы. INP учитывает все взаимодействия за визит, а не только первое.

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

• Хорошо: до 200 мс
• Требует улучшения: 200 — 500 мс
• Плохо: более 500 мс

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

1. Сократите длинные задачи (Long Tasks)
   • Разбивайте JavaScript на мелкие куски
   • Используйте requestIdleCallback для несрочных операций
   • Переносите тяжёлые вычисления в Web Workers
2. Уменьшите объём JavaScript
   • Code splitting и lazy loading модулей
   • Tree shaking для удаления неиспользуемого кода
   • Минифицируйте и сжимайте (gzip/brotli)
3. Оптимизируйте DOM
   • Избегайте DOM-деревьев более 1500 элементов
   • Используйте виртуализацию для длинных списков
   • Минимизируйте layout thrashing (чтение-запись DOM)
4. Дебаунс и троттлинг — для частых событий (scroll, resize, input)

CLS — Cumulative Layout Shift

CLS измеряет визуальную стабильность — насколько элементы страницы сдвигаются во время загрузки. Каждый неожиданный сдвиг элемента вносит вклад в общий CLS.

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

• Хорошо: до 0.1
• Требует улучшения: 0.1 — 0.25
• Плохо: более 0.25

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

1. Всегда задавайте размеры для медиа

   <img src="photo.webp" width="800" height="600" alt="Фото">

   Или используйте CSS aspect-ratio: aspect-ratio: 16 / 9;

2. Резервируйте место для динамического контента
   • Рекламные блоки: задайте min-height
   • Embedded-контент: контейнер с фиксированными размерами
3. Избегайте вставки контента над текущей позицией прокрутки
4. Шрифты без FOUT
   • font-display: optional для предотвращения сдвига текста
   • Предзагрузка шрифтов: <link rel="preload" as="font" crossorigin>
5. Анимации — используйте transform вместо свойств, вызывающих layout (top, left, width, height)

Как измерить Core Web Vitals

Полевые данные (Field Data)

• Google Search Console — отчёт Core Web Vitals по всему сайту
• CrUX (Chrome User Experience Report) — реальные данные пользователей Chrome
• PageSpeed Insights — полевые данные + лабораторный анализ

Лабораторные данные (Lab Data)

• Lighthouse — аудит в Chrome DevTools
• WebPageTest — детальный анализ с разных точек
• Enterno.io Speed Test — быстрая проверка времени загрузки и ответа сервера

Core Web Vitals и SEO

Core Web Vitals — один из факторов ранжирования Google, но не единственный. Качественный контент, релевантность и ссылочный профиль по-прежнему важнее. Однако при прочих равных условиях сайт с лучшими CWV получит преимущество.

Рекомендации:

• Сначала оптимизируйте контент и техническое SEO
• Затем работайте над CWV — начните с самых проблемных страниц
• Фокусируйтесь на LCP — он даёт наибольший эффект
• Мониторьте изменения в Search Console после оптимизации

Итоги

Core Web Vitals — три метрики, определяющие качество пользовательского опыта: LCP (скорость загрузки), INP (интерактивность), CLS (визуальная стабильность). Оптимизируйте LCP первым, так как он даёт наибольший эффект для пользователей и SEO. Используйте полевые данные для приоритизации и лабораторные для отладки.