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