Yaya kuke inganta ƴawa da Core Web Vitals a cikin Next.js?

Question

Accepted Answer

Next.js yana ba ku karin kayanin aiki; amfani dasu sosai yana aiki kan Core Web Vitals — LCP ( kada), CLS (kwanciyar tsari) da INP (aiki).

Rage JavaScript na client (manyan rami)

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

Superpower na App Router ita ce aika kaɗan JS. Babbar ilimi da tsarin bayani suna zaune a kan server; kawai „jujuya" na aiki suna zama Client Components.

Inganta jigon LCP

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## Inganta fonts (CLS + iska) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## Code-split babbar components na client ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` Jinka da jiki babbar, mabakartacciyar components na client (alamu, masu gyare-gyare, modals) don kada su buyaje kundin na farko. ## Tilasta abun da jiya ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## Adana nauyi, sakamako daidai ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## Jerin karatu da aka taɓa zuwa mitan ```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 ``` ## Auna, kar ka zance ```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 ``` ## Me ya sa haka mahimmanci Next.js yawan aiki na gida shine **aiko kaɗan JavaScript** (Server Components, code-splitting) da amfani da masu inganta haɗin kan uku (`next/image`, `next/font`, streaming, caching) — kowannensu ya taɓa zuwa Core Web Vital kai tsaye. Sanin kayan aiki waɗe ya gyara mitan (da aunawa tare da `next build`/Lighthouse maimakon zance) shine yadda kuke tsaraka rubuta mabukatu LCP/CLS/INP.