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

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

Это руководство покажет, как точно измерять CWV и исправлять самые распространённые проблемы. Без лишних слов — только конкретные шаги.

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

Core Web Vitals — это три конкретные метрики, которые количественно оценивают восприятие пользователями загрузки, интерактивности и визуальной стабильности:

• LCP измеряет скорость загрузки. Он отмечает момент, когда самый крупный элемент контента (изображение, видео, текстовый блок) становится видимым. Целевое значение — ≤ 2,5 секунды.
• INP измеряет отзывчивость. Он фиксирует задержку всех взаимодействий (клики, нажатия, ввод с клавиатуры) и сообщает значение высокого процентиля. Целевое значение — ≤ 200 миллисекунд.
• CLS измеряет визуальную стабильность. Он рассчитывает неожиданные сдвиги макета. Целевое значение — ≤ 0,1.

Эти пороги основаны на данных реальных пользователей из Chrome User Experience Report (CrUX). Их соблюдение повышает удовлетворённость пользователей и может улучшить позиции в поиске.

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

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

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

• Lighthouse (в Chrome DevTools или CI) даёт снимок с диагностикой.
• PageSpeed Insights объединяет лабораторные и полевые данные для URL.
• Web Vitals Extension выводит CWV в консоль Chrome во время просмотра.

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

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

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

Улучшение LCP

LCP часто проще всего улучшить с помощью нескольких целевых исправлений.

1. Оптимизируйте изображения. Используйте современные форматы (WebP, AVIF), сжимайте без видимой потери качества и задавайте явные ширину/высоту. Такие инструменты, как Image Compressor, помогут уменьшить размер файла.
2. Предзагружайте LCP-изображение. Добавьте <link rel="preload" as="image" href="#"> в head.
3. Устраните ресурсы, блокирующие рендеринг. Встраивайте критический CSS, откладывайте некритический CSS/JS и избегайте синхронных скриптов в head.
4. Используйте CDN. Отдавайте ресурсы из точки, близкой к пользователю, чтобы снизить задержку.
5. Включите сжатие текста. Brotli или gzip для HTML, CSS, JS.

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

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

Улучшение INP

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

1. Разбивайте долгие задачи. Используйте setTimeout или requestIdleCallback, чтобы уступить главному потоку.
2. Оптимизируйте обработчики событий. Применяйте debounce или throttle для высокочастотных событий, таких как scroll и resize.
3. Сократите JavaScript. Разделяйте код, применяйте tree-shaking и ленивую загрузку некритических скриптов.
4. Используйте web workers для тяжёлых вычислений.
5. Избегайте больших размеров DOM. По возможности держите DOM менее 1500 узлов.

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

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Улучшение CLS

Сдвиги макета происходят, когда элементы неожиданно меняют положение. Распространённые причины: изображения без размеров, реклама, встраиваемые элементы и динамически добавляемый контент.

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

Мониторинг и непрерывное улучшение

Производительность — это не разовое исправление. Настройте мониторинг, чтобы ловить регрессии.

• Используйте библиотеку web-vitals для отправки CWV в вашу аналитику:

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 в CI для каждого pull request.
• Ежемесячно просматривайте данные CrUX для отслеживания тенденций.

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

FAQ

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

LCP: хорошо ≤ 2,5 с, требует улучшения ≤ 4,0 с, плохо > 4,0 с. INP: хорошо ≤ 200 мс, требует улучшения ≤ 500 мс, плохо > 500 мс. CLS: хорошо ≤ 0,1, требует улучшения ≤ 0,25, плохо > 0,25.

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

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

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

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

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