Core Web Vitals 2026: проверка Google и Яндекс

TL;DR: Core Web Vitals — три метрики (LCP ≤ 2,5 сек, INP ≤ 200 мс, CLS ≤ 0,1), которые напрямую влияют на ранжирование. Только 48% мобильных сайтов проходят все три метрики. Оптимизируйте в порядке: TTFB → LCP → INP → CLS. Используйте PageSpeed Insights, Search Console и Chrome DevTools для измерения.

Быстрые факты:

• Улучшение LCP с 4,5 до 2,5 сек повышает конверсию e-commerce в среднем на 17%.
• Только 48% мобильных сайтов проходят все три метрики Core Web Vitals (Web Almanac 2025).
• Снижение INP на 100 мс увеличивает глубину просмотра на 7–9%.

Что такое Core Web Vitals

Core Web Vitals — это набор из трёх метрик пользовательского опыта, которые Google использует как фактор ранжирования с 2021 года. В 2026 году их влияние только усилилось, а Яндекс также начал учитывать эти показатели через поведенческие факторы.

Почему это важно:

• Google использует CWV как фактор ранжирования
• LCP > 4 секунд снижает конверсию на 20–30%
• Только 48% мобильных сайтов проходят все три метрики (Web Almanac 2025)
• Плохие показатели увеличивают bounce rate

LCP: Largest Contentful Paint

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

Как измерить LCP

• PageSpeed Insights — смотрите Field data (реальные пользователи)
• Chrome DevTools → Performance — найдите LCP-элемент в таймлайне
• Web Vitals Extension — показывает LCP в реальном времени
• Search Console → Core Web Vitals — данные по всему сайту

Как оптимизировать LCP

Пошаговый план оптимизации LCP:

1. Откройте PageSpeed Insights, найдите LCP-элемент
2. Если это изображение — конвертируйте в WebP, уменьшите размер, настройте preload
3. Если это текст — оптимизируйте TTFB, inline критический CSS
4. Внедрите CDN (Cloudflare, Selectel)
5. Проверьте результат через 28 дней (время обновления CrUX)

INP: Interaction to Next Paint

INP заменил FID в марте 2024 года и измеряет время от пользовательского взаимодействия (клик, касание, нажатие клавиши) до отрисовки следующего кадра. Это значительно более строгая метрика, чем FID.

Как измерить INP

• PageSpeed Insights — Field data section
• Search Console → Core Web Vitals
• Chrome DevTools → Performance — ищите Long Tasks (> 50 мс)
• Web Vitals Extension

Как оптимизировать INP

Проблема

Решение

Длинные JavaScript-задачи

Разбивка на части (< 50 мс), scheduler.yield()

Тяжёлые вычисления

Перенос в Web Workers

Неиспользуемый JS

Удаление через Coverage в DevTools

Сторонние скрипты

Отложенная загрузка (analytics, чаты, виджеты)

Большой DOM

Уменьшение количества элементов, виртуализация списков

Практический пример:

Если при клике на кнопку "Добавить в корзину" проходит 600 мс до реакции — INP = 600 мс (плохо). Откройте Chrome DevTools → Performance, запишите взаимодействие, найдите Long Task в main thread. Разбейте его или перенесите в Worker.

CLS: Cumulative Layout Shift

CLS измеряет визуальную стабильность — насколько элементы страницы "прыгают" во время загрузки. Каждый неожиданный сдвиг ухудшает пользовательский опыт.

Как измерить CLS

• PageSpeed Insights — Field data
• Chrome DevTools → Performance — Layout Shift записываются в таймлайне
• Web Vitals Extension — CLS считается в реальном времени
• CLS Visualizer — визуализация сдвигов

Как оптимизировать CLS

Проблема

Решение

Изображения без размеров

Указать width и height в HTML или aspect-ratio в CSS

Динамический контент

Резервировать место min-height для рекламы, виджетов

Веб-шрифты (FOUT/FOIT)

font-display: swap, preload критических шрифтов

Вставка контента сверху

Никогда не вставляйте над существующим контентом

Анимации без transform

Используйте transform вместо изменения top/left/width/height

Код-решения для CLS:

`img src="photo.webp" width="800" height="600" alt="Описание"`

<div class="ad-container" style="min-height: 250px;">
  
</div>

`link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin`
<style>
  @font-face {
    font-family: 'MyFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;
  }
</style>

Инструменты для проверки Core Web Vitals

Важно: Различие между Lab data (симуляция Lighthouse) и Field data (реальные пользователи Chrome). Google использует Field data для ранжирования. Если у сайта мало трафика — Field data может отсутствовать.

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

LCP (цель: ≤ 2,5 сек)

• Изображения конвертированы в WebP/AVIF
• CDN настроен для статических ресурсов
• Preload для LCP-элемента
• TTFB < 600 мс
• Критический CSS вынесен inline
• Render-blocking JS отложен
• Шрифты preload + font-display: swap
• Серверное кэширование включено

INP (цель: ≤ 200 мс)

• JS-задачи разбиты на части < 50 мс
• Неиспользуемый JS удалён
• Сторонние скрипты отложены
• Тяжёлые вычисления в Web Workers
• DOM-элементы < 1500
• Event listeners оптимизированы

CLS (цель: ≤ 0,1)

• Все изображения имеют width/height
• Место зарезервировано для динамики
• Шрифты: font-display: swap
• Нет вставки контента над существующим
• Анимации через transform
• Ad containers имеют min-height

Проблемы и решения: типичные сценарии

Сценарий 1: "У меня отличный Lighthouse score, но Field data красная"

Причина: Lighthouse (Lab) тестирует в идеальных условиях. Field data — реальные пользователи с медленными устройствами и 3G.

Решение:

1. Переключите PageSpeed Insights на "Mobile"
2. Используйте throttling "Slow 3G" в DevTools
3. Тестируйте на реальном среднем телефоне (не на MacBook Pro)
4. Оптимизируйте под худший сценарий

Сценарий 2: "LCP прыгает от страницы к странице"

Причина: Разные LCP-элементы на разных страницах (изображение на одной, текст на другой).

Решение:

1. Стандартизируйте шаблон — LCP-элемент должен быть предсказуем
2. Оптимизируйте шаблон, а не отдельные страницы
3. Если LCP — изображение hero: preload + WebP + CDN

Сценарий 3: "INP ужасный на мобильных, но хороший на десктопе"

Причина: Мобильные устройства имеют слабые процессоры. JS, который работает на десктопе, тормозит на телефоне.

Решение:

1. Тестируйте INP на реальном мобильном устройстве
2. Уменьшите объём JavaScript
3. Используйте код-сплиттинг (загружайте JS по необходимости)
4. Отключите тяжёлые анимации на мобильных

FAQ

Что такое Core Web Vitals?

Core Web Vitals — это три метрики пользовательского опыта от Google, которые измеряют скорость загрузки (LCP — Largest Contentful Paint, должно быть ≤ 2,5 секунды), время отклика на взаимодействие (INP — Interaction to Next Paint, должно быть ≤ 200 мс) и визуальную стабильность (CLS — Cumulative Layout Shift, должно быть ≤ 0,1). Эти метрики являются официальным фактором ранжирования Google с 2021 года и напрямую влияют на позиции сайта в поисковой выдаче. В 2026 году их влияние усилилось, а Яндекс также начал учитывать эти показатели.

Как проверить Core Web Vitals?

Основные инструменты для проверки Core Web Vitals: Google PageSpeed Insights (показывает Lab и Field data для конкретной страницы), Google Search Console (отчёт Core Web Vitals по всему сайту с разбивкой по URL), Chrome DevTools с Lighthouse (детальный анализ в симулированных условиях), Web Vitals Extension (показывает метрики в реальном времени при серфинге) и WebPageTest (продвинутый анализ с выбором устройства и локации). Важно ориентироваться на Field data — реальные данные пользователей из Chrome UX Report, а не только на Lab data от Lighthouse.

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

Для улучшения LCP (время загрузки крупного контента) выполните следующие шаги: оптимизируйте изображения — конвертируйте в WebP или AVIF, сожмите без потери качества, используйте отзывчивые изображения; внедрите CDN для ускорения доставки статики; настройте preload для LCP-элемента через link rel="preload"; улучшите TTFB (время ответа сервера) — должно быть менее 600 мс, используйте кэширование; вынесите критический CSS inline в ``; отложите загрузку некритичного JavaScript; используйте font-display: swap для веб-шрифтов.

Что такое INP и как его оптимизировать?

INP (Interaction to Next Paint) — метрика, которая заменила FID в марте 2024 года и измеряет время от пользовательского взаимодействия до отрисовки следующего кадра. INP оценивает все взаимодействия на странице, а не только первое, что делает её значительно более строгой. Для оптимизации INP: разбейте длинные JavaScript-задачи на части менее 50 мс каждая, используйте Web Workers для тяжёлых вычислений, отложите загрузку сторонних скриптов (аналитика, чаты, виджеты), удалите неиспользуемый JavaScript через Coverage в DevTools, уменьшите размер DOM (менее 1500 элементов) и оптимизируйте обработчики событий.

Как исправить CLS?

Для устранения CLS (Cumulative Layout Shift — визуальная стабильность): всегда указывайте атрибуты width и height для изображений в HTML или используйте CSS aspect-ratio; резервируйте место для динамического контента — рекламных блоков, виджетов соцсетей, встраиваемых постов — через min-height контейнера; используйте font-display: swap для веб-шрифтов и предзагружайте критические шрифты; никогда не вставляйте контент (баннеры, уведомления) над уже загруженным содержимым; для анимаций используйте CSS transform вместо изменения свойств top, left, width, height.

Заключение

Core Web Vitals — это не абстрактные метрики, а реальные показатели пользовательского опыта, которые влияют на ранжирование и конверсию. Оптимизация TTFB → LCP → INP → CLS даёт compounded эффект: быстрый, отзывчивый и стабильный сайт удерживает пользователей и конвертирует их лучше.

Главные принципы:

1. Оптимизируйте в правильном порядке: TTFB → LCP → INP → CLS
2. Думайте шаблонами, а не отдельными страницами
3. Ориентируйтесь на Field data, а не Lighthouse
4. Тестируйте на реальных мобильных устройствах
5. Мониторьте через Search Console регулярно

Нужна помощь с оптимизацией?

Закажите аудит Core Web Vitals — команда NEXFORCE проанализирует ваш сайт, найдёт узкие места и подготовит план оптимизации с прогнозом улучшения метрик.

Статья подготовлена командой NEXFORCE. Последнее обновление: 23 июня 2026 года.

Остались вопросы? Пишите в Telegram или на info@nexforce.ru.