Next.js లో పనితీరు మరియు Core Web Vitals లను ఎలా ఉత్తమం చేస్తారు?

Question

Accepted Answer

Next.js మీకు అనేక పనితీరు సాధనాలను ఇస్తుంది; వాటిని బాగా ఉపయోగించినప్పుడు, మీరు Core Web Vitals — LCP (లోడింగ్), CLS (లేআউట్ స్థిరత్వం) మరియు INP (ఇంటరঅ్యాక్టివిటీ) లను లక్ష్యం చేస్తారు.

క్లయింట్ జావాస్క్రిప్ట్‌ను తగ్గించండి (అతిపెద్ద లीవర్)

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 పనితీరు ఎక్కువగా **తక్కువ జావాస్క్రిప్ట్‌ను పంపించడం** (Server Components, కోడ్-స్ప్లిట్టింగ్) మరియు నిర్మిత-ఇన్ ఆప్టిమైజర్‌లను ఉపయోగించడం (`next/image`, `next/font`, స్ట్రీమింగ్, కేషింగ్) గురించి ఉంటుంది — ప్రతిটి నేరుగా Core Web Vital కు మ్యాప్ చేయబడుతుంది. ఏ సాధనం ఏ మెట్రిక్‌ను పరిష్కరిస్తుందో తెలుసుకోవడం (మరియు `next build`/Lighthouse తో కొలవడం బదులుగా ఊహించడం) మీరు క్రమపద్ధతిలో మంచి LCP/CLS/INP స్కోర్‌లను ఎలా చేరుకోవాలో.

క్లయింట్ జావాస్క్రిప్ట్‌ను తగ్గించండి (అతిపెద్ద లीవర్)

LCP ఇమేజ్‌ను ఉత్తమం చేయండి

ఫాంట్‌లను ఉత్తమం చేయండి (CLS + లోడింగ్)

భారీ క్లయింట్ కాంపోనెంట్‌లను కోడ్-విభజించండి

నెమ్మదిగా కంటెంట్‌ను స్ట్రీమ్ చేయండి

ఆక్రమణాత్మకంగా కాష్ చేయండి, ఖచ్చితంగా పునరుద్ధరించండి

మెట్రిక్‌లకు మ్యాప్ చేయబడిన చెక్‌లిస్ట్

కొలవండి, ఊహ చేయవద్దు

ఇది ఎందుకు ముఖ్యమైనది