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 с, Требует улучшения: ≤4 с, Плохо: >4 с.
• INP: время от взаимодействия пользователя (клик, нажатие, ввод с клавиатуры) до отрисовки следующего кадра. Хорошо: ≤200 мс, Требует улучшения: ≤500 мс, Плохо: >500 мс.
• CLS: сумма оценок сдвига макета для неожиданного визуального перемещения. Хорошо: ≤0,1, Требует улучшения: ≤0,25, Плохо: >0,25.

Эти пороги основаны на 75-м процентиле загрузок страниц, сегментированных по мобильным и настольным устройствам.

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

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

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

• Lighthouse (в Chrome DevTools или PageSpeed Insights): проверяет LCP, CLS и общее время блокировки (прокси для INP).
• WebPageTest: расширенный анализ раскадровки и водопада.
• Панель Performance в Chrome DevTools: записывайте взаимодействия, чтобы выявить длинные задачи, влияющие на INP.

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

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

Установите библиотеку web-vitals через npm или подключите её с CDN, затем логируйте метрики:

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);

Используйте sendBeacon, чтобы избежать блокировки при выгрузке. Собирайте данные с течением времени, чтобы видеть тенденции.

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

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

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

Пример: предзагрузите изображение LCP и установите fetchpriority:

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

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

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

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

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

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

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

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

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

Пример: задайте соотношение сторон для адаптивных изображений:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

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

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

1. Измерьте базовый уровень: запустите Lighthouse и соберите полевые данные через web-vitals.
2. Выявите узкие места: используйте панель Performance и водопад сети.
3. Расставьте приоритеты исправлений: сосредоточьтесь на метрике с худшим показателем.
4. Внедрите изменения: оптимизируйте изображения, отложите скрипты, задайте размеры.
5. Тестируйте и отслеживайте: повторно запускайте лабораторные тесты и отслеживайте полевые данные с течением времени.

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

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

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

Хорошо: LCP ≤2,5 с, INP ≤200 мс, CLS ≤0,1. Требует улучшения: LCP ≤4 с, INP ≤500 мс, CLS ≤0,25. Плохо: выше этих значений. Оценка производится по 75-му процентилю загрузок страниц.

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

Отслеживайте полевые данные непрерывно и запускайте лабораторные аудиты после значительных изменений. Как минимум, просматривайте отчет Core Web Vitals в Search Console ежемесячно и после развертываний, влияющих на производительность фронтенда.

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

Да. Многие улучшения носят технический характер: сжимайте изображения, задавайте атрибуты width/height, откладывайте некритичный JavaScript и разбивайте длинные задачи. Эти изменения часто дают значительный прирост без визуального редизайна.

Готовы оптимизировать изображения для лучшего LCP? Используйте наш бесплатный Image Compressor, чтобы уменьшить изображения, сохраняя качество, и повысить показатели Core Web Vitals.