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

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

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

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

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

Эти метрики являются частью сигнала Google Page Experience, поэтому их оптимизация может улучшить как удовлетворённость пользователей, так и позиции в поиске.

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

Прежде чем улучшать, нужно измерить. Существует два основных типа инструментов: лабораторные (синтетическое тестирование) и полевые (мониторинг реальных пользователей).

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

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

• Lighthouse: встроен в Chrome DevTools, проверяет производительность, доступность и SEO. Предоставляет оценки и конкретные возможности для улучшения.
• WebPageTest: позволяет тестировать из разных мест и на разных устройствах с расширенными метриками и раскадровкой.

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

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

• Chrome User Experience Report (CrUX): публичный набор данных о метриках реальных пользователей из Chrome. Вы можете просматривать данные CrUX в PageSpeed Insights или BigQuery.
• Google Search Console: предоставляет отчёт о Core Web Vitals, показывающий, как ваши страницы работают на основе данных CrUX.
• Библиотека Web Vitals JavaScript: вы можете настроить свой сайт для отправки данных Core Web Vitals в вашу аналитическую платформу.

Начните с проверки Core Web Vitals вашего сайта в Search Console или PageSpeed Insights. Затем используйте Lighthouse для отладки конкретных страниц.

Улучшение Largest Contentful Paint (LCP)

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

1. Оптимизируйте изображения

• Сжимайте изображения без потери качества. Используйте такие инструменты, как Image Compressor, чтобы уменьшить размер файлов.
• Используйте современные форматы, такие как WebP или AVIF, которые обеспечивают лучшее сжатие, чем JPEG или PNG.
• Внедрите адаптивные изображения с атрибутами srcset и sizes, чтобы подавать изображения подходящего размера.
• Включите ленивую загрузку изображений ниже первого экрана, но избегайте ленивой загрузки LCP-изображения.

2. Устраните ресурсы, блокирующие рендеринг

• Минифицируйте CSS и JavaScript.
• Отложите некритичный JavaScript с помощью атрибутов defer или async.
• Встройте критический CSS и загружайте остальной асинхронно.

3. Улучшите время ответа сервера

• Используйте сеть доставки контента (CDN) для подачи ресурсов из мест, ближайших к пользователям.
• Включите кэширование для статических ресурсов и ответов API.
• Оптимизируйте запросы к базе данных и серверный код.

4. Предзагружайте важные ресурсы

Используйте <link rel="preload"> для критических ресурсов, таких как шрифты, ключевые изображения или скрипты, которые обнаруживаются поздно.

Улучшение First Input Delay (FID)

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

1. Разбивайте длинные задачи

Длинные задачи JavaScript блокируют основной поток. Разбивайте их на более мелкие задачи с помощью setTimeout или requestIdleCallback.

2. Оптимизируйте выполнение JavaScript

• Удалите неиспользуемый JavaScript (tree shaking).
• Разделите код (code splitting) так, чтобы изначально загружался только необходимый код.
• Используйте веб-воркеры для тяжёлых вычислений.

3. Избегайте больших сторонних скриптов

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

4. Сократите время загрузки JavaScript

Минимизируйте объём JavaScript, который нужно разобрать и выполнить при загрузке страницы. Серверный рендеринг или генерация статических сайтов могут помочь.

Улучшение Cumulative Layout Shift (CLS)

CLS измеряет визуальную стабильность. Сдвиги макета происходят, когда элементы неожиданно меняют положение.

1. Всегда указывайте размеры для медиа

Для изображений и видео задавайте атрибуты width и height или используйте CSS aspect-ratio, чтобы зарезервировать место.

2. Резервируйте место для рекламы и встраиваемых элементов

Если у вас есть динамический контент, такой как реклама или iframe, зарезервируйте для него место с помощью заполнителя или фиксированных размеров.

3. Избегайте вставки контента над существующим

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

4. Используйте font-display: swap

Пользовательские шрифты могут вызывать FOIT (Flash of Invisible Text) или FOUT (Flash of Unstyled Text). Используйте font-display: swap, чтобы немедленно показывать резервный текст.

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

Практический пример: оптимизация изображения для LCP

Предположим, ваш LCP-элемент — это главное изображение. Вот как его оптимизировать:

<!-- До: неоптимизированное -->
<img src="#" alt="Hero">

<!-- После: оптимизированное -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">

Используйте Image Compressor, чтобы конвертировать и сжать изображение в WebP. Установите fetchpriority="high", чтобы сообщить браузеру о необходимости загрузить его раньше. Укажите размеры, чтобы предотвратить сдвиг макета.

Мониторинг Core Web Vitals с течением времени

Оптимизация — это не разовая задача. Настройте непрерывный мониторинг:

• Используйте библиотеку web-vitals для отправки метрик в вашу аналитику.
• Настройте оповещения в Search Console о регрессиях.
• Регулярно проводите аудит с помощью Lighthouse в вашем CI/CD конвейере.

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

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

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

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

Проверяйте после крупных развёртываний и следите непрерывно через полевые данные. Search Console предоставляет ежемесячный отчёт, но вы можете использовать библиотеку web-vitals для отслеживания в реальном времени.

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

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

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