लोडिंग="lazy" एट्रिबयूट ब्राउज़र को लोडिंग को स्थगित करने के लिए कहता है - इमेज या iframe तब तक जब तक वह viewport में प्रवेश करने वाला न हो — बैंडविड्थ बचाता है और शुरुआती लोड को तेज़ करता है, बिना JavaScript के।
html
लोडिंग="lazy" एट्रिबयूट ब्राउज़र को लोडिंग को स्थगित करने के लिए कहता है - इमेज या iframe तब तक जब तक वह viewport में प्रवेश करने वाला न हो — बैंडविड्थ बचाता है और शुरुआती लोड को तेज़ करता है, बिना JavaScript के।
lazy — केवल लोड करें जब स्क्रॉलिंग इसे viewport के पास ले जाए।eager (डिफ़ॉल्ट) — तुरंत लोड करें, स्थिति की परवाह किए बिना।ब्राउज़र एक मार्जिन का उपयोग करता है (तत्व view में आने से पहले थोड़ा लोड करता है) ताकि छवि आमतौर पर तब तक तैयार हो जब उपयोगकर्ता इसे देखे।
<img src="x.jpg" loading="lazy" width="800" height="600" />
आयाम के बिना (या aspect-ratio के बिना), आलसी-लोड की गई छवि के पास कोई आरक्षित स्थान नहीं है, इसलिए जब यह लोड होता है तो पेज कूदता है — Cumulative Layout Shift (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" />
Largest Contentful Paint छवि पर लेज़ी-लोड करना वास्तव में प्रदर्शन को नुकसान पहुंचाता है — यह सबसे महत्वपूर्ण पिक्सल को देरी से लोड करता है। केवल ऑफ-स्क्रीन मीडिया पर लेज़ी-लोड करें।
// 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 छवियों को eager रखें (यहां तक कि fetchpriority="high") ताकि महत्वपूर्ण सामग्री अभी भी जल्दी लोड हो।