Core Web Vitals 2026: ускорение сайта до зелёной зоны за 30 дней

С марта 2024 года Google заменил FID на INP (Interaction to Next Paint), и многие сайты, у которых были зелёные метрики, ушли в красную зону. Яндекс с 2025 года тоже использует Core Web Vitals как фактор ранжирования через Яндекс Метрику и Вебмастер.

В 1IT мы провели аудит 120 сайтов клиентов: только 18% из них находятся в зелёной зоне по всем трём метрикам на мобильных устройствах. Это огромный резерв для роста позиций без дополнительных ссылок и контента.

Целевые значения метрик

• LCP (Largest Contentful Paint) — менее 2.5 секунд
• INP (Interaction to Next Paint) — менее 200 мс
• CLS (Cumulative Layout Shift) — менее 0.1
• TTFB (Time to First Byte) — менее 800 мс как вспомогательная
• FCP (First Contentful Paint) — менее 1.8 секунд

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

LCP — время отрисовки самого большого видимого элемента. В 90% случаев это hero-изображение или заголовок. Главные рычаги — оптимизация картинок, preconnect к CDN и устранение блокирующих ресурсов.

1. Перевести hero-изображения в AVIF или WebP — экономия 30–60% веса
2. Использовать <img loading="eager" fetchpriority="high"> для LCP-картинки
3. Добавить <link rel="preconnect"> к CDN и шрифтовым доменам
4. Инлайнить критический CSS первого экрана (до 14 КБ)
5. Включить HTTP/3 и Brotli-сжатие на уровне CDN

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

INP измеряет задержку реакции на любое взаимодействие пользователя — клик, тап, ввод. Главный враг — тяжёлый JavaScript, который блокирует основной поток.

• Code splitting и динамические импорты для тяжёлых компонентов
• Перенос аналитики и сторонних скриптов в Web Worker через Partytown
• Использование React 18+ с automatic batching и transitions
• Дебаунс обработчиков ввода и скролла
• Удаление неиспользуемых полифилов для современных браузеров

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

1. Указывать width и height у всех изображений и видео
2. Резервировать место под рекламные блоки через min-height
3. Использовать font-display: optional или swap с fallback-метриками
4. Не вставлять контент над уже отрисованным (всплывающие баннеры — снизу)
5. Анимировать только transform и opacity, а не layout-свойства

Инструменты мониторинга

PageSpeed Insights и Lighthouse — лабораторные данные, они показывают потенциал. Реальные метрики собирает Chrome User Experience Report (CrUX), Яндекс Метрика и сервисы RUM (Real User Monitoring). Мы в 1IT настраиваем web-vitals.js + отправку в Метрику для ежедневного мониторинга.

Стек оптимизации в 1IT

Первый ИТ Альянс работает с Next.js 15, использует встроенный Image-компонент, ISR-кэширование и edge-функции на Vercel или собственной CDN. Базовый аудит производительности — от 80 000 ₽, полная оптимизация под зелёные Core Web Vitals — от 250 000 ₽ за 4–6 недель.