Как Core Web Vitals и производительность влияют на SEO?

Вопрос

Что такое Core Web Vitals, почему Google использует их как ранжирующий фактор, и какими конкретными фронтенд-техниками можно их улучшить?

Короткий ответ

Core Web Vitals — это три метрики Google (LCP, INP, CLS), измеряющие реальную скорость загрузки, отзывчивость и визуальную стабильность страницы для пользователя. Они официально входят в алгоритм ранжирования (сигнал "Page Experience"), поэтому медленный или "прыгающий" сайт при прочих равных проигрывает быстрому конкуренту в выдаче — и это напрямую в зоне ответственности фронтенд-разработчика.

Подробный ответ

Три метрики Core Web Vitals:

• LCP (Largest Contentful Paint) — время до отрисовки самого крупного видимого элемента (обычно герой-изображение или заголовок). Хороший показатель — до 2.5 сек. Измеряет "воспринимаемую скорость загрузки".
• INP (Interaction to Next Paint) — с марта 2024 заменил FID. Измеряет задержку между действием пользователя (клик, тап, нажатие клавиши) и следующей отрисовкой кадра на экране, по всем взаимодействиям за сессию. Хороший показатель — до 200 мс. Отражает отзывчивость интерфейса.
• CLS (Cumulative Layout Shift) — суммарная "непредсказуемая" смещаемость элементов на странице во время загрузки (например, когда текст "прыгает" из-за поздно загруженной картинки без заданных размеров). Хороший показатель — до 0.1. Отражает визуальную стабильность.

Почему это ранжирующий фактор: Google открыто заявляет, что "Page Experience" (в основе которого лежат Core Web Vitals) учитывается при ранжировании, хотя релевантность контента всё равно остаётся более сильным сигналом. На практике это работает как tie-breaker: при сопоставимой релевантности двух страниц более быстрая и стабильная получает преимущество. Кроме прямого влияния на ранжирование, плохие метрики повышают отказы (bounce rate) и снижают конверсию — что косвенно тоже плохо сказывается на поведенческих сигналах.

Конкретные техники улучшения по каждой метрике:

LCP:

• Оптимизация изображений — современные форматы (WebP/AVIF), корректный srcset/sizes, <link rel="preload"> для критичного LCP-изображения.
• SSR/SSG вместо CSR — контент доступен сразу в HTML, не ждёт гидратации.
• Уменьшение блокирующего рендер CSS/JS (critical CSS, defer/async).
• Быстрый TTFB — кеширование на сервере/CDN.

INP:

• Разбивка длинных JS-задач (code splitting, dynamic import()) — длинные таски блокируют main thread и не дают браузеру ответить на ввод пользователя.
• Уменьшение количества и веса JS, отправляемого на клиент (например, серверные компоненты, ленивая гидратация островов интерактивности).
• Debounce/throttle для дорогих обработчиков событий.

CLS:

• Явно задавать width/height (или aspect-ratio) для изображений и видео, чтобы браузер резервировал место до загрузки.
• Резервировать место под баннеры/рекламу/асинхронно подгружаемые блоки заранее.
• Избегать вставки контента над уже отрисованным (например, баннер cookie, который сдвигает всё вниз) без резервирования места.
• Использовать font-display: optional или swap с осторожностью — смена шрифта может вызвать layout shift (FOIT/FOUT).

Пример

<!-- LCP: preload критичного изображения + корректные размеры -->
<head>
  <link
    rel="preload"
    as="image"
    href="/img/hero.avif"
    fetchpriority="high"
  />
</head>
<body>
  <img
    src="/img/hero.avif"
    width="1200"
    height="600"
    fetchpriority="high"
    alt="Главный баннер"
  />
  <!-- width/height заданы заранее — браузер резервирует место, CLS не растёт -->
</body>

// INP: code splitting — тяжёлый компонент грузится только когда нужен,
// не блокируя основной поток при первом взаимодействии
const HeavyChart = defineAsyncComponent(() =>
  import('~/components/HeavyChart.vue')
)

/* CLS: резервируем место под элемент до загрузки его контента */
.ad-slot {
  min-height: 250px; /* фиксированная высота под баннер */
}

Дополнительные вопросы

• Чем INP отличается от устаревшего FID и почему Google заменил эту метрику?
• Как измерить Core Web Vitals — лабораторные (Lighthouse) vs полевые данные (CrUX)?
• Какие техники ускорения LCP работают при SSR, а какие — только при чистом CSR?