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

Question

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 ```tsx import Image from "next/image";

// 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.