Core Web Vitals: как измерять и улучшать

Почему Core Web Vitals важны для вашего сайта

Вы, вероятно, видели отчёты о том, что ваш сайт медленный, но не знаете, с чего начать. Core Web Vitals — это метрики Google для реального пользовательского опыта: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) и Cumulative Layout Shift (CLS). Они влияют на позиции в поиске и, что важнее, на то, как пользователи воспринимают ваш сайт. Медленный LCP раздражает посетителей, высокий INP делает страницу неотзывчивой, а плохой CLS вызывает случайные клики. Это руководство покажет, как измерять эти метрики и улучшать их с помощью практических шагов.

Понимание трёх Core Web Vitals

Прежде чем оптимизировать, узнайте, что измеряет каждая метрика и её пороги.

Эти пороги основаны на полевых данных (реальные пользователи), а не на лабораторных тестах. Стремитесь к диапазону «Хорошо» как минимум для 75% загрузок страниц.

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

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

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

• Lighthouse в Chrome DevTools: запустите аудит для оценки производительности и конкретных возможностей.
• WebPageTest: продвинутое тестирование с раскадровками и диаграммами водопада.
• Chrome UX Report (CrUX): полевые данные от реальных пользователей, доступные через PageSpeed Insights или CrUX API.

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

• PageSpeed Insights: показывает как лабораторные, так и полевые данные для URL.
• Google Search Console: отчёт Core Web Vitals группирует URL по статусу.
• Библиотека JavaScript 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);

Это даёт вам непрерывный поток полевых данных для отслеживания улучшений.

Улучшение Largest Contentful Paint (LCP)

LCP часто является самой большой проблемой. Самый крупный элемент — обычно главное изображение (hero) или крупный текстовый блок. Оптимизируйте путь его загрузки.

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

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

<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" alt="Hero" width="1200" height="600" fetchpriority="high">

Всегда указывайте ширину и высоту, чтобы избежать сдвигов макета.

Улучшение Interaction to Next Paint (INP)

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

• Разбивайте долгие задачи: используйте setTimeout или scheduler.yield, чтобы уступить браузеру.
• Оптимизируйте обработчики событий: применяйте debounce для ввода, избегайте тяжёлой синхронной работы.
• Сократите JavaScript: разделяйте код, применяйте tree-shaking и откладывайте некритические скрипты.
• Используйте веб-воркеры для ресурсоёмких задач.
• Избегайте крупных обновлений DOM: группируйте изменения DOM и используйте requestAnimationFrame.

Пример: уступка основному потоку во время длинного цикла:

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    // do work
    if (i % 50 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

Это сохраняет отзывчивость страницы во время тяжёлой обработки.

Улучшение Cumulative Layout Shift (CLS)

CLS возникает, когда элементы неожиданно перемещаются. Частые причины: изображения без размеров, реклама, встраиваемые элементы и веб-шрифты.

• Всегда указывайте ширину и высоту для изображений и видео.
• Резервируйте место для динамического контента (рекламы, встраиваемых элементов) с помощью CSS min-height или блоков с aspect-ratio.
• Используйте font-display: swap и предзагружайте шрифты, чтобы избежать невидимого текста и сдвигов макета.
• Избегайте вставки контента над существующим контентом, если это не ответ на действие пользователя.

Пример: использование aspect-ratio для резервирования места:

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

Это предотвращает сдвиги при загрузке видео.

Мониторинг и итерации

Производительность — это не разовое исправление. Настройте непрерывный мониторинг с метриками реальных пользователей. Используйте дашборды для отслеживания LCP, INP и CLS с течением времени. После каждого изменения проверяйте с помощью лабораторных инструментов и смотрите полевые данные через несколько дней. В первую очередь исправляйте то, что влияет на большинство пользователей.

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?

Отслеживайте полевые данные непрерывно и запускайте лабораторные тесты после каждого значительного изменения. Проверяйте Search Console еженедельно для отслеживания тенденций.

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

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

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