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

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

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

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

• LCP: Время до отрисовки самого большого элемента контента (изображения, текстового блока). Хорошо: ≤2,5 с.
• INP: Время от взаимодействия пользователя до следующей отрисовки. Хорошо: ≤200 мс.
• CLS: Сумма оценок сдвига макета. Хорошо: ≤0,1.

Эти пороги оцениваются на 75-м процентиле загрузок страниц, то есть 75% посещений должны соответствовать целевому значению.

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

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

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

• Lighthouse в Chrome DevTools: Запускайте аудиты производительности, доступности и SEO. Он предоставляет лабораторные оценки CWV и возможности для улучшения.
• WebPageTest: Продвинутое тестирование с настраиваемыми сетевыми условиями и эмуляцией устройств.

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

• Chrome UX Report (CrUX): Публичный набор данных метрик реальных пользователей. Доступ через PageSpeed Insights или BigQuery.
• Библиотека JavaScript web-vitals: Собирайте CWV от реальных пользователей и отправляйте в свою аналитику.

Используйте полевые данные для выявления реальных проблем, а затем лабораторные инструменты для отладки и проверки исправлений.

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

LCP часто является главным изображением или основным заголовком. Оптимизируйте эти элементы:

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

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

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

Также установите fetchpriority="high" в теге <img>, чтобы указать важность.

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

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

• Разбивайте длинные задачи: Используйте setTimeout или requestIdleCallback, чтобы уступить браузеру.
• Оптимизируйте обработчики событий: Применяйте debounce или throttle к дорогостоящим операциям.
• Сократите JavaScript: Разделяйте код, удаляйте неиспользуемый код (tree-shaking) и откладывайте некритичные скрипты.
• Используйте веб-воркеры для ресурсоемких вычислений.

Пример: уступка основному потоку:

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // Выполнить некоторую работу
  await yieldToMain();
  // Продолжить
}

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

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

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

Пример: резервирование места для рекламы:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Сравнение метрик и инструментов

Практический рабочий процесс улучшения CWV

1. Измерьте полевые данные с помощью PageSpeed Insights или CrUX, чтобы выявить страницы с плохими показателями.
2. Запустите Lighthouse на этих страницах, чтобы получить конкретные возможности.
3. Расставьте приоритеты исправлений по влиянию: часто LCP и CLS проще всего улучшить.
4. Внедрите изменения и протестируйте в лаборатории.
5. Разверните и отслеживайте полевые данные, чтобы подтвердить улучшение.
6. Повторяйте для оставшихся проблем.

Помните, что CWV ориентированы на пользователя; всегда проверяйте с данными реальных пользователей.

Часто задаваемые вопросы

Что такое Core Web Vitals и почему они важны?

Core Web Vitals — это три метрики (LCP, INP, CLS), которые количественно оценивают загрузку, интерактивность и визуальную стабильность. Они важны, потому что отражают реальный пользовательский опыт и используются Google как сигнал ранжирования.

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

Отслеживайте полевые данные непрерывно и запускайте лабораторные тесты после значительных изменений. Ежемесячный обзор данных CrUX — хорошая практика.

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

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

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