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

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

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

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

• Largest Contentful Paint (LCP): время до отрисовки самого большого видимого элемента (например, главного изображения или заголовка). Хорошо: ≤2,5 с.
• First Input Delay (FID): время от первого взаимодействия пользователя (например, клика по ссылке) до ответа браузера. Хорошо: ≤100 мс.
• Cumulative Layout Shift (CLS): измеряет визуальную стабильность — насколько сильно элементы неожиданно смещаются. Хорошо: ≤0,1.

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

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

Вам нужны как лабораторные, так и полевые данные. Лабораторные данные (например, Lighthouse) помогают отлаживать, а полевые данные (мониторинг реальных пользователей) показывают фактическую производительность.

1. Используйте Chrome UX Report (CrUX)

CrUX предоставляет агрегированные данные реальных пользователей для миллионов сайтов. Вы можете просмотреть их в PageSpeed Insights или в CrUX Dashboard. Он показывает распределение LCP, FID и CLS для вашего origin.

2. Настройте мониторинг реальных пользователей (RUM)

Инструменты вроде Google Analytics 4, Vercel Analytics или библиотеки с открытым исходным кодом (web-vitals) позволяют собирать Core Web Vitals от реальных посетителей. Вот как отправить метрики на ваш аналитический эндпоинт:

import {onLCP, onFID, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);

Этот фрагмент использует библиотеку web-vitals для захвата метрик и отправки их через sendBeacon без влияния на загрузку страницы.

3. Используйте Lighthouse для лабораторного тестирования

Lighthouse (в Chrome DevTools или PageSpeed Insights) имитирует загрузку страницы и сообщает Core Web Vitals, а также возможности для улучшения. Запускайте его на ключевых страницах и отслеживайте изменения с течением времени.

Улучшение LCP

LCP часто является наиболее важной метрикой. Чтобы улучшить её:

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

Например, предзагрузите главное изображение:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

Улучшение FID

FID измеряет отзывчивость на ввод. Чтобы улучшить её:

• Разбивайте длинные задачи: используйте setTimeout или requestIdleCallback, чтобы уступить главному потоку.
• Минимизируйте работу главного потока: сократите время выполнения JavaScript, избегайте больших бандлов.
• Используйте веб-воркеры для тяжёлых вычислений.
• Оптимизируйте обработчики событий: применяйте debounce или throttle для частых событий.

Также рассмотрите переход на Interaction to Next Paint (INP), который заменит FID в 2024 году. INP измеряет все взаимодействия, поэтому те же оптимизации применимы.

Улучшение CLS

CLS связан с визуальной стабильностью. Распространённые причины и исправления:

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

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

<img src="#" width="800" height="600" alt="...">

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

Инструменты для постоянного мониторинга

Улучшение Core Web Vitals — не разовая задача. Настройте дашборды для отслеживания полевых данных. Используйте:

• Google Search Console: отчёт Core Web Vitals показывает группы URL, требующие внимания.
• PageSpeed Insights: объединяет лабораторные и полевые данные.
• Расширение Web Vitals: метрики в реальном времени при просмотре.
• Инструменты RUM: такие как SpeedCurve, Calibre или альтернативы с открытым исходным кодом.

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

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

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

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

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

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

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

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

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