Core Web Vitals в 2026: LCP, CLS, INP — простое объяснение
Три главные метрики скорости от Google. Что они показывают, какие пороги «хорошо», как замерить и улучшить.
Core Web Vitals в 2026: LCP, CLS, INP — простое объяснение
Core Web Vitals — это набор метрик, которые Google использует для оценки пользовательского опыта на сайте. Они включают в себя LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) и INP (Interaction to Next Paint). Понимание того, core web vitals что это, поможет вам быстро оценить, насколько ваш сайт удобен для посетителей, и какие шаги предпринять для улучшения.
Что такое Core Web Vitals и зачем они нужны
Core Web Vitals представляют собой три измерения, которые напрямую влияют на восприятие скорости и стабильности страницы пользователем.
- LCP показывает, как быстро загружается основной контент.
- CLS измеряет визуальную стабильность: насколько часто элементы сдвигаются во время загрузки.
- INP оценивает реакцию страницы на взаимодействие пользователя (клики, ввод текста и т.д.).
Google использует эти метрики как часть ранжирования страниц, поэтому их оптимизация повышает видимость сайта в поиске.
LCP (Largest Contentful Paint) – как быстро виден основной контент
Что измеряет LCP?
LCP фиксирует момент, когда самый крупный видимый элемент (изображение, видео, блок текста) становится полностью загруженным и отображается в окне браузера.
Пороговые значения
| Класс | Время (сек) |
|---|---|
| Хороший | ≤ 2,5 |
| Приемлемый | 2,5–4 |
| Плохой | > 4 |
Как измерить LCP
- Google Search Console – вкладка Core Web Vitals.
- PageSpeed Insights – результат «LCP: 1,8 с».
- Lighthouse в Chrome DevTools – «Largest Contentful Paint: 2,3 s».
Как улучшить LCP
| Шаг | Описание | Пример |
|---|---|---|
| 1. Оптимизировать изображения | Сжатие без потери качества, формат WebP | image.webp вместо image.jpg |
| 2. Уменьшить размер шрифтов | Использовать font-display: swap |
@font-face { font-display: swap; } |
| 3. Перенести критический CSS | Inline‑стили для выше‑fold контента | <style>body{margin:0}</style> |
| 4. Использовать CDN | Распределение контента по регионам | Cloudflare, Akamai |
| 5. Уменьшить количество запросов | Объединить файлы JS/CSS | bundle.js |
CLS (Cumulative Layout Shift) – как избежать неожиданных сдвигов
Что измеряет CLS?
CLS суммирует все визуальные сдвиги элементов страницы, которые происходят после начала загрузки. Сдвиги вызывают раздражение и снижают доверие пользователя.
Пороговые значения
| Класс | CLS |
|---|---|
| Хороший | ≤ 0,1 |
| Приемлемый | 0,1–0,25 |
| Плохой | > 0,25 |
Как измерить CLS
- Google Search Console – «CLS: 0,04».
- PageSpeed Insights – «Cumulative Layout Shift: 0,07».
- Lighthouse – «Cumulative Layout Shift: 0,02».
Как улучшить CLS
| Шаг | Описание | Пример |
|---|---|---|
| 1. Указать размеры медиа | width и height в тегах <img> и <video> |
<img src="photo.webp" width="600" height="400"> |
| 2. Задать размеры контейнеров | aspect-ratio в CSS |
div{aspect-ratio:16/9} |
| 3. Отключить динамический контент | Перенести рекламу/виджеты в отдельный iframe | <iframe src="ad.html"></iframe> |
4. Использовать contain для flex |
display:flex; flex-wrap:nowrap; |
div{display:flex;} |
| 5. Минимизировать изменения DOM | Пакетные обновления, не поэлементные | document.querySelectorAll('.item').forEach(el=>el.textContent='') |
INP (Interaction to Next Paint) – как быстро реагирует сайт на действия
Что измеряет INP?
INP фиксирует время от начала пользовательского взаимодействия (клик, касание) до следующего отрисовочного кадра. Это более точная замена старой метрики FID (First Input Delay).
Пороговые значения
| Класс | INP (мс) |
|---|---|
| Хороший | ≤ 200 |
| Приемлемый | 200–400 |
| Плохой | > 400 |
Как измерить INP
- Chrome DevTools → Performance – вкладка «Interaction to Next Paint».
- Lighthouse – «Interaction to Next Paint: 180 ms».
Как улучшить INP
| Шаг | Описание | Пример |
|---|---|---|
| 1. Уменьшить время выполнения JS | Перенести тяжелые скрипты в defer |
<script src="app.js" defer></script> |
| 2. Пагинация событий | Использовать requestIdleCallback |
requestIdleCallback(()=>{ /* тяжелый код */ }) |
| 3. Минимизировать синхронные операции | Разбить на микротаски | Promise.resolve().then(()=>{/* код */}) |
| 4. Оптимизировать рендеринг | will-change для анимаций |
div{will-change:transform} |
| 5. Удалить лишние слушатели | removeEventListener после использования |
el.removeEventListener('click', handler) |
Инструменты для мониторинга Core Web Vitals
| Инструмент | Что показывает | Как использовать |
|---|---|---|
| Google Search Console | Средние значения по страницам | Вкладка Core Web Vitals |
| PageSpeed Insights | Тест по конкретному URL | Ввод адреса, нажать «Analyze» |
| Lighthouse | Полный отчёт, включая LCP, CLS, INP | DevTools → Audits → Generate report |
| Chrome User Experience Report (CrUX) | Данные реальных пользователей | API, готовые наборы |
| Web Vitals Chrome Extension | Быстрый просмотр в реальном времени | Установить из Chrome Web Store |
Как внедрить оптимизацию в workflow
- Планирование – включить метрики в чеклист при разработке новых страниц.
- Автоматизация – настроить CI/CD pipeline, чтобы Lighthouse запускался автоматически и генерировал отчёты.
- Мониторинг – использовать CrUX API для отслеживания изменений в реальном времени.
- Постоянная проверка – каждые 2–4 недели проверять ключевые страницы на наличие отклонений.
Что делать дальше
-
Проверьте текущие метрики
- Запустите PageSpeed Insights для главной страницы и ключевых внутренних страниц.
- Сравните результаты с пороговыми значениями. -
Оптимизируйте изображения и шрифты
- Переведите все изображения в WebP/AVIF.
- Добавьте атрибутыwidthиheightк<img>и<video>. -
Улучшите взаимодействие
- Перенесите тяжелые скрипты вdeferи используйтеrequestIdleCallback.
- Убедитесь, что все кликабельные элементы реагируют в течение 200 мс. -
Настройте мониторинг
- Добавьте Lighthouse в CI/CD.
- Подключите CrUX API к внутренней панели мониторинга.
Следуя этим шагам, вы сможете быстро повысить показатели Core Web Vitals, улучшить пользовательский опыт и, как следствие, повысить позиции сайта в поисковой выдаче.
Проверьте свой сайт или закажите продвижение
Технический аудит на 64 параметра + готовое КП в PDF — за 5 минут. Или комплексное SEO-продвижение сайта под ключ — от технических правок до позиций в ТОП-10.