Conas a bhíonn tú ag feidhmiú ar bheartas agus ar Core Web Vitals i Next.js?

Question

Accepted Answer

Tugann Next.js go leor uirlisí feidhmíochta duit; a úsáid go maith a bhíonn ag súlú ar na Core Web Vitals — LCP (ualadh), CLS (cobhsaíocht leagan amach) agus INP (idirghníomhaíochta).

Íoslaghdú JavaScript cliant (an bacra is mó)

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 an App Router níos lú JS a sheoladh. Fanann loighic throm agus formáidiú sonraí ar an bhfreastalaí; ní bhíonn ach fíor "oileáin" idirghníomhacha ina gClient Components.

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Clófhoinn a bharrfheidhmiú (CLS + ualadh) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split ar chuid-chliaint throm ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Ládáil go mall ar gheal chliaint-chuid nach bhfuil riachtanach (cairteacha, eagarthóirí, modals) ionas nach ndéanfaidh siad an bundle tosaigh a ghealadh. ## Sruth ar bhraistint nach bhfuil gasta ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Taisce go fealltach, bailíonn go beacht ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## An seiceoir mapáilte ar mhéaduithe ```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 ``` ## Tomhais, ná bheith ag gealadh ```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 ``` ## An fáth ar chóir dó a bheith ann Ní fhíoraítear feidhmíocht Next.js ach a bheith ag seol níos lú JavaScript (Server Components, code-splitting) agus na barrmhéaduithe tógtha in úsáid (`next/image`, `next/font`, sruth, taisce) — gach ceann ag mapáil go díreach ar Bhraistint Fholuain Dhomhanda. A bheith ar an eolas cén uirlis a leigheasann cén mhéadú (agus a thomhas le `next build`/Lighthouse seachas a bheith ag gealadh) is é an tslí ar a raibh tú go córasach ag socrú ar scór maithe LCP/CLS/INP.

Íoslaghdú JavaScript cliant (an bacra is mó)

An íomhá LCP a bharrfheidhmiú

Clófhoinn a bharrfheidhmiú (CLS + ualadh)

Code-split ar chuid-chliaint throm

Sruth ar bhraistint nach bhfuil gasta

Taisce go fealltach, bailíonn go beacht

An seiceoir mapáilte ar mhéaduithe

Tomhais, ná bheith ag gealadh

An fáth ar chóir dó a bheith ann