तुम्ही 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 ``` मोठे, गैर-गंभीर क्लायंट घटक (चार्ट, एडिटर्स, मोडल्स) Lazy-load करा जेणेकरून ते प्रारंभिक बंडलला जाड न करतील. ## हळू सामग्री स्ट्रीम करा ```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 स्कोर्स मारता.