আপনি 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, কোড-স্প্লিটিং) এবং বিল্ট-ইন অপ্টিমাইজারগুলি ব্যবহার করার বিষয়ে (`next/image`, `next/font`, স্ট্রিমিং, ক্যাশিং) — প্রতিটি সরাসরি একটি Core Web Vital-এ ম্যাপ করে। কোন টুল কোন মেট্রিক ঠিক করে তা জানা (এবং অনুমানের পরিবর্তে `next build`/Lighthouse দিয়ে পরিমাপ করা) হল আপনি কীভাবে সিস্টেমেটিকভাবে ভাল LCP/CLS/INP স্কোর অর্জন করেন।