12 шагов к зелёным Core Web Vitals

Цель: на 75-м перцентиле добиться LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 для мобильных и десктопных пользователей. Это текущие «зелёные» пороги Google для Core Web Vitals. (web.dev)

1) Начните с правильных измерений: поле + лаборатория

• Поле (RUM): Search Console (отчёт CWV), PageSpeed Insights (CrUX), собственный RUM на web-vitals.
• Лаба: Lighthouse/DevTools для воспроизведения проблем и профилирования.
• Почему: ранжирование учитывает реальный пользовательский опыт, а не синтетику. (Справка Google, Google for Developers)

<!-- Мини-RUM на web-vitals -->
<script type="module">
import {onLCP,onINP,onCLS} from 'https://unpkg.com/web-vitals@4?module';
const send = (m) => navigator.sendBeacon('/rum', JSON.stringify(m));
onLCP(send); onINP(send); onCLS(send);
</script>

2) Зафиксируйте цели по метрикам

• LCP ≤ 2.5 s (хорошо), >4 s — плохо.
• INP ≤ 200 ms (хорошо), >500 ms — плохо.
• CLS ≤ 0.1 (хорошо), >0.25 — плохо.
  
  Оценивайте по 75-му перцентилю раздельно для мобайла/десктопа. (web.dev)

3) Ускорьте бэкенд и TTFB (фундамент LCP)

• HTTP/2/3, TLS-резюме, CDN/edge, кэширование на уровне сервера, компрессия, близость к пользователю.
• Сократите редиректы и холодные запросы к БД.
  
  LCP в поле учитывает сетевую установку соединения и TTFB, поэтому быстрый сервер = быстрый LCP. (web.dev)

4) Сделайте LCP-ресурс «первогражданином»

• Поместите LCP-ресурс в исходный HTML (избегайте поздней загрузки через JS).
• Проставьте rel=preload и/или fetchpriority="high" для hero-изображения/шрифта заголовка; не ленизируйте LCP-картинку.
• Форматы AVIF/WebP, правильные sizes/srcset, decoding="async".
• Проверьте «топ-ошибки» по LCP из гайда Chrome. (web.dev)

<link rel="preload" as="image" href="/hero.avif" imagesrcset="/hero.avif 1x, /hero@2x.avif 2x" fetchpriority="high">
<img src="/hero.avif" width="1280" height="720" alt="..." decoding="async">

5) Уберите блокирующий рендер

• Критический CSS инлайн, остальное — defer/async и media-загрузка.
• Минимизируйте и объединяйте CSS, отключайте неиспользуемые стили/поллифилы.
• preconnect/dns-prefetch к ключевым источникам.
  
  Это снижает время до первого контента и ускоряет «путь» к LCP. (web.dev)

6) Диета для JavaScript (ключ к хорошему INP)

• Уберите неиспользуемый код, включите code-splitting/tree-shaking, грузите функциональность по требованию.
• Перенесите тяжёлые расчёты в Web Workers; избегайте синхронных операций на main thread.
• Следите, чтобы DOM не разрастался чрезмерно. (web.dev)

7) Почините обработчики ввода (INP)

• Избегайте Long Tasks (>50 ms), дробите их; дебаунс/троттлинг на ввод.
• Не плодите таймеры; используйте passive-слушатели для скролла/тача; рендер — через requestAnimationFrame.
• Оптимизируйте жизненно важные интеракции (меню, поиск, карусель). (web.dev)

8) Упростите рендер (INP via rendering)

• Уменьшайте «стоимость» стилей: избегайте сложных селекторов и каскада.
• Боритесь с layout thrashing (чтение geom + запись — разнесите).
• Используйте content-visibility, contain, аккуратные анимации. (web.dev)

9) Стабилизируйте макет (CLS)

• Всегда задавайте width/height или aspect-ratio для изображений/видео/виджетов; резервируйте место под рекламу/баннеры.
• Для анимаций используйте transform вместо top/left/height.
• Контролируйте загрузку шрифтов (font-display: swap/optional). (web.dev)

.card img{ aspect-ratio: 16/9; object-fit: cover; }
.banner{ min-height: 250px; }
.animate{ transform: translateY(0); will-change: transform; }

10) Приручите сторонние скрипты

• Грузите async/defer, откладывайте инициализацию до пользовательского действия.
• Сведите к минимуму блокирующие теги, грузите виджеты «по клику», используйте data- конфиги вместо автозапуска.
• Для iframes — фиксируйте размеры контейнера, чтобы не «скакали». (web.dev)

11) Оптимизируйте шрифты

• Preload ключевых шрифтов, subset и unicode-range, вариативные шрифты — только при необходимости.
• Системные стеки там, где бренд не критичен. Это снижает и LCP, и CLS. (web.dev)

<link rel="preload" as="font" href="/Inter-Subset.woff2" type="font/woff2" crossorigin>
<style>html{font-display:swap;}</style>

12) Закройте цикл: контроль, алерты, бюджеты

• Отслеживайте проблемы в Search Console (CWV-отчёт), групповку по шаблонам URL и худшую метрику в группе.
• Введите performance budgets и автопровал CI при их нарушении (Lighthouse CI / WebPageTest API).
• Возвращайтесь к шагам 3–11 по данным RUM и CrUX. (Справка Google)

Частые вопросы (коротко)

INP — что это и куда делся FID?

INP с 12 марта 2024 официально заменил FID в составе Core Web Vitals. Теперь оценивается не задержка первой, а всех интеракций до следующей перерисовки. (web.dev)

Почему у меня «зелёный» в лабе и «жёлтый» в поле?

Разные устройства/сети и нестабильные моменты вроде TTFB и iframes; ориентируйтесь на полевые данные (CrUX/RUM) и 75-й перцентиль. (web.dev)

Мини-чеклист на неделю

1. Включить RUM и завести дашборд LCP/INP/CLS по шаблонам. (Google for Developers)
2. Перенести LCP-ресурс в HTML + preload/fetchpriority. (web.dev)
3. Вынести критический CSS инлайн, скрипты — defer.
4. Расчистить JS-бандл и долгие таски (>50 ms). (web.dev)
5. Проставить width/height или aspect-ratio у всех медиа/виджетов. (web.dev)
6. Настроить алерты, бюджеты и регрессионные прогоны в CI.

Полезные первоисточники

• Пороговые значения и определение метрик: LCP, INP, CLS на web.dev. (web.dev)
• Включение INP в CWV: блог Google и дата запуска. (Google for Developers, web.dev)
• Практика улучшения LCP/INP/CLS: топ-рецепты и подробные гайды. (web.dev)

Обращайтесь в телеграмм @hesher92 или оставляйте заявку на сайте https://nbmit.ru/ и я адаптирую эти шаги к Вашей конкретной странице.