Kaip optimizuoti našumą ir Core Web Vitals'us Next.js aplinkoje?

Question

Accepted Answer

Next.js suteikia jums daug našumo įrankių; juos naudojant gerai, pasieksite Core Web Vitals — LCP (įkėlimas), CLS (maketų stabilumas) ir INP (interaktyvumas).

Sumažinkite kliento JavaScript (didžiausia jėga)

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

App Router supergalia yra mažiau JS siuntimas. Sunki logika ir duomenų formatavimas lieka serveryje; tik tikrai interaktyvūs "salos" tampa Client Components.

Optimizuokite LCP vaizdą

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Optimizuokite šriftus (CLS + įkėlimas) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Padalykite kodą sunkiems kliento komponentams ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lengvai įkraukite didelius, nekritinės reikšmės kliento komponentus (grafikus, redaktorius, modalinius langus), kad jie nepersunktų pradinio paketo. ## Transliuokite lėtą turinį ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Talpinkite agresyviai, revaliduokite tiksliai ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Sąrašas, susietas su metrikomis ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## Matuokite, o ne spėliokite ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## Kodėl tai svarbu Next.js našumas daugiausia apie **mažiau JavaScript siuntimą** (Server Components, kodo dalijimą) ir įmontuotų optimizatorių naudojimą (`next/image`, `next/font`, transliacijom, talpinimą) — kiekvienas tiesiogiai susietas su Core Web Vital. Žinoti, kuris įrankis išsprendžia kurią metriką (ir matuoti su `next build`/Lighthouse vietoj spėliojimo) yra tas, kaip sisteminiškai pasiekti gerą LCP/CLS/INP rezultatus.