К основному контенту
Manuilau | Bureau

Паттерн · TypeScript

Core Web Vitals в продуктовом Next.js: LCP, INP, CLS

Практичные рычаги: приоритет LCP-изображения, стабильная вёрстка, разбиение тяжёлого JS.

Уровень: среднийОценка времени: ~1 ч на аудит

“

Метрики Google отражают реальный UX; Next даёт SSR и image optimization, но источник CLS часто — баннеры и веб-шрифты.

  • LCP: явный приоритет hero и корректные размеры изображений
  • CLS: резерв высоты под динамика
  • INP: не блокируйте main thread тяжёлыми бандлами на первом экране

Core Web Vitals — не «баллы ради баллов»: они коррелируют с удержанием и конверсией. Ниже — минимальный чеклист в связке с App Router.

Код

Пример приоритета LCP для hero:

import Image from 'next/image'

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt=""
      width={1200}
      height={630}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  )
}

Резерв высоты под рекламный/динамический блок:

<div className="min-h-[120px]" aria-hidden={false}>
  {/* баннер или виджет */}
</div>

Проверка

  • PageSpeed Insights / CrUX field data (если доступно) по целевым URL.
  • В отчёте нет резких скачков CLS при загрузке шрифтов и вставке баннеров.

Первоисточники

Материалы блога

Нужно внедрить под ваш домен и стек?

Короткая форма: имя, телефон и сайт. После отправки — ответ с порядком работ и ориентиром по этапам; задачу уточняют при контакте.