XM8
← Все статьи
Core Web VitalsпроизводительностьLCP

Core Web Vitals на практике: LCP, INP и CLS для Next.js

Метрики влияют на SEO и конверсию. Не абстрактные «оптимизируйте всё», а конкретные шаги для студийных лендингов и блога.

8 мин

LCP — крупнейший контент above the fold, INP — отзывчивость на клики и ввод, CLS — сдвиги вёрстки при загрузке. Google использует полевые данные (CrUX); Яндекс учитывает скорость косвенно. Плохие CWV бьют по заявкам: пользователь уходит до отправки формы.

LCP: первый экран

  • Hero-изображение через next/image с priority и sizes
  • Шрифты: subset кириллицы, font-display swap, без блокировки рендера
  • Тяжёлый 3D и видео — lazy, только после согласия или ниже fold

INP и CLS

  • Дробите длинные client tasks; тяжёлую аналитику — после idle
  • Фиксируйте размеры баннеров и карточек — резервируйте min-height
  • Не вставляйте виджеты над кнопкой CTA без placeholder

Замеряйте в PageSpeed Insights и в Chrome UX Report. Цель xm8 на коммерческих страницах: LCP < 2,5 с, INP < 200 мс, CLS < 0,1 на мобильном 4G.

Частые вопросы

SSR или CSR для лучшего LCP?
SSR или SSG для hero и текста. Client-only shell ухудшает LCP — отдавайте HTML с сервера.
Нужен ли AMP?
Для корпоративного B2B в 2026 — нет. Достаточно оптимизированного Next.js и хорошего хостинга.

Читайте также

Обсудить проект