તમે Next.js માં પરફોર્મન્સ અને Core Web Vitals ને કેવી રીતે ઓપ્ટિમાઈઝ કરો છો?

Question

Accepted Answer

Next.js તમને ઘણા પરફોર્મન્સ સાધનો આપે છે; તેનો સારી રીતે ઉપયોગ Core Web Vitals ને લક્ષ્ય બનાવે છે — LCP (લોડિંગ), CLS (લેઆઉટ સ્થિરતા) અને INP (ઇન્ટરેક્ટિવિટી).

ક્લાયન્ટ JavaScript ને ઘટાડવો (સૌથી મોટો લિવર)

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

App Router ની સુપરપાવર ઓછા JS ને શિપ કરવાનો છે. ભારે તર્ક અને ડેટા ફોર્મેટિંગ સર્વર પર રહે છે; માત્ર સાચમાં ઇન્ટરેક્ટિવ "આઇલેન્ડ્સ" Client Components બને છે.

LCP ઇમેજને ઓપ્ટિમાઈઝ કરો

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## ફોન્ટ્સને ઓપ્ટિમાઈઝ કરો (CLS + લોડ) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## ભારે ક્લાયન્ટ કમ્પોનેન્ટ્સને કોડ-સ્પ્લિટ કરો ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` બड़ા, બિન-ગુરુત્વપૂર્ણ ક્લાયન્ટ કમ્પોનેન્ટ્સ (ચાર્ટ્સ, એડિટર્સ, મોડલ્સ) ને આલસુ-લોડ કરો જેથી તેઓ પ્રારંભિક બંડલને ફૂલો ન કરે. ## ધીમी સામગ્રી સ્ટ્રીમ કરો ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## આક્રમણાત્મક રીતે કેશ કરો, ચોક્કસ રીતે પુનઃપ્રમાણિત કરો ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## મેટ્રિક્સ માટે સંકલિત ચેકલિસ્ટ ```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 ``` ## માપો, અનુમાન લગાવશો નહીં ```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 ``` ## તેનું મહત્વ કેમ છે Next.js પરફોર્મન્સ મોટેભાગે **ઓછા JavaScript ને શિપ કરવા** (Server Components, code-splitting) અને બિલ્ટ-ઇન ઓપ્ટિમાઇઝર્સ (`next/image`, `next/font`, streaming, caching) નો ઉપયોગ કરવા વિશે છે — દરેક સીધું Core Web Vital સાથે મેપ થાય છે. કયો સાધન કયું મેટ્રિક સુધારે છે તે જાણવું (અને `next build`/Lighthouse સાથે માપવું વિપરીત અનુમાન લગાવવું) એવી રીતે છે જેમાં તમે સુવ્યવસ્થિત રીતે સારા LCP/CLS/INP સ્કોર્સ મેળવો.