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

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

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

Core Web Vitals — это три конкретные метрики, которые Google использует для оценки опыта страницы:

• Largest Contentful Paint (LCP): Измеряет производительность загрузки. Отслеживает время, за которое самый большой элемент контента (изображение, видео или текстовый блок) становится видимым. Хороший LCP — 2,5 секунды или меньше.
• Interaction to Next Paint (INP): Измеряет интерактивность. Записывает задержку всех взаимодействий (клики, касания, нажатия клавиш) и сообщает высокий процентиль. Хороший INP — 200 миллисекунд или меньше.
• Cumulative Layout Shift (CLS): Измеряет визуальную стабильность. Количественно оценивает неожиданные сдвиги макета во время загрузки. Хороший CLS — 0,1 или меньше.

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

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

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

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

• Lighthouse: Встроен в Chrome DevTools, проверяет производительность и предоставляет оценки для LCP, CLS и TBT (прокси для INP). Запускайте его в режиме инкогнито с троттлингом, чтобы имитировать мобильные условия.
• WebPageTest: Предлагает расширенное тестирование из нескольких мест и на разных устройствах, с покадровым просмотром и диаграммами водопада.
• PageSpeed Insights: Объединяет лабораторные и полевые данные (из CrUX) в одном отчёте.

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

• Chrome User Experience Report (CrUX): Публичный набор данных о метриках реальных пользователей для миллионов сайтов. Доступен через PageSpeed Insights или CrUX API.
• Google Search Console: Показывает статус Core Web Vitals для вашего сайта, сгруппированный по URL.
• Библиотека web-vitals JavaScript: Добавьте её на свой сайт, чтобы собирать метрики реальных пользователей и отправлять их в вашу аналитику.

Используйте лабораторные инструменты для отладки, а полевые данные для проверки исправлений. Распространённая ошибка — оптимизация только для лабораторных оценок, игнорируя реальный пользовательский опыт.

Улучшение LCP

LCP часто является наиболее важной метрикой для исправления. Вот как её оптимизировать:

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

Для подробного примера рассмотрим главное изображение. Вместо того чтобы отдавать JPEG размером 2 МБ, сожмите его до менее чем 200 КБ, конвертируйте в WebP и предзагрузите. Это одно может сократить LCP на секунды.

Улучшение INP

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

1. Разбивайте длительные задачи: Используйте setTimeout или requestIdleCallback, чтобы уступить основному потоку.
2. Оптимизируйте обработчики событий: Применяйте debounce или throttle для частых событий, таких как прокрутка или изменение размера. Избегайте тяжёлых вычислений в обработчиках.
3. Сократите выполнение JavaScript: Разделяйте код, удаляйте неиспользуемый код и лениво загружайте некритический JS.
4. Используйте веб-воркеры: Перекладывайте дорогостоящие задачи на рабочий поток.
5. Минимизируйте сторонние скрипты: Проверьте и удалите ненужную аналитику, рекламу или социальные виджеты.

Проверьте INP, взаимодействуя со страницей в панели Performance Chrome DevTools. Ищите длительные задачи (красные треугольники) и оптимизируйте их.

Улучшение CLS

CLS — это визуальная стабильность. Неожиданные сдвиги раздражают пользователей и вызывают ошибочные клики.

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

Используйте функцию Layout Shift Regions в Chrome DevTools для визуализации сдвигов.

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

Интегрируйте мониторинг Core Web Vitals в ваш процесс разработки:

• Запускайте Lighthouse в CI, чтобы ловить регрессии.
• Используйте библиотеку web-vitals для сбора полевых данных и настройки оповещений.
• Регулярно проверяйте Search Console на наличие проблем.
• Расставляйте приоритеты исправлений в зависимости от влияния и усилий.

Помните, что Core Web Vitals — это лишь часть производительности. Всегда учитывайте общий пользовательский опыт.

FAQ

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

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

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

Мониторьте полевые данные непрерывно и запускайте лабораторные тесты после значительных изменений. Как минимум проверяйте ежемесячно и после развёртываний.

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

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

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