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

Ваши пользователи нетерпеливы. Если сайт загружается дольше нескольких секунд, они уходят. Поисковые системы тоже это замечают: Core Web Vitals являются сигналами ранжирования. Но их улучшение кажется лабиринтом из метрик и инструментов. Это руководство поможет разобраться. Вы узнаете, что означает каждая метрика, как точно её измерять и какие конкретные шаги предпринять для улучшения.

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

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

• Largest Contentful Paint (LCP): сколько времени проходит до загрузки основного контента. Цель: менее 2,5 секунд.
• Interaction to Next Paint (INP): как быстро страница реагирует на ввод пользователя. Цель: менее 200 миллисекунд.
• Cumulative Layout Shift (CLS): насколько сильно смещается макет во время загрузки. Цель: менее 0,1.

Эти метрики измеряются по реальным сессиям пользователей (полевые данные) и синтетическим тестам (лабораторные данные). Для ранжирования важны полевые данные.

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

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

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

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

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

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

Это даёт вам непрерывный поток метрик реальных пользователей.

Улучшение LCP

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

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

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

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

Улучшение INP

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

• Разбивайте долгие задачи: используйте setTimeout или requestIdleCallback, чтобы уступать главному потоку.
• Оптимизируйте обработчики событий: применяйте debounce или throttle для дорогих обработчиков.
• Сократите JavaScript: удалите неиспользуемый код, разделите код и лениво загружайте некритические модули.
• Используйте web workers для тяжёлых вычислений.
• Избегайте больших размеров 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

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

• Всегда задавайте ширину и высоту для изображений и видео.
• Резервируйте место для рекламы и встраиваемых элементов с помощью CSS aspect-ratio или фиксированных контейнеров.
• Не вставляйте контент выше существующего, если это не вызвано взаимодействием с пользователем.
• Используйте font-display: optional, чтобы избежать сдвигов при подмене шрифта, или предзагружайте шрифты.
• Применяйте анимации transform вместо свойств, вызывающих перерасчёт макета.

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

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

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

Интегрируйте проверки производительности в процесс разработки:

• Запускайте Lighthouse в CI, чтобы ловить регрессии.
• Используйте web-vitals для мониторинга полевых данных и настройте оповещения.
• Анализируйте серверные логи, чтобы выявлять медленные эндпоинты. Nginx Log Analyzer поможет найти медленные запросы и ошибки.
• Тестируйте на реальных устройствах и сетях с ограничением пропускной способности.

Сравнение метрик и целевых значений

FAQ

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

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

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

Используйте лабораторные инструменты, такие как Lighthouse, для отладки и полевые инструменты, такие как библиотека web-vitals или CrUX, для данных реальных пользователей. Оба подхода важны.

Какой показатель LCP считается хорошим?

Хороший LCP — менее 2,5 секунд. Всё, что выше 4 секунд, — плохо. Оптимизируйте изображения, предзагружайте критически важные ресурсы и сокращайте время ответа сервера.

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