Да асноўнага зместу
Manuilau | Bureau

Патэрн · TypeScript

Core Web Vitals у прадакшн Next.js: LCP, INP, CLS

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

Узровень: сярэдніАцэнка часу: ~1 г для аўдыту

“

Метрыкі Google адлюстроўваюць рэальны UX; Next дае SSR і аптымізацыю выяў, але CLS часта ідзе ад банераў і шрыфтоў.

  • LCP: явны прыярытэт hero і правільныя памеры выявы
  • CLS: рэзерв вышыні для дынамічных слотаў
  • INP: не блакіраваць main thread цяжкімі бандламі над fold

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}>
  {/* banner or widget */}
</div>

Праверка

  • PageSpeed Insights / CrUX field data (калі даступна) па мэтавых URL.
  • Няма рэзкіх пікоў CLS пры загрузцы шрыфтоў або ўстаўцы банераў.

Крыніцы

Матэрыялы блога

Трэба ўнясці пад ваш домен і стэк?

Кароткая форма: імя, тэлефон і сайт. Пасля адпраўкі — адказ з парадкам работ і арыенцірам па этапах; дэталі ўдакладняюцца пры кантакце.