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

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

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

## Intersection Observer API

Element कब viewport में आता है यह पता करें: `new IntersectionObserver((entries) => { entries.forEach(e => e.isIntersecting && loadImage(e.target)); })`। Scroll listeners की ज़रूरत नहीं। Scroll events से ज़्यादा efficient।

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

Images के लिए native `loading="lazy"`, JavaScript के लिए dynamic imports, और critical resources के लिए `<link rel=preload>`। Layout बनाए रखने और CLS घटाने के लिए placeholders (blur-up, skeleton screens) इस्तेमाल करें।

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

लंबे pages पर आम तौर पर initial payload 30-50% घटता है। LCP और FCP बेहतर होते हैं। लेकिन सावधानी से implement न किया जाए तो scroll performance बिगड़ सकती है। Real devices पर test करें।

त्वरित जाँच

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

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

*Answer:* जब तत्व व्यूपोर्ट में प्रवेश करते हैं तो पहचान करना. यह महंगे scroll listeners के बिना बताता है कि elements viewport में कब आए।