Три кита Core Web Vitals: разбираем метрики
1. LCP (Largest Contentful Paint) — Скорость загрузки основного контента
- Что это: Время, которое требуется браузеру для отрисовки самого большого видимого элемента на экране. Обычно это главный баннер, крупное изображение товара или заголовок H1.
- Нормативы:
- 🟢 Хорошо: до 2.5 секунд.
- 🟡 Требует улучшения: 2.5 – 4.0 секунды.
- 🔴 Плохо: более 4.0 секунд.
- Как воспринимает пользователь: «Как быстро я увижу, что на этой странице есть то, что я ищу?»
2. INP (Interaction to Next Paint) — Отзывчивость при взаимодействии
- Что это: Новая ключевая метрика, заменившая FID. Она измеряет задержку между любым взаимодействием пользователя (клик, нажатие на экран, ввод текста) и визуальным откликом страницы. В отличие от FID, которая замеряла только первый клик, INP оценивает отзывчивость на протяжении всего сеанса.
- Нормативы:
- 🟢 Хорошо: до 200 миллисекунд.
- 🟡 Требует улучшения: 200 – 500 миллисекунд.
- 🔴 Плохо: более 500 миллисекунд.
- Как воспринимает пользователь: «Зависает ли сайт, когда я нажимаю кнопку "Добавить в корзину" или открываю меню?»
3. CLS (Cumulative Layout Shift) — Кумулятивный сдвиг макета
- Что это: Показатель визуальной стабильности. Он рассчитывает, насколько сильно «прыгает» контент во время загрузки страницы (например, когда текст резко сдвигается вниз из-за того, что сверху прогрузился баннер).
- Нормативы:
- 🟢 Хорошо: до 0.1.
- 🟡 Требует улучшения: 0.1 – 0.25.
- 🔴 Плохо: более 0.25.
- Как воспринимает пользователь: «Я хотел нажать "Купить", но страница дернулась, и я случайно кликнул по рекламе. Как раздражает!»
Влияние Core Web Vitals на бизнес и SEO
- Прямое влияние на SEO: Google использует Core Web Vitals как «тай-брейк». Если у двух сайтов одинаково релевантный и качественный контент, поисковик отдаст предпочтение тому, чьи показатели пользовательского опыта лучше. Особенно это критично для мобильной выдачи.
- Рост конверсий и снижение CAC: Статистика неумолима. По данным Walmart, каждое улучшение скорости загрузки страницы на 1 секунду приводило к росту конверсии на 2%. Компания Pinterest сократила время ожидания загрузки на 40%, что привело к увеличению регистраций через поисковые системы на 15% и росту органического трафика. Быстрый сайт = меньше брошенных корзин = ниже стоимость привлечения клиента (CAC).
- Улучшение поведенческих факторов: Высокий INP и низкий CLS напрямую снижают показатель отказов (Bounce Rate). Если сайт не «тормозит» и не «прыгает», пользователь с большей вероятностью останется на нем и изучит предложение.
Полевые (Field) и Лабораторные (Lab) данные: в чем разница?
- Лабораторные данные (Lab Data): Это симуляция загрузки страницы в контролируемой среде (например, на мощном компьютере с идеальным интернетом). Эти данные генерируют инструменты вроде Lighthouse. Они отлично подходят для отладки кода, но не отражают реальность.
- Полевые данные (Field Data): Это реальный опыт живых пользователей, собранный из Chrome UX Report (CrUX). Учитываются разные устройства (включая старые смартфоны) и типы сетей (3G/4G).
Инструменты для диагностики Core Web Vitals
- Google PageSpeed Insights (PSI): Главный и самый доступный инструмент. Показывает как лабораторные, так и полевые данные, а также дает конкретные рекомендации по исправлению.
- Google Search Console (GSC): Раздел «Основные веб-показатели». Это источник истины. Здесь вы увидите реальные группы URL вашего сайта, которые вызывают проблемы у реальных пользователей.
- Chrome DevTools (вкладка Performance): Инструмент для разработчиков, позволяющий записать сеанс загрузки и найти конкретные «длинные задачи» (Long Tasks) в JavaScript, которые убивают метрику INP.
- Screaming Frog SEO Spider: Позволяет провести массовый лабораторный аудит тысяч страниц сайта за один раз (требует подключения API Google PageSpeed Insights).
Практическое руководство: как улучшить каждую метрику
Как ускорить LCP
- Оптимизация изображений: Используйте современные форматы (WebP, AVIF), сжимайте их без потери качества и указывайте атрибуты
widthиheight. - Приоритетная загрузка: Для главного изображения (LCP-элемента) используйте
<link rel="preload">и отключите для него lazy loading (отложенную загрузку), чтобы браузер начал качать его немедленно. - Ускорение сервера (TTFB): Настройте кэширование на стороне сервера, используйте CDN (Content Delivery Network) и оптимизируйте запросы к базе данных.
Как улучшить INP
- Разбиение длинных задач (Long Tasks): Если JavaScript выполняет одну задачу дольше 50 мс, он блокирует основной поток. Разбивайте сложные скрипты на более мелкие части.
- Отложенная загрузка сторонних скриптов: Виджеты онлайн-чатов, тяжелые скрипты аналитики и ретаргетинга часто являются главными виновниками плохого INP. Загружайте их с задержкой или по взаимодействию пользователя.
- Оптимизация обработчиков событий: Избегайте сложных вычислений при событиях
clickилиscroll.
Как исправить CLS
- Резервирование места: Всегда явно задавайте размеры (
widthиheight) для изображений, видео и iframe. Это позволяет браузеру зарезервировать место под них до их фактической загрузки. - Стабильность рекламных блоков: Если на странице есть динамическая реклама, зарезервируйте под нее минимально возможный блок, чтобы она не сдвигала контент при загрузке.
- Оптимизация веб-шрифтов: Используйте CSS-правило
font-display: swapилиoptional, чтобы текст отображался системным шрифтом до загрузки кастомного, избегая «мигания» или исчезновения текста (FOIT/FOUT).
Мобильная vs Десктопная версия: где важнее оптимизация?
Частые ошибки при оптимизации
- Слепая погоня за «100 из 100»: Не нужно жертвовать функционалом ради идеальной цифры. Если удаление важного для продаж виджета CRM улучшает оценку на 5 баллов, но усложняет работу менеджеров, это плохая оптимизация.
- Игнорирование полевых данных: Разработка решений только на основе лабораторных тестов без проверки реальных данных в Search Console.
- Неправильный Lazy Loading: Применение отложенной загрузки ко всем изображениям подряд, включая те, что находятся на первом экране (это катастрофически ухудшает LCP).
Заключение
Частые вопросы
Прямого фактора ранжирования с таким названием у Яндекса нет. Однако Яндекс учитывает скорость загрузки (в том числе через технологию «Турбо-страницы») и мобильную адаптивность. Улучшая CWV, вы автоматически улучшаете эти параметры, что положительно сказывается на позициях и в Яндексе.
Нет, это неэффективно. Google Search Console группирует URL-адреса по схожим шаблонам (например, «Главная», «Карточка товара», «Статья блога»). Достаточно привести к норме основные, самые важные шаблоны сайта.
Полевые данные в Chrome UX Report обновляются скользящим окном за последние 28 дней. Поэтому оценивать реальные результаты ваших оптимизаций в Search Console имеет смысл не ранее чем через месяц после внедрения изменений.
Есть проблемы с сайтом и SEO?
Попробуйте самостоятельно улучшить свой сайт, используя мои чек-листы и рекомендации