Core Web Vitals: измерение и улучшение веб-производительности
Почему Core Web Vitals важны
Вы создали быстрый сайт, но пользователи всё ещё жалуются на медленную загрузку или подтормаживающие взаимодействия. Поисковые системы также могут понизить ваш рейтинг, если показатели Core Web Vitals (CWV) плохие. CWV — это набор метрик, которые Google использует для количественной оценки пользовательского опыта: Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). В 2021 году Google сделал эти метрики фактором ранжирования, поэтому их игнорирование может навредить вашему SEO и удержанию пользователей.
Это руководство объясняет, как измерять каждую метрику, выявлять типичные проблемы и применять практические исправления. Мы сосредоточимся на конкретных шагах, которые вы можете предпринять сегодня, не углубляясь во все крайние случаи.
Понимание трёх основных Core Web Vitals
Прежде чем оптимизировать, узнайте, что измеряет каждая метрика и её пороговые значения.
| Метрика | Что измеряет | Хорошо | Требует улучшения | Плохо |
|---|---|---|---|---|
| LCP | Производительность загрузки: время до отрисовки самого большого элемента контента. | ≤ 2.5с | 2.5с – 4.0с | > 4.0с |
| FID | Интерактивность: время от первого взаимодействия пользователя до ответа браузера. | ≤ 100мс | 100мс – 300мс | > 300мс |
| CLS | Визуальная стабильность: неожиданные сдвиги макета. | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Примечание: FID заменяется на Interaction to Next Paint (INP) в марте 2024 года, но принципы оптимизации схожи. Здесь мы сосредоточимся на FID, так как он всё ещё широко упоминается.
Как измерять Core Web Vitals
Вам нужны как лабораторные, так и полевые данные. Лабораторные данные (синтетические) помогают отлаживать; полевые данные (реальные пользователи) показывают фактическую производительность.
Лабораторные инструменты
- Lighthouse в Chrome DevTools: запускает аудиты производительности, доступности и SEO. Он сообщает LCP, CLS и TBT (прокси для FID).
- WebPageTest: продвинутое тестирование с раскадровкой и диаграммами водопада.
- PageSpeed Insights: объединяет лабораторные и полевые данные (если доступны).
Полевые инструменты
- Chrome User Experience Report (CrUX): публичный набор данных о метриках реальных пользователей. Доступ через PageSpeed Insights или BigQuery.
- Библиотека web-vitals JavaScript: сбор метрик реальных пользователей в вашей аналитике.
- Отчёт Core Web Vitals в Search Console: показывает группы URL с проблемами.
Начните с PageSpeed Insights, чтобы получить быстрый обзор, затем используйте Lighthouse для детальной диагностики.
Улучшение Largest Contentful Paint (LCP)
LCP часто страдает из-за медленного ответа сервера, блокирующих рендеринг ресурсов или неоптимизированных изображений. Выполните следующие шаги:
- Оптимизируйте время ответа сервера: используйте кэширование, CDN и эффективный серверный код. Стремитесь к Time to First Byte (TTFB) менее 0.8с.
- Устраните блокирующие рендеринг ресурсы: встройте критический CSS, отложите некритический CSS и JavaScript. Используйте
asyncилиdeferдля скриптов. - Оптимизируйте изображения: сжимайте изображения, используйте современные форматы (WebP, AVIF) и внедряйте адаптивные изображения с
srcset. Для LCP-изображения предзагрузите его с помощью<link rel="preload">. - Используйте CDN: отдавайте статические ресурсы из граничных точек.
- Кэшируйте ресурсы: устанавливайте длительное время кэширования для статических ресурсов.
Пример: предзагрузите LCP-изображение и задайте явные размеры, чтобы избежать сдвигов макета.
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">Улучшение First Input Delay (FID)
FID измеряет отзывчивость. Длительные задачи JavaScript блокируют основной поток, задерживая взаимодействия. Чтобы улучшить FID:
- Разбивайте длительные задачи: используйте
setTimeoutилиrequestIdleCallback, чтобы уступить основному потоку. - Минимизируйте работу основного потока: сократите время выполнения JavaScript, избегайте больших бандлов и используйте разделение кода.
- Оптимизируйте обработчики событий: применяйте debounce или throttle для дорогих обработчиков.
- Используйте веб-воркеры для ресурсоёмких задач.
- Избегайте больших сторонних скриптов: проверяйте и удаляйте ненужные скрипты.
Инструменты вроде Lighthouse отмечают длительные задачи. Используйте панель Performance в Chrome DevTools, чтобы их идентифицировать.
Улучшение Cumulative Layout Shift (CLS)
CLS измеряет визуальную стабильность. Сдвиги макета происходят, когда элементы неожиданно меняют положение. Распространённые причины и исправления:
- Изображения без размеров: всегда задавайте атрибуты
widthиheightили используйте CSSaspect-ratio. - Реклама, встраиваемые элементы и iframe: резервируйте место с помощью плейсхолдера или задавайте фиксированные размеры.
- Динамический контент: избегайте вставки контента над существующим контентом, если это не ответ на взаимодействие с пользователем.
- Веб-шрифты: используйте
font-display: swapи предзагружайте шрифты, чтобы избежать невидимого текста (FOIT) и сдвигов макета. - Анимации: предпочитайте CSS
transformиopacityдля анимаций, так как они не вызывают перестройку макета.
Тестируйте с помощью Layout Instability API в DevTools или используйте библиотеку web-vitals для логирования CLS в полевых условиях.
Практический рабочий процесс для непрерывного мониторинга
Оптимизация — это не разовая задача. Настройте мониторинг:
- Оснастите свой сайт библиотекой
web-vitalsи отправляйте метрики в вашу аналитическую платформу. - Настройте оповещения, когда метрики превышают пороговые значения.
- Регулярно запускайте Lighthouse в CI/CD, чтобы ловить регрессии.
- Используйте Search Console для отслеживания трендов полевых данных.
Помните, что для ранжирования важны полевые данные. Лабораторные данные помогают отлаживать, но всегда проверяйте с реальными пользователями.
Часто задаваемые вопросы
Каковы текущие пороговые значения для Core Web Vitals?
По состоянию на 2023 год пороги таковы: LCP хорошо ≤2.5с, требует улучшения 2.5с–4.0с, плохо >4.0с; FID хорошо ≤100мс, требует улучшения 100мс–300мс, плохо >300мс; CLS хорошо ≤0.1, требует улучшения 0.1–0.25, плохо >0.25. Обратите внимание, что FID заменяется на INP в 2024 году.
Как часто следует измерять Core Web Vitals?
Непрерывно отслеживайте полевые данные через аналитику и запускайте лабораторные тесты (например, Lighthouse) при каждом развёртывании или как минимум еженедельно. Крупные изменения должны запускать новый аудит.
Можно ли улучшить Core Web Vitals без разработчика?
Некоторые исправления, такие как сжатие изображений или включение кэширования, можно выполнить через плагины или настройки хостинга. Однако более глубокая оптимизация (например, разделение кода, критический CSS) обычно требует работы разработчика.
Готовы оптимизировать изображения для лучшего LCP? Попробуйте наш бесплатный Image Compressor, чтобы уменьшить размер файлов без потери качества.