Core Web Vitals: измерение и улучшение веб-производительности
Вы создали быстрый сайт, но пользователи всё ещё жалуются на медленную работу. Или, возможно, ваши позиции в SEO не растут, несмотря на отличный контент. Виноваты могут быть Core Web Vitals — метрики Google для оценки пользовательского опыта. В этом руководстве вы узнаете, что это такое, как их измерять и какие практические шаги помогут улучшить каждую из них.
Что такое Core Web Vitals?
Core Web Vitals — это три конкретные метрики, которые Google использует для количественной оценки пользовательского опыта:
- Largest Contentful Paint (LCP): Измеряет производительность загрузки. Она должна происходить в течение 2,5 секунд с момента начала загрузки страницы.
- Interaction to Next Paint (INP): Измеряет отзывчивость. Она должна быть менее 200 миллисекунд для 75% посещений страницы.
- Cumulative Layout Shift (CLS): Измеряет визуальную стабильность. Она должна быть менее 0,1.
Эти метрики являются частью сигналов опыта страницы Google и могут влиять на ваши позиции в поиске. Что важнее, они отражают реальный пользовательский опыт — медленные сайты раздражают посетителей и заставляют их уходить.
Как измерять Core Web Vitals
Нельзя улучшить то, что не измеряешь. Существует два основных типа инструментов: лабораторные (синтетическое тестирование) и полевые (мониторинг реальных пользователей).
Лабораторные инструменты
- Lighthouse: Встроен в Chrome DevTools (вкладка Audits). Предоставляет оценку и конкретные возможности для улучшения.
- PageSpeed Insights: Веб-инструмент, объединяющий лабораторные и полевые данные.
- WebPageTest: Расширенное тестирование с настраиваемыми локациями и устройствами.
Полевые инструменты
- Chrome User Experience Report (CrUX): Реальные данные от пользователей Chrome, доступные через PageSpeed Insights или BigQuery.
- Библиотека web-vitals: JavaScript-библиотека для измерения метрик в вашей собственной аналитике.
- Search Console: Отчёт Core Web Vitals показывает производительность группы на основе данных CrUX.
Начните с PageSpeed Insights, чтобы получить быстрый обзор, затем используйте библиотеку web-vitals для отслеживания метрик реальных пользователей с течением времени.
Улучшение LCP (Largest Contentful Paint)
LCP — это обычно самое большое изображение или текстовый блок в верхней части страницы. Чтобы улучшить его:
- Оптимизируйте изображения: Сжимайте изображения, используйте современные форматы, такие как WebP или AVIF, и подавайте адаптивные изображения с помощью
srcset. - Предзагружайте критически важные ресурсы: Используйте
<link rel="preload">для главных изображений и шрифтов. - Устраните ресурсы, блокирующие рендеринг: Встраивайте критический CSS, откладывайте некритический CSS и JavaScript.
- Используйте CDN: Отдавайте ресурсы из мест, более близких к пользователям.
- Включите кэширование: Установите длительное время кэширования для статических ресурсов.
Для изображений такие инструменты, как Image Compressor от TryQuickToolBox, могут помочь уменьшить размер файлов без видимой потери качества.
Улучшение INP (Interaction to Next Paint)
INP измеряет время от взаимодействия пользователя (клик, нажатие, ввод с клавиатуры) до следующего визуального обновления. Чтобы улучшить его:
- Сократите время выполнения JavaScript: Разбивайте длинные задачи, используйте
requestIdleCallbackилиsetTimeout, чтобы уступить главному потоку. - Избегайте больших размеров DOM: Держите DOM в пределах 1500 узлов и глубину менее 32 уровней.
- Оптимизируйте обработчики событий: Применяйте debounce или throttle для частых событий, таких как прокрутка и изменение размера.
- Используйте веб-воркеры: Переносите тяжёлые вычисления из главного потока.
- Минимизируйте сторонние скрипты: Они часто блокируют главный поток.
Используйте панель Performance в Chrome DevTools, чтобы выявить длинные задачи и оптимизировать их.
Улучшение CLS (Cumulative Layout Shift)
CLS измеряет неожиданные сдвиги макета. Чтобы уменьшить его:
- Всегда указывайте атрибуты width и height для изображений и видео: Это резервирует место.
- Резервируйте место для рекламы и встраиваемых элементов: Используйте CSS
aspect-ratioили фиксированные размеры. - Избегайте вставки контента над существующим контентом: Кроме случаев, когда это ответ на действие пользователя.
- Используйте font-display: swap: Предотвращает невидимый текст, но может вызвать небольшие сдвиги; рассмотрите
font-display: optionalдля критического текста. - Осторожно с динамическим контентом: Загружайте его ниже сгиба или анимируйте переходы плавно.
Сравнение метрик Core Web Vitals
| Метрика | Что измеряет | Хороший порог | Основные причины плохих показателей |
|---|---|---|---|
| LCP | Производительность загрузки | ≤ 2,5 с | Медленный сервер, ресурсы, блокирующие рендеринг, большие изображения |
| INP | Отзывчивость | ≤ 200 мс | Длинные задачи, тяжёлый JavaScript, большой DOM |
| CLS | Визуальная стабильность | ≤ 0,1 | Изображения без размеров, динамический контент, веб-шрифты |
Инструменты и методы для постоянного мониторинга
Улучшение Core Web Vitals — это не разовая задача. Настройте непрерывный мониторинг:
- Используйте библиотеку
web-vitalsдля отправки метрик в вашу аналитическую платформу. - Настройте оповещения, когда метрики превышают пороговые значения.
- Регулярно запускайте Lighthouse в CI/CD, чтобы ловить регрессии.
- Отслеживайте данные CrUX в Search Console для тенденций реальных пользователей.
Для быстрой проверки используйте вкладку Lighthouse в Chrome DevTools или PageSpeed Insights после каждого значительного изменения.
FAQ
Что такое Core Web Vitals и почему они важны?
Core Web Vitals — это три метрики (LCP, INP, CLS), которые измеряют загрузку, интерактивность и визуальную стабильность. Они важны, потому что отражают реальный пользовательский опыт и используются Google в качестве сигнала ранжирования.
Как часто следует измерять Core Web Vitals?
Измеряйте после каждого крупного изменения кода и настройте непрерывный полевой мониторинг для отслеживания метрик реальных пользователей с течением времени. Лабораторные инструменты, такие как Lighthouse, хороши для быстрых проверок, но полевые данные показывают фактический пользовательский опыт.
Можно ли улучшить Core Web Vitals без разработчика?
Некоторые улучшения, например сжатие изображений, можно сделать с помощью инструментов, но большинство требуют изменений в коде (например, добавление атрибутов width/height, оптимизация JavaScript). Обычно нужен разработчик или человек, знакомый с веб-производительностью.
Готовы оптимизировать изображения для лучшего LCP? Попробуйте наш бесплатный Image Compressor, чтобы уменьшить размер файлов без потери качества.