loading="lazy" विशेषता ब्राउজरला सांगते की प्रतिमा किंवा iframe लोडिंग स्थगित करा जोपर्यंत ते व्यूपोर्टमध्ये प्रवेश करण्याची तयारी नाही — बँडविड्थ वाचवा आणि प्रारंभिक लोड गती वाढवा, JavaScript शिवाय.
html
loading="lazy" विशेषता ब्राउজरला सांगते की प्रतिमा किंवा iframe लोडिंग स्थगित करा जोपर्यंत ते व्यूपोर्टमध्ये प्रवेश करण्याची तयारी नाही — बँडविड्थ वाचवा आणि प्रारंभिक लोड गती वाढवा, JavaScript शिवाय.
lazy — केवळ स्क्रोलिंग व्यूपोर्टच्या जवळ आल्यावर लोड करा.eager (डिफॉल्ट) — तात्काळ लोड करा, स्थान विचारात न घेता.ब्राउজर एक मार्जिन वापरतो (घटक दृश्यमध्ये स्क्रोल होण्यापूर्वी लोड करा) तर प्रतिमा सामान्यत: तयार असते जेव्हा वापरकर्ता ते पाहते.
<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" />
सर्ववृहत्तम सामग्री चित्र प्रतिमेचे स्लॉथ लोडिंग वास्तविकपणे कार्यक्षमता खराब करते — सर्वात महत्वाचे पिक्सेल विलंबित करते. केवळ स्क्रीन-बाहेर मीडिया स्लॉथ लोड करा.
// 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") म्हणून महत्वाचा सामग्री अजूनही द्रुत लोड होते.