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

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

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

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

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

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

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

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

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

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

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

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

Вот как использовать библиотеку web-vitals для логирования метрик:

import {getLCP, getFID, getCLS} from 'web-vitals';

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

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

Улучшение LCP

LCP часто является самой сложной метрикой. Сосредоточьтесь на следующих областях:

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

Улучшение FID

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

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

Улучшение CLS

CLS вызывается сдвигом элементов во время загрузки. Предотвратите это так:

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

Сравнение метрик Core Web Vitals

Практический рабочий процесс улучшения Core Web Vitals

Следуйте этому пошаговому процессу:

1. Измерьте: Используйте PageSpeed Insights, чтобы получить базовые значения как лабораторных, так и полевых данных.
2. Определите проблемы: Изучите возможности и диагностику в Lighthouse.
3. Расставьте приоритеты: Сначала сосредоточьтесь на метрике с худшим результатом.
4. Внедрите исправления: Примените оптимизации, перечисленные выше.
5. Протестируйте: Перезапустите Lighthouse и проверьте полевые данные после развёртывания.
6. Мониторьте: Настройте мониторинг реальных пользователей с помощью библиотеки web-vitals и отслеживайте во времени.

FAQ

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

Для LCP: хорошо — ≤ 2,5 с, требует улучшения — ≤ 4 с, плохо — > 4 с. Для FID: хорошо — ≤ 100 мс, требует улучшения — ≤ 300 мс, плохо — > 300 мс. Для CLS: хорошо — ≤ 0,1, требует улучшения — ≤ 0,25, плохо — > 0,25.

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

Мониторьте полевые данные непрерывно и запускайте лабораторные тесты после значительных изменений. Google обновляет данные CrUX ежемесячно, поэтому регулярно проверяйте Search Console.

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

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

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