Przejdź do treści
Manuilau | Bureau

Wzorzec · TypeScript

Core Web Vitals w produkcyjnym Next.js: LCP, INP, CLS

Praktyczne dźwignie: priorytet obrazu LCP, stabilny layout, dzielenie ciężkiego JS.

Poziom: średniSzacunek czasu: ~1 h na audyt

“

Metryki Google odzwierciedlają realny UX; Next daje SSR i optymalizację obrazów, ale źródłem CLS często są banery i fonty.

  • LCP: jawny priorytet hero i poprawne wymiary obrazów
  • CLS: rezerwa wysokości pod dynamiczne bloki
  • INP: nie blokuj wątku głównego ciężkimi bundlami above the fold

Core Web Vitals to nie „punkty dla punktów”: korelują z retencją i konwersją. Poniżej minimalna lista kontrolna w parze z App Router.

Kod

Przykład priorytetu LCP dla 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"
    />
  )
}

Rezerwa wysokości pod baner/dynamiczny blok:

<div className="min-h-[120px]" aria-hidden={false}>
  {/* baner lub widget */}
</div>

Weryfikacja

  • PageSpeed Insights / dane polowe CrUX (jeśli dostępne) dla docelowych URL.
  • W raporcie brak gwałtownych skoków CLS przy ładowaniu fontów i wstawianiu banerów.

Źródła

Wdrożyć pod Twoją domenę i stack?

Krótki formularz: imię, telefon, strona. Po wysłaniu — odpowiedź z kolejnością prac i orientacją etapów; szczegóły doprecyzujemy na kontakcie.