آپ 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 ``` بڑے، غیر ضروری کلائنٹ اجزاء (چارٹس، ایڈیٹرز، موڈلز) کو سست لوڈ کریں تاکہ وہ ابتدائی bundle کو بھاری نہ بنائیں۔ ## سست مواد کو stream کریں ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## جارحانہ طور پر cache کریں، درست طریقے سے revalidate کریں ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## میٹرکس سے منسلک checklist ```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) اور built-in optimizers (`next/image`، `next/font`، streaming، caching) استعمال کرنے کے بارے میں ہے — ہر ایک براہ راست Core Web Vital سے منسلک ہے۔ جاننا کہ کون سا tool کون سا metric ٹھیک کرتا ہے (اور `next build`/Lighthouse کے ساتھ ناپنا نہ کہ اندازہ لگانا) یہ ہے کہ آپ منطقی طور پر اچھے LCP/CLS/INP اسکور حاصل کرتے ہیں۔