आप 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 स्कोर प्राप्त करते हैं।