Unaweza kuibua utendaji na Core Web Vitals katika Next.js vipi?

Question

IT Interview Practice · Accepted Answer

Next.js inakupatia zana nyingi za utendaji; kwa kuzirekebisha vizuri, unaelekezea Core Web Vitals — LCP (upakaji), CLS (uthabiti wa muundo) na INP (mwingiliano).

Kupunguza JavaScript ya mteja (kiwango kikubwa zaidi)

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

Uwezo wa App Router ni kutuma JS kidogo. Mantiki nzito na umbizo la data inabaki kwenye seva; tu "kisiwa" halisi cha mwingiliano kinakuwa Client Components.

Kuboreshe picha ya LCP

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Kuboreshe fonti (CLS + upakaji) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Kutenganisha msimbo wa sehemu nzito za mteja ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Pakua polepole sehemu kubwa, zisizo muhimu za mteja (chati, wahariri, modali) ili ziwe tete kwenye bundili la awali. ## Kufanya kasi yenye mtiririko mara kwa mara ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Kuhifadhi kwa nguvu, kuhalali tena kwa usahihi ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Orodha ya kuangalia iliyoakamatiwa kwa vipimo ```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 ``` ## Pima, usikadiria ```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 ``` ## Kwa nini inakusudiwa Utendaji wa Next.js ni sehemu kubwa kuhusu **kutuma JavaScript kidogo** (Server Components, kutenganisha msimbo) na kutumia viboreshaji vya ndani (`next/image`, `next/font`, kufanya kasi, kuhifadhi) — kila moja inakabidhi moja kwa moja kwa Core Web Vital. Kujua zana gani inasahihisha kipimo gani (na kupima kwa `next build`/Lighthouse badala ya kukadiria) ndio jinsi unavyofikia kwa njia ya kimfumo alama nzuri za LCP/CLS/INP.

Kupunguza JavaScript ya mteja (kiwango kikubwa zaidi)

Kuboreshe picha ya LCP

Kuboreshe fonti (CLS + upakaji)

Kutenganisha msimbo wa sehemu nzito za mteja

Kufanya kasi yenye mtiririko mara kwa mara

Kuhifadhi kwa nguvu, kuhalali tena kwa usahihi

Orodha ya kuangalia iliyoakamatiwa kwa vipimo

Pima, usikadiria

Kwa nini inakusudiwa

Maswali yanayohusiana