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

Что такое Core Web Vitals

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

Три ключевые метрики:

Метрика Что измеряет Хорошо Плохо
LCP Скорость загрузки основного контента ≤ 2.5 сек > 4 сек
CLS Стабильность верстки (прыжки элементов) ≤ 0.1 > 0.25
INP Отзывчивость на взаимодействие ≤ 200 мс > 500 мс

LCP — Largest Contentful Paint

LCP измеряет, через сколько секунд на экране появляется самый большой элемент — обычно это главное изображение или заголовок hero-секции.

Почему LCP плохой:

  • Тяжёлые изображения без сжатия (PNG вместо WebP).
  • Изображения-герои загружаются через CSS background, а не через <img> с атрибутом loading="eager".
  • Медленный сервер (TTFB > 800 мс) — проблема хостинга.
  • Блокирующий рендеринг JavaScript и CSS.

Как исправить:

  1. Конвертируйте все изображения в WebP.
  2. Главному изображению добавьте fetchpriority="high" и уберите loading="lazy".
  3. Перейдите на более быстрый хостинг или добавьте CDN.
  4. Вынесите критический CSS в <style> в <head>.

CLS — Cumulative Layout Shift

CLS — это «прыжки» контента при загрузке. Вы читаете статью, нажимаете на ссылку, а в этот момент подгружается реклама и страница прыгает — палец попадает не туда. Это и есть CLS.

Типичные причины плохого CLS:

  • Изображения и видео без явных размеров (width и height).
  • Динамически подгружаемый контент (баннеры, виджеты чата) без зарезервированного места.
  • Шрифты с FOUT (вспышка невидимого текста) — замена системного шрифта на веб-шрифт после загрузки.

Как исправить:

  1. Всегда указывайте width и height для <img> и <video>.
  2. Резервируйте место под рекламные блоки через min-height.
  3. Используйте font-display: swap и предзагрузку шрифтов через <link rel="preload">.

INP — Interaction to Next Paint

INP заменил FID в 2024 году. Он измеряет время от нажатия кнопки/ссылки до визуального обновления страницы. Плохой INP = сайт «тупит» при взаимодействии.

Причины плохого INP:

  • Тяжёлые JavaScript-скрипты блокируют главный поток браузера.
  • Сторонние скрипты: виджеты, аналитика, чаты, пиксели рекламы.
  • Сложные CSS-анимации, которые не используют GPU.

Как исправить:

  1. Аудит скриптов — удалите всё лишнее. Проверьте через Chrome DevTools → Performance.
  2. Загружайте сторонние скрипты с атрибутом async или defer.
  3. Разбивайте длинные задачи JavaScript на более короткие (< 50 мс).

Как проверить Core Web Vitals своего сайта

Бесплатные инструменты:

  • PageSpeed Insights — самый простой способ. Введите URL — получите оценку по реальным данным (CrUX) и лабораторным тестам.
  • Google Search Console → раздел «Основные веб-показатели» — показывает данные по всему сайту в разбивке по страницам.
  • Chrome DevTools → вкладка Lighthouse — детальный аудит с рекомендациями.
  • WebPageTest.org — углублённый анализ с waterfall-диаграммой загрузки.

Важно: лабораторные данные (PageSpeed) и реальные данные пользователей (CrUX) могут различаться. Google для ранжирования использует реальные данные.

Топ-5 ошибок и как их исправить

1. Нет сжатия на сервере Включите gzip или brotli на уровне сервера/CDN. Это снижает размер передаваемых данных в 3-5 раз.

2. Нет кэширования Настройте HTTP-заголовки Cache-Control для статических ресурсов. Повторные визиты должны загружаться мгновенно.

3. Слишком много редиректов Каждый редирект добавляет 100-300 мс. Аудируйте цепочки редиректов, особенно с HTTP на HTTPS.

4. Неоптимизированные шрифты Подключайте только нужные начертания (не весь family), используйте font-display: swap.

5. Тяжёлая аналитика и чаты Яндекс.Метрика, amoCRM-чат, Jivosite — каждый добавляет к загрузке. Загружайте их отложенно через setTimeout или после первого взаимодействия пользователя.

Core Web Vitals — это не просто «хотелки» Google. Это реальный пользовательский опыт. Хотите проверить показатели своего сайта? Мы сделаем бесплатный аудит и дадим конкретный план улучшений.

Нужна помощь с SEO?

Проведём бесплатный аудит и покажем, что мешает вашему сайту расти в поиске