Lazy-loading কোনো কিছু download করা পিছিয়ে দেয় যতক্ষণ না তা প্রকৃতপক্ষে প্রয়োজন হয় — সাধারণত যখন এটি scroll করে view-তে আসতে চলেছে। এটি initial payload সঙ্কুচিত করে যাতে page-এর দৃশ্যমান অংশ দ্রুত load হয়।
Browser এটি natively একটি attribute দিয়ে করে:
সবসময় width/height রাখুন যাতে browser জায়গা সংরক্ষণ করে (layout shift এড়ায়)। কখনো আপনার LCP image lazy-load করবেন না — এটি পরিমাপ করা জিনিসটিকেই বিলম্বিত করে।
ভারী বা বিরল-ব্যবহৃত UI (modal, chart) একটি আলাদা chunk-এ ভাগ করুন যা চাহিদামাফিক load হয়:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Dynamic import() bundler-কে বলে একটি আলাদা file তৈরি করতে যা কেবল <Chart> প্রথম render হলে download হয়।
Lazy-loading একটি ভারী page-এর জন্য সবচেয়ে সহজ, সর্বোচ্চ-লিভারেজ জয়: শুরুতে কম download মানে দ্রুত LCP এবং parse করার জন্য কম JS। ইন্টারভিউয়াররা দেখতে চান আপনি hero image lazy-load না করেন — একটি ক্লাসিক ভুল যা আপনি যে metric সাহায্য করতে চাইছেন তাকেই ক্ষতি করে।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন