यह तकनीक छवियों को केवल तभी लोड करके वेब पेज के प्रदर्शन में सुधार करती है जब वे दृश्यमान हों या उपयोगकर्ता की स्क्रीन के पास हों।
आज की तेज़ गति वाली डिजिटल दुनिया में, एक उच्च-प्रदर्शन वाली वेबसाइट होना आवश्यक है। इसका एक महत्वपूर्ण पहलू यह सुनिश्चित करना है कि आपकी छवियां कुशलतापूर्वक लोड हों। उपयोगकर्ता एक सहज और तेज़ ब्राउज़िंग अनुभव की उम्मीद करते हैं, और यह लेख आपको दिखाएगा कि इसे कैसे प्राप्त किया जाए।
आप आलसी लोडिंग छवियों की अवधारणा का पता लगाएंगे और सीखेंगे कि इंटरसेक्शन ऑब्जर्वर एपीआई के साथ HTML और जावास्क्रिप्ट का उपयोग करके इसे कैसे लागू किया जाए।
आलसी लोडिंग क्या है?
आलसी लोडिंग आवश्यकता होने तक छवियों जैसे तत्वों की लोडिंग में देरी करती है। पृष्ठ लोड होने पर सभी छवियों को लोड करने के बजाय, आलसी लोडिंग केवल उन छवियों को लोड करती है जो वर्तमान में दृश्यमान हैं या उपयोगकर्ता के देखने के क्षेत्र के पास हैं। वेबसाइट के प्रदर्शन में यह सुधार प्रारंभिक लोड समय को कम करता है और बैंडविड्थ को संरक्षित करता है।
आलसी लोडिंग का उपयोग क्यों करें?
आपकी वेबसाइट पर छवियों की आलसी लोडिंग का उपयोग करने के कई अनिवार्य कारण हैं, जैसे:
- तेज़ प्रारंभिक पृष्ठ लोड: आलसी लोडिंग सभी छवियों को एक साथ लोड होने से रोकती है, जिससे प्रारंभिक पृष्ठ लोड समय कम हो जाता है। उपयोगकर्ता आपकी साइट के साथ शीघ्रता से इंटरैक्ट करना शुरू कर सकते हैं, जिससे उपयोगकर्ता अनुभव बेहतर होगा।
- बेहतर पृष्ठ प्रतिक्रियाशीलता: उपयोगकर्ताओं के स्क्रॉल करते समय छवियों को लोड करने से, वेबसाइट उत्तरदायी और तरल बनी रहती है, जिससे सभी सामग्री लोड होने की प्रतीक्षा किए बिना सुचारू स्क्रॉलिंग और नेविगेशन सुनिश्चित होता है।
- बैंडविड्थ बचत: आलसी लोडिंग बैंडविड्थ को संरक्षित करती है, जो इसे मोबाइल उपयोगकर्ताओं और धीमे इंटरनेट कनेक्शन वाले लोगों के लिए आदर्श बनाती है। ये हो सकता है अपनी वेबसाइट की डेटा खपत कम करेंजिससे यूजर्स को फायदा हो रहा है।
- एसईओ लाभ: गूगल जैसे सर्च इंजन पृष्ठ गति को एक रैंकिंग कारक मानें। आलसी लोडिंग कैन आपकी साइट के SEO प्रदर्शन पर सकारात्मक प्रभाव डालता है लोडिंग समय में सुधार करके।
अब जब आप समझ गए हैं कि आलसी लोडिंग क्यों फायदेमंद है, तो आइए जानें कि इसे कैसे लागू किया जाए।
आलसी लोडिंग लागू करना: HTML मार्कअप
आरंभ करने के लिए, आपको इसे शामिल करने के लिए अपने HTML कोड को संशोधित करना होगा लोड हो रहा है = "आलसी" आपके ऊपर विशेषता टैग.
<body><main>
<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>
<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>
<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>
main>
body>
लोड हो रहा है किसी वेब पेज पर तत्वों के लोडिंग व्यवहार को नियंत्रित करने के लिए HTML में विशेषता का उपयोग किया जाता है। जब आप सेट करें लोड हो रहा है = "आलसी" एक पर टैग, यह ब्राउज़र को संसाधन की लोडिंग को तब तक स्थगित करने के लिए कहता है जब तक इसकी आवश्यकता न हो।
फिलहाल, पेज इस तरह दिखता है:
आलसी लोडिंग को लागू करना: जावास्क्रिप्ट कार्यान्वयन
अपनी आलसी लोडिंग को अगले स्तर पर ले जाने के लिए, इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करें। यह एपीआई आपको यह देखने की सुविधा देता है कि कोई तत्व व्यूपोर्ट में कब आता है या बाहर जाता है।
आलसी लोडिंग छवियों के लिए इंटरसेक्शन ऑब्जर्वर को नियोजित करने के पीछे तर्क सरल है: जब पृष्ठ लोड होता है, तो यह निम्न-गुणवत्ता वाली छवि प्राप्त करता है।
फिर, जैसे ही यह छवि व्यूपोर्ट के भीतर दिखाई देने लगती है, जावास्क्रिप्ट इसे उच्च-गुणवत्ता वाले संस्करण के लिए स्वैप कर देता है। इसे व्यवहार में लाने के लिए, अपने HTML को संशोधित करें।
![]()
src="./image-one-low.webp"
alt=""
loading="lazy"
data-src="./image-one-high.jpg"
/>
</section>
![]()
src="./image-two-low.webp"
alt=""
loading="lazy"
data-src="./image-two-high.jpg"
/>
</section>
![]()
src="./image-three-low.webp"
alt=""
loading="lazy"
data-src="./image-three-high.jpg"
/>
</section>
यहां, प्राथमिक छवि स्रोत निम्न-गुणवत्ता वाला संस्करण है और उच्च-गुणवत्ता वाली छवि द्वितीयक स्रोत है। पेज तब इस तरह दिखता है:
इसके बाद, उन सभी छवियों का चयन करें जिन्हें आप आलसी-लोड करना चाहते हैं:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
उसके बाद, एक बनाएं इंटरसेक्शनऑब्जर्वर वस्तु।
const observer = new IntersectionObserver();
फिर प्रविष्टियों (एक सरणी) में पास करें इंटरसेक्शनऑब्जर्वरएंट्री ऑब्जेक्ट, देखे जा रहे तत्वों और व्यूपोर्ट के साथ उनके प्रतिच्छेदन का प्रतिनिधित्व करते हैं) और पर्यवेक्षक (द)। इंटरसेक्शनऑब्जर्वर उदाहरण स्वयं)।
const observer = new IntersectionObserver((lazyImages, observer) => { });
इसके बाद, प्रतिच्छेदन की जांच करें और जब भी वह तत्व प्रतिच्छेद करे तो निम्न-गुणवत्ता वाली छवि को उच्च-गुणवत्ता वाली छवि से बदलें।
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});अंत में, प्रत्येक तत्व के लिए अवलोकन प्रारंभ करें।
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
और इसके साथ ही, आपने जावास्क्रिप्ट के साथ आलसी लोडिंग लागू कर दी है।
आलसी लोडिंग संबंधी विचार
आलसी लोडिंग को एकीकृत करते समय, निम्नलिखित पहलुओं पर विचार करना महत्वपूर्ण हो जाता है:
- सरल उपयोग: पहुंच सुनिश्चित करने के लिए, छवियों के लिए वैकल्पिक पाठ प्रदान करें वैकल्पिक गुण। यह जानकारी स्क्रीन पाठकों के लिए निर्भरता बिंदु के रूप में कार्य करती है।
- ब्राउज़र संगतता: आलसी लोडिंग के कार्यान्वयन से पहले, विभिन्न ब्राउज़रों के साथ इसकी संगतता की पुष्टि करें। सभी ब्राउज़र इस सुविधा के लिए समर्थन प्रदान नहीं करते हैं. कुछ मामलों में, पॉलीफ़िल को शामिल करना अनिवार्य हो सकता है, खासकर पुराने ब्राउज़रों के लिए। एक औज़ार जैसा क्या मैं उपयोग कर सकता हूँ ब्राउज़र अनुकूलता का मूल्यांकन करने के लिए एक मूल्यवान संसाधन है।
- परिक्षण: विभिन्न उपकरणों और स्क्रीन आयामों में आलसी लोडिंग कार्यान्वयन का व्यापक परीक्षण सर्वोपरि महत्व रखता है।
वेबसाइट की गति और उपयोगकर्ता अनुभव को बढ़ाना
जब आप अपनी वेबसाइट पर छवियों के लिए आलसी लोडिंग को शामिल करते हैं, तो आप अपनी साइट की गति बढ़ा सकते हैं और उपयोगकर्ता अनुभव में सुधार कर सकते हैं। तेज़ लोडिंग समय और सहज ब्राउज़िंग अनुभव वही हैं जो उपयोगकर्ता चाहते हैं, और यह तकनीक वही प्रदान करती है।
साथ ही, आप बेहतर एसईओ का आनंद लेंगे और बैंडविड्थ उपयोग पर बचत करेंगे। तो, इंतज़ार क्यों करें? इस सीधी लेकिन शक्तिशाली विधि से आज ही अपनी वेबसाइट को अनुकूलित करना शुरू करें।
