loading="lazy" অ্যাট্রিবিউট ব্রাউজারকে বলে যে একটি ইমেজ বা আইফ্রেম লোডিং স্থগিত করে যতক্ষণ না এটি ভিউপোর্টে প্রবেশ করতে চলেছে — ব্যান্ডউইথ সাশ্রয় করে এবং প্রাথমিক লোড দ্রুত করে, কোনো JavaScript ছাড়াই।
html
loading="lazy" অ্যাট্রিবিউট ব্রাউজারকে বলে যে একটি ইমেজ বা আইফ্রেম লোডিং স্থগিত করে যতক্ষণ না এটি ভিউপোর্টে প্রবেশ করতে চলেছে — ব্যান্ডউইথ সাশ্রয় করে এবং প্রাথমিক লোড দ্রুত করে, কোনো JavaScript ছাড়াই।
lazy — শুধুমাত্র স্ক্রলিং যখন এটি ভিউপোর্টের কাছাকাছি আসে তখন লোড করুন।eager (ডিফল্ট) — অবিলম্বে লোড করুন, অবস্থান নির্বিশেষে।ব্রাউজার একটি মার্জিন ব্যবহার করে (উপাদান দৃশ্যে আসার আগে সামান্য লোড করে) যাতে ব্যবহারকারী এটি দেখার সময় ইমেজ সাধারণত প্রস্তুত থাকে।
<img src="x.jpg" loading="lazy" width="800" height="600" />
ডাইমেনশন ছাড়াই (অথবা aspect-ratio ছাড়াই), অলসভাবে লোড করা ইমেজের কোনো সংরক্ষিত স্থান নেই, তাই যখন এটি লোড হয় পৃষ্ঠা ঝাঁকুনি দেয় — কিউমুলেটিভ লেআউট শিফট (CLS) আঘাত করে। সবসময় স্থান সংরক্ষণ করুন।
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
লার্জেস্ট কন্টেন্টফুল পেইন্ট ইমেজ লেজি-লোড করা প্রকৃতপক্ষে কর্মক্ষমতা হ্রাস করে — এটি সবচেয়ে গুরুত্বপূর্ণ পিক্সেল বিলম্ব করে। শুধুমাত্র অফ-স্ক্রিন মিডিয়া লেজি-লোড করুন।
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
নেটিভ loading="lazy" বেশিরভাগ ক্ষেত্রে এর প্রয়োজনীয়তা দূর করেছে (যদিও IntersectionObserver কাস্টম লজিকের জন্য এখনও উপকারী)।
নেটিভ লেজি লোডিং অনেক ইমেজ সহ দীর্ঘ পৃষ্ঠাগুলির জন্য প্রাথমিক বাইট এবং অনুরোধ কমিয়ে দেয় — মোবাইলের জন্য একটি বড় জয় — বিনামূল্যে।
সূক্ষ্মতা গুরুত্বপূর্ণ: CLS রক্ষা করতে ডাইমেনশন সংরক্ষণ করুন, এবং অ্যাবাভ-দ্য-ফোল্ড/LCP ইমেজগুলি আগ্রহী রাখুন (এমনকি fetchpriority="high") যাতে গুরুত্বপূর্ণ কন্টেন্ট এখনও দ্রুত লোড হয়।