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

Вы создали современное веб-приложение, но пользователи жалуются на медлительность. Позиции в поиске падают, а показатель отказов растёт. Виновником могут быть плохие 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: запустите аудит, чтобы получить LCP, CLS и TBT (косвенный показатель INP).
• WebPageTest: продвинутое тестирование с раскадровками и водопадными диаграммами.
• PageSpeed Insights: объединяет лабораторные и полевые данные.

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

• Chrome UX Report (CrUX): публичный набор данных о метриках реальных пользователей.
• Библиотека web-vitals: отправляйте метрики в вашу аналитику.

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

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

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

Улучшение LCP

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

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

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

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Улучшение INP

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

1. Дробите долгие задачи: используйте setTimeout или scheduler.yield, чтобы уступить главному потоку.
2. Оптимизируйте обработчики событий: применяйте debounce и throttle там, где это уместно; избегайте тяжёлой синхронной работы.
3. Сокращайте JavaScript: используйте code-splitting, tree-shaking и откладывайте некритичные скрипты.
4. Используйте web workers для ресурсоёмких задач.

Пример: уступка с помощью 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. Используйте анимации через transform вместо свойств, вызывающих перерасчёт макета.

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

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

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

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

Встройте мониторинг производительности в ваш CI/CD-конвейер. Используйте Lighthouse CI, чтобы ловить регрессии. Для полевых данных настройте дашборд с web-vitals и вашей аналитикой.

При оптимизации изображений вы можете быстро сжать их с помощью нашего Image Compressor перед загрузкой на сайт.

FAQ

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

Core Web Vitals — это три метрики — LCP, INP и CLS, — которые Google использует для оценки пользовательского опыта на веб-страницах.

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

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

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

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

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