Core Web Vitals 2026 — что такое LCP, INP, CLS и как улучшить

TL;DR

Core Web Vitals — три метрики Google: LCP (≤2.5с), INP (≤200мс, заменил FID), CLS (≤0.1). Влияют на ранжирование в Google и являются сильным сигналом UX. Большинство сайтов проваливают INP — узкое место обычно в JS. Оптимизация даёт +5-15% органического трафика и значительный рост конверсии.

Что такое Core Web Vitals

Core Web Vitals — набор реальных пользовательских метрик, измеряемых через Chrome User Experience Report (CrUX). Метрики оценивают качество загрузки, интерактивности и визуальной стабильности страниц.

Пороги:

Чтобы метрики считались «прошедшими», 75-й перцентиль (т.е. для 75% пользователей) должен быть в зелёной зоне.

LCP — Largest Contentful Paint

LCP измеряет время до отрисовки самого крупного элемента в видимой области. Обычно это:

• Главное изображение (баннер, фото товара).
• Главный заголовок H1.
• Видео-постер.

Как улучшить LCP

1. Оптимизация LCP-элемента:

   • WebP/AVIF формат изображений.
   • Точные размеры (width, height).
   • fetchpriority="high" для главного.
   • Preload через <link rel="preload" as="image">.

2. Сервер:

   • TTFB < 600 мс.
   • Кеширование на уровне CDN или Varnish.
   • HTTP/2 или HTTP/3.

3. Ресурсы:

   • Inline критический CSS.
   • Шрифты с font-display: swap.
   • Минимизация блокирующих скриптов в head.

4. CDN:

   • Раздача статики с edge-серверов.
   • Cloudflare, ImageKit, BunnyCDN.

INP — Interaction to Next Paint

С марта 2024 INP заменил FID. Это самая «капризная» метрика. Измеряется максимальная задержка между взаимодействием пользователя и обновлением экрана.

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

• Тяжёлые JS-обработчики событий.
• Длинные задачи в main thread (> 50 мс).
• Сторонние скрипты (виджеты чатов, аналитика, реклама).
• React/Vue с тяжёлой логикой ререндера.

Как улучшить INP

1. Уменьшение JS:

   • Tree-shaking, code-splitting.
   • Удаление неиспользуемых библиотек.
   • Замена тяжёлых на лёгкие (lodash → vanilla).

2. Async / Defer:

   • Все сторонние скрипты с defer или async.
   • Загрузка через requestIdleCallback.

3. Оптимизация обработчиков:

   • Debounce/throttle для onScroll, onResize.
   • Передача тяжёлой работы в Web Workers.

4. Виджеты:

   • Загружать чат после взаимодействия.
   • Lazy-init для аналитики.
   • Удалить ненужные счётчики.

CLS — Cumulative Layout Shift

CLS — сумма всех неожиданных смещений макета во время загрузки и взаимодействия. Самая «бесящая» проблема для пользователя — когда нажимаешь не туда, потому что элемент сместился.

Причины плохого CLS

• Изображения без width/height.
• Реклама и баннеры, появляющиеся динамически.
• Шрифты, вызывающие FOIT/FOUT.
• iFrame-ы без размеров.
• Анимации, меняющие layout (вместо transform/opacity).

Как улучшить CLS

1. Резервирование места:

   • У всех <img> указаны width/height.
   • У всех <iframe> указаны размеры.
   • Для динамического контента — placeholder с такими же размерами.

2. Шрифты:

   • font-display: swap + правильный fallback с size-adjust.
   • Preload главных шрифтов.

3. Реклама:

   • Зарезервированные слоты с min-height.
   • Ленивая подгрузка ниже первого экрана.

4. Анимации:

   • Использовать transform и opacity, а не width, height, top, left.

Как измерять

Лабораторные данные (Lab data)

• Lighthouse в Chrome DevTools.
• PageSpeed Insights — Lab + Field.
• WebPageTest — детальный анализ.

Полевые данные (Field data)

• CrUX Dashboard — агрегированная статистика.
• Search Console — Core Web Vitals report.
• Real User Monitoring (RUM) — Web Vitals JS API.

Для ранжирования используются полевые данные за последние 28 дней.

Типичные сценарии оптимизации

Сценарий 1: WordPress с тяжёлой темой

Проблема: LCP 4-6 сек, INP 400-600 мс из-за плагинов.

Решение:

• Переход на лёгкую тему (GeneratePress, Astra).
• Cache plugin (WP Rocket, FastCGI Cache).
• Удаление лишних плагинов.
• Лёгкий хостинг с PHP 8.2+ и OPcache.

Результат: LCP 1.8-2.3с, INP 150-200 мс.

Сценарий 2: SPA на React

Проблема: INP 500+ мс, плохая индексация.

Решение:

• SSR (Next.js) или статическая генерация.
• Code-splitting по маршрутам.
• React.lazy для тяжёлых компонентов.
• Memoization, virtualization списков.

Результат: INP 180-220 мс, индексация улучшена в 2-3 раза.

Сценарий 3: Интернет-магазин

Проблема: CLS 0.3 из-за рекламы и баннеров.

Решение:

• Резервирование места под баннеры.
• Загрузка рекламы только после взаимодействия.
• Оптимизация main-баннера (preload, fetchpriority).

Результат: CLS 0.05-0.08, рост конверсии +12%.

Сколько занимает оптимизация

• Простой сайт (5-20 страниц): 5-10 дней.
• Средний (50-200 страниц): 2-4 недели.
• Крупный e-commerce: 1-3 месяца.

Заказать оптимизацию Core Web Vitals

Помогу довести метрики до зелёной зоны. Услуга оптимизации скорости — от 30 000 ₽. Гарантирую результат с детальным отчётом до и после.