loading="lazy" विशेषताले ब्राउजरलाई एक छवि वा iframe लोड गर्न स्थगित गर्न बताउँछ जब सम्म यो viewport मा प्रवेश गर्न अबाद छैन — ब्यान्डविथ बचाई र प्रारम्भिक लोड गति बढाई, कुनै JavaScript बिना।
html
loading="lazy" विशेषताले ब्राउजरलाई एक छवि वा iframe लोड गर्न स्थगित गर्न बताउँछ जब सम्म यो viewport मा प्रवेश गर्न अबाद छैन — ब्यान्डविथ बचाई र प्रारम्भिक लोड गति बढाई, कुनै JavaScript बिना।
lazy — केवल लोड गर्नुहोस् जब स्क्रोलिङले यसलाई viewport को नजिक ल्याउँछ।eager (पूर्वनिर्धारित) — तत्काल लोड गर्नुहोस्, स्थितिलाई परवाह नगरी।ब्राउजरले एक मार्जिन प्रयोग गर्छ (तत्व viewport मा स्क्रोल गर्नुभन्दा पहिले थोरै पहिले लोड गर्छ) त्यसैले छवि सामान्यतया प्रयोगकर्ताले यसलाई देख्दा तयार हुन्छ।
<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 संरक्षण गर्न आयामहरू आरक्षित गर्नुहोस्, र above-the-fold/LCP छविहरूलाई eager राख्नुहोस् (यहाँ सम्म fetchpriority="high") ताकि महत्वपूर्ण सामग्री अझै पनि छिटो लोड हुन्छ।