ਤੁਸੀਂ 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 ਸਕੋਰ ਪ੍ਰਾਪਤ ਕਰੋ ਗੇ।