Core Web Vitals: измерение и улучшение веб-производительности

Ваши пользователи нетерпеливы. Если страница загружается слишком долго или прыгает, пока они пытаются читать, они уходят. Google знает это, и его алгоритм ранжирования использует Core Web Vitals для измерения реального пользовательского опыта. Но помимо SEO, Core Web Vitals напрямую влияют на конверсию и удовлетворённость пользователей. В этом руководстве мы разберём, что означает каждая метрика, как их точно измерять и — самое главное — как улучшить их с помощью практических исправлений на уровне кода.

Что такое Core Web Vitals?

Core Web Vitals — это набор из трёх метрик, которые количественно оценивают ключевые аспекты пользовательского опыта: загрузку, интерактивность и визуальную стабильность. Они являются частью сигналов Google Page Experience.

• Largest Contentful Paint (LCP): Измеряет производительность загрузки. Отмечает время, когда самый большой элемент контента (изображение, видео или текстовый блок) становится видимым. Стремитесь к LCP менее 2,5 секунд.
• Interaction to Next Paint (INP): Измеряет отзывчивость. Фиксирует задержку всех взаимодействий (клики, нажатия, ввод с клавиатуры) и сообщает о самом длительном. Стремитесь к INP менее 200 миллисекунд.
• Cumulative Layout Shift (CLS): Измеряет визуальную стабильность. Количественно оценивает неожиданные сдвиги макета во время загрузки страницы. Стремитесь к CLS менее 0,1.

Эти пороговые значения основаны на полевых данных реальных пользователей, а не на лабораторных тестах. Поэтому правильное измерение имеет решающее значение.

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

Вам нужны как лабораторные, так и полевые данные. Лабораторные инструменты помогают отлаживать; полевые данные отражают реальный пользовательский опыт.

Полевые инструменты (Real User Monitoring)

• Chrome User Experience Report (CrUX): Публичный набор данных Google с метриками реальных пользователей. Просматривайте его в PageSpeed Insights или Search Console.
• PageSpeed Insights: Показывает как лабораторные (Lighthouse), так и полевые (CrUX) данные для URL.
• Отчёт Core Web Vitals в Search Console: Группирует URL по статусу и метрике.
• Библиотека Web Vitals JavaScript: Собирайте собственные полевые данные с помощью библиотеки web-vitals и отправляйте их в свою аналитику.

Лабораторные инструменты (синтетическое тестирование)

• Lighthouse: Встроен в Chrome DevTools. Предоставляет лабораторные метрики и возможности для улучшения.
• WebPageTest: Расширенное тестирование с раскадровкой и диаграммами водопада.
• Панель Performance в Chrome DevTools: Глубокое погружение в производительность во время выполнения.

Начните с PageSpeed Insights для быстрого обзора, затем используйте DevTools для отладки конкретных проблем.

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

LCP часто является наиболее важной метрикой для исправления. Распространённые причины плохого LCP включают медленный ответ сервера, блокирующие рендеринг ресурсы и неоптимизированные изображения.

1. Оптимизируйте изображения: Сжимайте изображения, используйте современные форматы, такие как WebP или AVIF, и предоставляйте адаптивные изображения с помощью srcset. Инструменты вроде Image Compressor помогают уменьшить размер файла без видимой потери качества.
2. Предзагрузите LCP-изображение: Добавьте <link rel="preload"> для главного изображения, чтобы начать его загрузку раньше.
3. Сократите время ответа сервера: Используйте CDN, включите кэширование и оптимизируйте запросы к бэкенду. Для Nginx рассмотрите fastcgi_cache или proxy_cache.
4. Устраните ресурсы, блокирующие рендеринг: Встройте критический CSS, отложите некритический CSS и JavaScript.
5. Используйте сеть доставки контента (CDN): Отдавайте ресурсы из мест, более близких к пользователям.

<!-- Предзагрузка LCP-изображения -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Адаптивные изображения -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">

Улучшение INP: сделайте взаимодействия мгновенными

INP заменил First Input Delay (FID) в марте 2024 года. Он измеряет полную длительность взаимодействий, а не только задержку перед обработкой. Чтобы улучшить INP, нужно сократить время выполнения JavaScript и избегать длительных задач.

1. Разбивайте длительные задачи: Используйте setTimeout или requestIdleCallback, чтобы уступать главному потоку.
2. Оптимизируйте обработчики событий: Применяйте debounce или throttle для дорогостоящих обработчиков и избегайте layout thrashing.
3. Уменьшите размер JavaScript-бандла: Разделяйте код, применяйте tree-shaking и ленивую загрузку некритических скриптов.
4. Используйте веб-воркеры: Переносите тяжёлые вычисления из главного потока.
5. Минимизируйте сторонние скрипты: Они часто блокируют главный поток. Загружайте их асинхронно или отложенно.

Используйте панель Performance в DevTools для записи взаимодействий и выявления длительных задач.

Улучшение CLS: сохраняйте стабильность макета

CLS возникает, когда элементы неожиданно смещаются. Частые виновники — изображения без размеров, реклама, встраиваемые элементы и динамически добавляемый контент.

1. Всегда указывайте атрибуты width и height для изображений и видео: Это позволяет браузеру зарезервировать место.
2. Резервируйте место для рекламы и встраиваемых элементов: Используйте CSS aspect-ratio или контейнеры фиксированного размера.
3. Избегайте вставки контента выше существующего: Если это необходимо, делайте это в ответ на действие пользователя.
4. Осторожно используйте font-display: swap: Swap может вызывать сдвиги макета, если метрики шрифта различаются. Рассмотрите font-display: optional или предзагрузку шрифтов.
5. Для анимаций используйте CSS-трансформации: Они не вызывают сдвигов макета.

<!-- Резервирование места с помощью aspect-ratio -->
<img src="#" width="800" height="600" alt="...">

Сравнение метрик Core Web Vitals

Мониторинг и непрерывное улучшение

Улучшение Core Web Vitals — не разовая задача. После развёртывания исправлений следите за полевыми данными, чтобы убедиться в отсутствии регрессий. Настройте оповещения в вашем RUM-инструменте на случай превышения пороговых значений. Регулярно запускайте Lighthouse в CI, чтобы выявлять регрессии производительности до попадания в продакшен.

Помните, что производительность — это функция. Уделяя приоритет Core Web Vitals, вы обеспечиваете лучший опыт, который удерживает пользователей и повышает ваши позиции в поиске.

FAQ

Каковы текущие пороговые значения для Core Web Vitals?

Для LCP: хорошо — менее 2,5 секунд, требует улучшения — 2,5–4,0 секунды, плохо — более 4,0 секунд. Для INP: хорошо — менее 200 миллисекунд, требует улучшения — 200–500 миллисекунд, плохо — более 500 миллисекунд. Для CLS: хорошо — менее 0,1, требует улучшения — 0,1–0,25, плохо — более 0,25.

Как часто следует измерять Core Web Vitals?

Полевые данные в CrUX обновляются ежедневно, но это скользящее среднее за 28 дней. Вы должны мониторить непрерывно и запускать лабораторные тесты после каждого значительного изменения кода. Настройте автоматические запуски Lighthouse в вашем CI/CD-конвейере, чтобы выявлять регрессии на ранней стадии.

Можно ли улучшить Core Web Vitals без разработчика?

Некоторые исправления, такие как сжатие изображений или включение кэширования, можно выполнить с помощью плагинов или настроек хостинга. Однако более глубокая оптимизация, например разделение кода или устранение ресурсов, блокирующих рендеринг, обычно требует участия разработчика. Расставьте приоритеты для метрик с наибольшим влиянием на основе ваших полевых данных.

Готовы оптимизировать изображения для лучшего LCP? Попробуйте наш бесплатный Image Compressor, чтобы уменьшить размер файлов без потери качества.