Kif tottimizza l-prestazzjoni u Core Web Vitals f'Next.js?

Question

Accepted Answer

Next.js jagħtik ħafna għodod tal-prestazzjoni; l-użu tajjeb tagħhom jistabbilizza l-Core Web Vitals — LCP (tagħbija), CLS (stabbiltà tal-layout), u INP (interattività).

Minimizza l-JavaScript tal-client (il-lever akbar)

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

Is-superpower tal-App Router hija li tittrasmetti inqas JS. Il-loġika tqila u l-formatting tad-data jibqgħu fuq is-server; biss l-"isles" genuwinament interattivi jsiru Client Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Ottimizza l-fonts (CLS + tagħbija) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split tal-client components tqila ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Lazy-load il-client components kbar u mhux kritiċi (charts, editors, modals) sabiex ma jinflixxux il-bundle inizjali. ## Stream tal-kontenut bil-mod ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Cache b'mod aggressiv, revalidate b'preċiżjoni ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Il-checklist mappata għall-metriki ```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 ``` ## Kejjel, m'agħmilx divinazzjoni ```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 ``` ## Għaliex huwa importanti Il-prestazzjoni f'Next.js hija l-aktar dwar **l-ittrasmissjoni ta' inqas JavaScript** (Server Components, code-splitting) u l-użu tal-optimizers integrati (`next/image`, `next/font`, streaming, caching) — kull waħda mappata direttament għal Core Web Vital. ":

Minimizza l-JavaScript tal-client (il-lever akbar)

Ottimizza l-immaġini LCP

Ottimizza l-fonts (CLS + tagħbija)

Code-split tal-client components tqila

Stream tal-kontenut bil-mod

Cache b'mod aggressiv, revalidate b'preċiżjoni

Il-checklist mappata għall-metriki

Kejjel, m'agħmilx divinazzjoni

Għaliex huwa importanti