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

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

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

Core Web Vitals — это три метрики, которые количественно оценивают ключевые аспекты пользовательского опыта:

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

Эти метрики являются частью сигналов Page Experience от Google и напрямую влияют на SEO и удовлетворённость пользователей.

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

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

Лабораторные инструменты

• Lighthouse в Chrome DevTools: запускайте аудиты и получайте оценки с возможностями для улучшения.
• WebPageTest: расширенное тестирование с раскадровками и диаграммами водопада.
• PageSpeed Insights: объединяет лабораторные и полевые данные из CrUX.

Полевые инструменты

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

Вот как использовать библиотеку web-vitals для отправки метрик в вашу аналитику:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use navigator.sendBeacon if available
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Улучшение LCP

LCP часто является наиболее значимой метрикой. Чтобы улучшить её:

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

Пример: предзагрузка главного изображения:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Улучшение INP

INP измеряет отзывчивость. Высокий INP часто возникает из-за длительных задач, блокирующих основной поток.

1. Разбивайте длительные задачи: используйте setTimeout, requestIdleCallback или scheduler.yield(), чтобы уступить основному потоку.
2. Оптимизируйте обработчики событий: применяйте дебаунсинг или троттлинг для дорогостоящих операций.
3. Сократите выполнение JavaScript: разделяйте код, удаляйте неиспользуемый код (tree-shaking) и откладывайте некритичные скрипты.
4. Избегайте масштабных обновлений DOM: группируйте изменения DOM и разумно используйте виртуальный DOM.
5. Используйте веб-воркеры для ресурсоёмких вычислений.

Пример: уступка потоку с помощью scheduler.yield() (где поддерживается):

async function handleClick() {
  // Do some work
  await scheduler.yield();
  // Continue after yielding
}

Улучшение CLS

CLS связан с визуальной стабильностью. Предотвращайте неожиданные сдвиги:

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

Пример: резервирование места с помощью aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Сравнение Core Web Vitals

Инструменты и рабочий процесс

Интегрируйте мониторинг Core Web Vitals в ваш процесс разработки:

• Запускайте Lighthouse в CI, чтобы выявлять регрессии.
• Используйте RUM (Real User Monitoring) для отслеживания полевых данных.
• Устанавливайте бюджеты производительности и оповещения.
• Регулярно проверяйте сторонние скрипты — они часто влияют на INP и LCP.

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

FAQ

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

LCP: хорошо ≤2,5 с, требует улучшения ≤4 с; INP: хорошо ≤200 мс, требует улучшения ≤500 мс; CLS: хорошо ≤0,1, требует улучшения ≤0,25.

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

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

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

Да — многие исправления, такие как оптимизация изображений, предзагрузка и отложенная загрузка скриптов, можно применять постепенно.