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 बन्छन्।

// 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 सँग मापन गर्नु बजाय अनुमान नगर्नु) यो हो जसरी तपाईं systematically राम्रो LCP/CLS/INP स्कोरहरू हिट गर्नुहुन्छ।

क्लाइन्ट JavaScript लाई न्यूनतम गर्नुहोस् (सबैभन्दा ठूलो लिभर)

LCP इमेज अप्टिमाइज गर्नुहोस्

फन्टहरू अप्टिमाइज गर्नुहोस् (CLS + लोड)

भारी क्लाइन्ट कम्पोनेन्टहरूलाई कोड-स्प्लिट गर्नुहोस्

ढिलो सामग्रीलाई स्ट्रिम गर्नुहोस्

आक्रामक रूपमा क्यास गर्नुहोस्, सटीकरूपमा पुनः मान्यता दिनुहोस्

मेट्रिक्समा म्यापद गरिएको चेकलिस्ट

मापन गर्नुहोस्, अनुमान नगर्नुहोस्

किन यो महत्त्वपूर्ण छ