# आलसी लोडिंग और अनंत स्क्रॉल — वेब प्रदर्शन अनुकूलन

Source: https://www.geekswithgeeks.com/hi/web-performance/web-perf-10

> उपयोगकर्ता इंटरैक्ट करने के साथ-साथ संसाधनों और सामग्री को लोड करें, प्रारंभिक पेलोड को कम करें।

## Intersection Observer API

Detect when elements enter viewport: `new IntersectionObserver((entries) => { entries.forEach(e => e.isIntersecting && loadImage(e.target)); })`. No scroll listeners needed. More efficient than scroll events.

## आलसी लोडिंग रणनीतियां

Native `loading="lazy"` for images, dynamic imports for JavaScript, `<link rel=preload>` for critical resources. Use placeholders (blur-up, skeleton screens) to maintain layout and reduce CLS.

## आलसी लोडिंग प्रदर्शन लाभ

Typically reduces initial payload by 30-50% on long pages. Improves LCP and FCP. However, can worsen scroll performance if not implemented carefully. Test on real devices.

त्वरित जाँच

**Quiz:** Intersection Observer का उपयोग किसके लिए किया जाता है?

- [ ] जब तत्व व्यूपोर्ट में प्रवेश करते हैं तो पहचान करना
- [ ] पृष्ठ लोड समय को मापना
- [ ] छवियों को संपीड़ित करना