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

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

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

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

• LCP: должен быть ≤ 2,5 секунды.
• INP: должен быть ≤ 200 миллисекунд.
• CLS: должен быть ≤ 0,1.

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

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

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

Полевые данные (реальные пользователи)

• Chrome User Experience Report (CrUX): предоставляет агрегированные данные реальных пользователей для вашего источника. Доступ через PageSpeed Insights или панель CrUX.
• Библиотека JavaScript 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);

Лабораторные данные (синтетические)

• Lighthouse: встроен в Chrome DevTools, проверяет производительность и выставляет оценку.
• WebPageTest: для более глубокого анализа с эмуляцией сети.

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

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

LCP измеряет, когда самый большой элемент контента (обычно главное изображение или заголовок) становится видимым. Чтобы улучшить его:

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

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

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

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

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

Также убедитесь, что вы не блокируете основной поток сторонними скриптами. Регулярно проверяйте их.

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

CLS измеряет неожиданные сдвиги макета. Чтобы он оставался низким:

1. Устанавливайте атрибуты размера: всегда указывайте width и height для изображений и видео.
2. Резервируйте место для динамического контента: используйте CSS aspect-ratio или заполнители для рекламы и встраиваемых элементов.
3. Избегайте вставки контента над существующим: кроме случаев реакции на взаимодействие с пользователем.
4. Используйте анимации transform: предпочитайте transform и opacity для анимаций вместо свойств, вызывающих перекомпоновку.

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

Вот простой рабочий процесс для постоянного мониторинга и улучшения CWV:

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

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

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

LCP ≤ 2,5 с, INP ≤ 200 мс, CLS ≤ 0,1, измеряемые на 75-м процентиле загрузок страниц.

Как часто следует проверять Core Web Vitals?

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

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

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

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