← Все статьи блога

Core Web Vitals 2026: что изменилось и как улучшить

Метрики производительности Google снова обновились. Разбираем LCP, INP и CLS — что они измеряют, каковы допустимые значения и как добиться зелёных показателей.

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

Core Web Vitals фокусируются на трёх ключевых аспектах: скорости загрузки контента, интерактивности страницы и стабильности интерфейса. Эти показатели собираются на основе реальных данных пользователей (Real User Monitoring).


История и эволюция метрик

2020
2020 — Запуск

Google представил три основные метрики: LCP, FID и CLS. Первый набор инструментов для измерения пользовательского опыта.

2021
2021 — Фактор ранжирования

Core Web Vitals стали официальным фактором ранжирования Google в рамках алгоритма Page Experience.

2024
2023–2024 — FID → INP

Google заменил FID на INP. Новая метрика точнее отражает реальную интерактивность: измеряет все взаимодействия, а не только первое.

2026
2025–2026 — Усиление RUM

Google усилил значение реальных пользовательских данных и улучшил алгоритмы измерения интерактивности. INP окончательно стал основной метрикой отклика.


Три метрики Core Web Vitals в 2026 году

LCP
Largest Contentful Paint
Время загрузки самого крупного элемента страницы. Измеряет скорость появления основного контента.
INP
Interaction to Next Paint
Время отклика интерфейса на все действия пользователя. Измеряет интерактивность.
CLS
Cumulative Layout Shift
Суммарный сдвиг элементов страницы. Измеряет стабильность макета.

LCP — Largest Contentful Paint

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

ОценкаЗначение
Хорошодо 2.5 секунды
Нужно улучшить2.5 – 4 секунды
Плохоболее 4 секунд

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

  • Медленный сервер и высокое TTFB
  • Неоптимизированные изображения большого размера
  • Блокирующий CSS или JavaScript
  • Отсутствие CDN
  • Неправильная загрузка шрифтов

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

1

Использовать CDN — Cloudflare, Fastly или Akamai сокращают время доставки контента.

2

Оптимизировать изображения — переходить на форматы WebP и AVIF, сжимать и использовать адаптивные размеры.

3

Предзагружать ключевые ресурсы — браузер начинает загружать критичный контент приоритетно.

4

Снизить TTFB — кэширование, оптимизация БД, быстрый хостинг.

5

Минимизировать CSS — удалить неиспользуемые стили, вынести критический CSS inline.

<!-- Предзагрузка hero-изображения --> <link rel="preload" as="image" href="hero.webp"> <!-- Оптимизированное изображение --> <img src="image.webp" loading="lazy" width="800" height="600">

INP — Interaction to Next Paint

INP — метрика, которая измеряет время отклика сайта на все действия пользователя: клик по кнопке, ввод текста, открытие меню, отправку формы.

Почему Google заменил FID на INP: FID измерял только первое взаимодействие. INP охватывает всю сессию пользователя — это более точная и честная оценка интерактивности сайта.

ОценкаЗначение
Хорошодо 200 мс
Нужно улучшить200 – 500 мс
Плохоболее 500 мс

Основные причины плохого INP

Главная причина — тяжёлый JavaScript. Типичные проблемы:

  • Длинные задачи JavaScript (более 50 мс)
  • Блокировка основного потока
  • Тяжёлые фреймворки без оптимизации
  • Большое количество обработчиков событий

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

1

Разбивать длинные задачи — задача дольше 50 мс блокирует интерфейс. Используйте scheduler API.

2

Web Workers — тяжёлые вычисления вынести в отдельный поток, не блокируя UI.

3

Defer/async для скриптов — некритичный JavaScript не должен блокировать рендеринг.

4

Удалить неиспользуемый JS — большинство сайтов загружают в 2–3 раза больше JS, чем реально используют.

5

Оптимизировать фреймворки — code splitting, lazy components, Server-Side Rendering (SSR).

<!-- Отложенная загрузка некритичных скриптов --> <script src="script.js" defer></script>

CLS — Cumulative Layout Shift

CLS измеряет визуальную стабильность страницы. Если элементы неожиданно сдвигаются — пользователь может случайно нажать не туда. Типичный пример: вы тянетесь к кнопке, и в этот момент появляется баннер — кнопка уходит вниз.

ОценкаЗначение
Хорошоменее 0.1
Нужно улучшить0.1 – 0.25
Плохоболее 0.25

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

  • Изображения без указания размеров
  • Рекламные блоки без резервированного места
  • Динамически подгружаемый контент
  • Шрифты с FOUT (Flash of Unstyled Text)
  • Iframe без фиксированных размеров

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

<!-- 1. Указывать размеры изображений --> <img src="image.jpg" width="800" height="600"> /* 2. Оптимизировать загрузку шрифтов */ font-display: swap;
  • Указывать width/height у всех изображений — браузер резервирует место заранее
  • Резервировать место под рекламу — фиксированные размеры для рекламных блоков
  • font-display: swap — предотвращает сдвиг при загрузке шрифтов
  • Не вставлять контент выше существующего — новый контент должен появляться ниже видимой области

Инструменты для измерения Core Web Vitals

🚀
PageSpeed Insights

Главный инструмент от Google. Показывает LCP, INP, CLS и рекомендации. Бесплатный.

🔍
Search Console

Раздел CWV показывает реальные проблемы сайта на основе данных пользователей.

🏠
Lighthouse

Инструмент для разработчиков прямо в Chrome DevTools. Лабораторные данные.

⚙️
Chrome DevTools

Анализ производительности, загрузки ресурсов и работы JavaScript в деталях.

Field Data vs Lab Data: PageSpeed и Lighthouse дают лабораторные данные (симуляция). Google Search Console показывает реальные данные пользователей (Chrome UX Report). Для SEO важны именно реальные данные.


Как Core Web Vitals влияют на SEO

Core Web Vitals — часть алгоритма Page Experience. Они влияют на ранжирование, пользовательский опыт и поведенческие факторы.

Core Web Vitals — не единственный фактор ранжирования, но при равном качестве контента и ссылочном профиле быстрый сайт получает преимущество

Google также учитывает качество контента, релевантность, ссылки и авторитет сайта. Но производительность — это тот порог, ниже которого конкурировать крайне сложно.


Практическая стратегия оптимизации

1. Оптимизация сервера

Быстрый хостинг, CDN, HTTP/3, настроенное кэширование. Это фундамент хорошего LCP.

2. Оптимизация изображений

WebP, AVIF, адаптивные размеры, lazy loading. Изображения — главная причина медленных сайтов.

3. Минимизация JavaScript

Tree shaking, code splitting, lazy loading, удаление неиспользуемого кода. Ключ к хорошему INP.

4. Оптимизация CSS

Критический CSS inline, удаление лишних стилей, минификация. Снижает время рендеринга.

5. Настройка кэширования

Browser cache, server cache, CDN cache. Повторные посещения должны быть мгновенными.


Частые ошибки при оптимизации

📊
Ориентироваться только на PageSpeed

PageSpeed — лабораторный тест. Реальный пользовательский опыт может сильно отличаться. Всегда смотрите на данные из Search Console.

💾
Слишком много JavaScript

Современные сайты перегружены JS. Каждый лишний килобайт — это время парсинга и выполнения, которое блокирует интерфейс.

🖼
Неоптимизированные изображения

Изображения в форматах JPEG/PNG без сжатия — главная причина медленного LCP. Переход на WebP даёт 25–35% экономии при том же качестве.

📱
Игнорирование мобильной версии

Google использует mobile-first indexing. Core Web Vitals оцениваются в первую очередь для мобильных устройств. Если на смартфоне сайт тормозит — это проблема.


Будущее Core Web Vitals

Google продолжает улучшать метрики пользовательского опыта. В ближайшие годы возможно появление новых показателей:

Также усиливается роль real user monitoring (RUM), edge computing и server components — технологий, которые позволяют рендерить контент ближе к пользователю.


Чек-лист оптимизации Core Web Vitals

Перед запуском сайта и при регулярном аудите проверяйте:

Изображения оптимизированы (WebP/AVIF, сжатие, адаптивные размеры)
Используется CDN для статических ресурсов
JavaScript минимизирован, нет неиспользуемого кода
Настроено кэширование на уровне браузера и сервера
Все изображения имеют атрибуты width и height
Нет блокирующих рендеринг ресурсов
Используется lazy loading для изображений ниже сгиба
Реальные данные CWV проверены в Search Console

Заключение

Быстрый сайт — это лучший UX, выше конверсия, меньше отказов и больше органического трафика

Core Web Vitals остаются одним из ключевых элементов современного SEO и веб-разработки. В 2026 году Google продолжает усиливать роль пользовательского опыта.

Итог по трём метрикам:
LCP — скорость загрузки основного контента (цель: < 2.5 с)
INP — скорость реакции интерфейса (цель: < 200 мс)
CLS — стабильность макета (цель: < 0.1)

Регулярный анализ производительности и оптимизация Core Web Vitals должны стать обязательной частью любой SEO-стратегии и процесса разработки сайтов.

Д
Дмитрий Соколов
Frontend-разработчик

5 лет в веб-разработке. Специализируется на производительности фронтенда, Core Web Vitals и оптимизации сайтов. Помог более 30 проектам улучшить показатели Page Experience. Автор внутренней документации по оптимизации скорости загрузки.

Нужен аудит производительности сайта?

Проверим Core Web Vitals, найдём узкие места и дадим конкретные рекомендации по ускорению сайта.

Заказать аудит ← Все статьи блога