दूसरी तरह के संसाधनों की तुलना में, इमेज और <iframe> एलिमेंट अक्सर ज़्यादा बैंडविड्थ का इस्तेमाल करते हैं. <iframe> एलिमेंट के मामले में, उनमें मौजूद पेजों को लोड और रेंडर करने में, प्रोसेस होने में काफ़ी ज़्यादा समय लग सकता है.
लेज़ी लोडिंग वाली इमेज के मामले में, शुरुआती व्यूपोर्ट से बाहर की इमेज को लोड होने से रोकने से, शुरुआती व्यूपोर्ट में ज़्यादा ज़रूरी संसाधनों के लिए बैंडविड्थ के इस्तेमाल को कम करने में मदद मिल सकती है. इससे किसी पेज के सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) में सुधार हो सकता है. ऐसा कुछ मामलों में होता है, जब इंटरनेट कनेक्शन खराब हो. फिर से असाइन किए गए बैंडविथ को फिर से लोड करने से, एलसीपी उम्मीदवारों को तेज़ी से लोड करने और पेंट करने में मदद मिल सकती है.
अगर <iframe> एलिमेंट का सवाल है, तो पेज के इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) को लेज़ी लोड करके, स्टार्टअप के दौरान बेहतर बनाया जा सकता है. इसकी वजह यह है कि
<iframe> अपने सबरिसॉर्स के साथ पूरी तरह से अलग एचटीएमएल दस्तावेज़ है.
<iframe> एलिमेंट को एक अलग प्रोसेस में चलाया जा सकता है. हालांकि, अन्य थ्रेड के साथ किसी प्रोसेस को शेयर करना आम बात है. इस प्रोसेस की वजह से, ऐसी स्थितियां बन सकती हैं जिनमें पेज, उपयोगकर्ता के इनपुट के हिसाब से कम रिस्पॉन्सिव हो.
इसलिए, ऑफ़-स्क्रीन इमेज और <iframe> एलिमेंट को लोड होने से रोकने के लिए, इस पर कार्रवाई की जा सकती है. साथ ही, परफ़ॉर्मेंस के मामले में अच्छा रिटर्न पाने के लिए, इसमें काफ़ी कम मेहनत करनी पड़ती है. इस मॉड्यूल में, इन दो तरह के एलिमेंट को लेज़ी लोड करने के बारे में बताया गया है. इससे, पेज के शुरू होने की अहम अवधि के दौरान, तेज़ और बेहतर उपयोगकर्ता अनुभव देने में मदद मिलती है.
loading एट्रिब्यूट वाली इमेज की लेज़ी लोडिंग
loading एट्रिब्यूट को <img> एलिमेंट में जोड़ा जा सकता है, ताकि ब्राउज़र को यह बताया जा सके कि उन्हें कैसे लोड किया जाना चाहिए:
"eager", ब्राउज़र को यह बताता है कि इमेज तुरंत लोड होनी चाहिए, भले ही वह इमेज शुरुआती व्यूपोर्ट के बाहर हो. यहloadingएट्रिब्यूट की डिफ़ॉल्ट वैल्यू भी होती है."lazy"किसी इमेज को तब तक लोड करता है, जब तक कि वह दिखने वाले व्यूपोर्ट से तय की गई दूरी में न आ जाए. यह दूरी ब्राउज़र के हिसाब से अलग-अलग होती है. हालांकि, अक्सर यह दूरी इतनी बड़ी होती है कि उपयोगकर्ता के स्क्रोल करने तक इमेज लोड हो जाती है.
ध्यान दें कि अगर <picture> एलिमेंट का इस्तेमाल किया जा रहा है, तो loading एट्रिब्यूट अब भी उसके चाइल्ड <img> एलिमेंट पर लागू होना चाहिए, न
<picture> एलिमेंट पर. इसकी वजह यह है कि <picture> एलिमेंट एक कंटेनर है, जिसमें अलग-अलग इमेज के कैंडिडेट को पॉइंट करने वाले <source> एलिमेंट होते हैं. साथ ही, ब्राउज़र ने जो कैंडिडेट चुना है वह सीधे उसके चाइल्ड <img> एलिमेंट पर लागू हो जाता है.
शुरुआती व्यूपोर्ट में मौजूद इमेज को लेज़ी लोड न करें
आपको सिर्फ़ ऐसे <img> एलिमेंट में loading="lazy" एट्रिब्यूट जोड़ना चाहिए जो शुरुआती व्यूपोर्ट के बाहर मौजूद हैं. हालांकि, पेज को रेंडर करने से पहले, व्यूपोर्ट के अंदर किसी एलिमेंट के संबंध में किसी एलिमेंट की सही स्थिति के बारे में जान पाना मुश्किल हो सकता है. व्यूपोर्ट के अलग-अलग साइज़, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और डिवाइसों को ध्यान में
रखना चाहिए.
उदाहरण के लिए, डेस्कटॉप व्यूपोर्ट, मोबाइल फ़ोन पर व्यूपोर्ट से काफ़ी अलग हो सकता है, क्योंकि यह ज़्यादा वर्टिकल जगह रेंडर करता है जो शुरुआती व्यूपोर्ट में इमेज को फ़िट करने में मदद कर सकती है जो किसी छोटे डिवाइस के शुरुआती व्यूपोर्ट में दिखाई नहीं देगी. पोर्ट्रेट ओरिएंटेशन में इस्तेमाल किए जाने वाले टैबलेट, वर्टिकल स्पेस में भी काफ़ी जगह दिखाते हैं. शायद कुछ डेस्कटॉप डिवाइसों के मुकाबले ये टैबलेट ज़्यादा हों.
हालांकि, कुछ मामलों में यह साफ़ तौर पर बताया जाता है कि आपको loading="lazy" को लागू करने से बचना चाहिए. उदाहरण के लिए, हीरो इमेज या इमेज के इस्तेमाल के अन्य मामलों में आपको <img> एलिमेंट से loading="lazy" एट्रिब्यूट को शामिल नहीं करना चाहिए. अगर इमेज के इस्तेमाल के अन्य मामलों में <img> एलिमेंट किसी डिवाइस में वेबसाइट में फ़ोल्ड के ऊपर या लेआउट में सबसे ऊपर दिख सकते हैं, तो आपको ऐसा करना चाहिए. यह ऐसी इमेज के लिए और भी ज़्यादा ज़रूरी है
जिनके एलसीपी उम्मीदवार होने की संभावना होती है.
लेज़ी लोड की गई इमेज को ब्राउज़र का लेआउट पूरा करने का इंतज़ार करना होगा, ताकि यह पता चल सके कि इमेज की आखिरी जगह व्यूपोर्ट के अंदर है या नहीं. इसका मतलब है कि अगर व्यूपोर्ट में किसी <img> एलिमेंट में loading="lazy" एट्रिब्यूट है, तो सभी सीएसएस को डाउनलोड करने, पार्स करने, और पेज पर लागू करने के बाद ही उसका अनुरोध किया जाता है. इसे रॉ मार्कअप में पहले से लोड किए गए स्कैनर से फ़ेच होने के बाद ही फ़ेच किया जाता है.
<img> एलिमेंट पर मौजूद loading एट्रिब्यूट, सभी बड़े ब्राउज़र पर काम करता है. इसलिए, इमेज को लेज़ी लोड करने के लिए JavaScript का इस्तेमाल करने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि किसी पेज में पहले से मौजूद सुविधाओं को उपलब्ध कराने के लिए, पेज में अतिरिक्त JavaScript जोड़ने से आईएनपी जैसे पेज की परफ़ॉर्मेंस पर असर पड़ता है.
इमेज की लेज़ी लोडिंग का डेमो
<iframe> एलिमेंट की लेज़ी लोडिंग
जब तक व्यूपोर्ट में <iframe> एलिमेंट दिखाई नहीं देते, तब तक लेज़ी लोडिंग से अहम डेटा सेव हो सकता है. साथ ही, इससे अहम रिसॉर्स की लोडिंग बेहतर तरीके से हो सकती है जो टॉप-लेवल पेज को लोड करने के लिए ज़रूरी हैं. <iframe> एलिमेंट, किसी टॉप लेवल दस्तावेज़ में लोड किए गए सभी एचटीएमएल दस्तावेज़ होते हैं. इसलिए, इनमें काफ़ी संख्या में सबरिसॉर्स शामिल हो सकते हैं. खास तौर पर, JavaScript से, जो उस पेज के आईएनपी पर असर डाल सकता है.
आम तौर पर, तीसरे पक्ष के एम्बेड किए गए आइटम, <iframe> एलिमेंट के साथ इस्तेमाल किए जाते हैं. उदाहरण के लिए, एम्बेड किए गए वीडियो प्लेयर या सोशल मीडिया पोस्ट में आम तौर पर <iframe> एलिमेंट का इस्तेमाल किया जाता है. इन लोगों को अक्सर बहुत ज़्यादा सबरिसॉर्स की ज़रूरत होती है, जिसकी वजह से टॉप लेवल पेज के रिसॉर्स पर भी बैंडविड्थ को लेकर विवाद हो सकता है. उदाहरण के लिए, YouTube वीडियो के एम्बेड को लेज़ी लोड करने से शुरुआती पेज लोड के दौरान 500 से ज़्यादा किबी लोड होते हैं, जबकि Facebook लाइक बटन प्लगिन की लेज़ी लोडिंग से 200 से ज़्यादा केआईबी की बचत होती है. इनमें से ज़्यादातर JavaScript JavaScript है.
दोनों में से किसी भी स्थिति में, अगर किसी पेज पर वेबसाइट में फ़ोल्ड के नीचे <iframe> है, तो आपको इसे लेज़ी लोड करने के बारे में सोचना चाहिए, अगर पेज को पहले से लोड करना ज़रूरी नहीं है, तो ऐसा करने से उपयोगकर्ता अनुभव बेहतर हो सकता है.
<iframe> एलिमेंट के लिए loading एट्रिब्यूट
<iframe> एलिमेंट में मौजूद loading एट्रिब्यूट, सभी बड़े ब्राउज़र में भी काम करता है. loading एट्रिब्यूट और उनके व्यवहार की वैल्यू, loading एट्रिब्यूट का इस्तेमाल करने वाले <img> एलिमेंट की तरह ही होती हैं:
"eager"डिफ़ॉल्ट वैल्यू है. यह ब्राउज़र को सूचना देता है कि वह<iframe>एलिमेंट के एचटीएमएल और उसके सबरिसॉर्स को तुरंत लोड करे."lazy",<iframe>एलिमेंट के एचटीएमएल और उसके सबरिसॉर्स को तब तक लोड होने से रोकता है, जब तक कि वह व्यूपोर्ट से पहले से तय की गई दूरी में न आ जाए.
लेज़ी लोडिंग iframe का डेमो
किसी इमारत का बाहरी हिस्सा
पेज लोड होने के दौरान, एम्बेड को तुरंत लोड करने के बजाय, उपयोगकर्ता इंटरैक्शन की वजह से, उसे मांग पर लोड किया जा सकता है. कोई इमेज या दूसरा सही एचटीएमएल एलिमेंट दिखाकर ऐसा किया जा सकता है, जब तक कि उपयोगकर्ता उससे इंटरैक्ट नहीं करता. जब उपयोगकर्ता एलिमेंट के साथ इंटरैक्ट कर लेता है, तो उसे तीसरे पक्ष के एम्बेड से बदला जा सकता है. इस तकनीक को फ़ेकेड के नाम से जाना जाता है.
आम तौर पर, इसे इस्तेमाल का एक उदाहरण है तीसरे पक्ष की सेवाओं से एम्बेड किए गए वीडियो. जहां एम्बेड में, वीडियो कॉन्टेंट के साथ-साथ कई दूसरे और संभावित रूप से महंगे सबरिसॉर्स लोड करना भी शामिल हो सकता है. जैसे, JavaScript. ऐसे मामलों में—जब तक कि वीडियो के अपने-आप चलने की कानूनी ज़रूरत न हो, वीडियो एम्बेड करने के लिए ज़रूरी है कि उपयोगकर्ता प्लेबैक से पहले प्ले बटन पर क्लिक करके इंटरैक्ट करे.
यह एक ऐसी स्टैटिक इमेज दिखाने का शानदार मौका है जो विज़ुअल तौर पर वीडियो एम्बेड की तरह दिखती है. साथ ही, इस प्रोसेस में ज़्यादा बैंडविड्थ भी बचाई जा सकती है. जब उपयोगकर्ता
इमेज पर क्लिक करता है, तो उसे असल <iframe> एम्बेड से बदल दिया जाता है. इससे, तीसरे पक्ष के <iframe> एलिमेंट के एचटीएमएल और उसके सबरिसॉर्स को डाउनलोड
शुरू करने के लिए ट्रिगर करता है.
शुरुआती पेज लोड को बेहतर बनाने के अलावा, एक और फ़ायदा यह है कि अगर उपयोगकर्ता कभी वीडियो नहीं चलाता, तो उसे डिलीवर करने के लिए ज़रूरी संसाधन कभी डाउनलोड नहीं होते. यह एक अच्छा पैटर्न है, क्योंकि इससे यह पक्का होता है कि लोग सिर्फ़ वही डाउनलोड करें जो वे असल में चाहते हैं, लेकिन उपयोगकर्ता की ज़रूरतों के बारे में गलत अनुमान लगाए बिना.
चैट विजेट, फ़ासका इस्तेमाल करने की तकनीक का एक और बेहतरीन उदाहरण है. ज़्यादातर चैट विजेट, बहुत ज़्यादा JavaScript डाउनलोड करते हैं. इससे पेज लोड होने और उपयोगकर्ता के इनपुट देने पर बुरा असर पड़ सकता है. जैसे, किसी भी चीज़ को लोड करते समय, लोड होने में कम खर्च आता है, लेकिन चैट विजेट के मामले में, हर उपयोगकर्ता कभी भी उससे इंटरैक्ट नहीं करना चाहता.
वहीं दूसरी ओर, इसका इस्तेमाल करके तीसरे पक्ष के "चैट शुरू करें" बटन को नकली बटन से बदला जा सकता है. जब उपयोगकर्ता इसके साथ सही तरीके से इंटरैक्ट करता है—जैसे कि उचित समय के लिए पॉइंटर को होल्ड पर रखना या क्लिक करके—उपयोगकर्ता को ज़रूरत होने पर, वास्तविक और फ़ंक्शनल चैट विजेट को उसकी जगह पर रख दिया जाता है.
खास तौर पर, अपने बनाए गए हिस्से तैयार किए जा सकते हैं. हालांकि, तीसरे पक्ष की ज़्यादा लोकप्रिय कंपनियों के लिए भी ओपन सोर्स विकल्प उपलब्ध हैं. जैसे, YouTube वीडियो के लिए lite-youtube-embed, Vimeo वीडियो के लिए lite-vimeo-embed, और चैट विजेट के लिए रीऐक्ट लाइव चैट लोडर.
JavaScript की लेज़ी लोडिंग लाइब्रेरी
अगर आपको <video> एलिमेंट, <video> एलिमेंट poster इमेज, सीएसएस background-image प्रॉपर्टी से लोड की गई इमेज या इस्तेमाल न किए जा सकने वाले अन्य एलिमेंट की ज़रूरत है, तो JavaScript पर आधारित लेज़ी लोडिंग सलूशन, जैसे कि lazysize या yall.js का इस्तेमाल करें. ऐसा करना इसलिए ज़रूरी है, क्योंकि इस तरह के संसाधनों को लेज़ी लोड करने की सुविधा, ब्राउज़र लेवल की सुविधा नहीं है.
खास तौर पर, बिना ऑडियो ट्रैक वाले <video> एलिमेंट के अपने-आप चलने और लूप में चलने की सुविधा, ऐनिमेट किए गए GIF इस्तेमाल करने के ज़्यादा बेहतर विकल्प हैं. ये नतीजे, मिलती-जुलती विज़ुअल क्वालिटी वाले वीडियो रिसॉर्स से कई गुना ज़्यादा हो सकते हैं. फिर भी, बैंडविथ की वजह से ये वीडियो काफ़ी मायने रख सकते हैं.
इसलिए, लेज़ी लोडिंग एक ऐसा ऑप्टिमाइज़ेशन है जिससे बैंडविथ की बर्बादी
हो सकती है.
इनमें से ज़्यादातर लाइब्रेरी इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करके काम करती हैं. साथ ही, अगर किसी पेज का एचटीएमएल शुरुआती लोड के बाद बदल जाता है, तो म्यूटेशन ऑब्ज़र्वर एपीआई का भी इस्तेमाल किया जाता है, ताकि यह पता लगाया जा सके कि कोई एलिमेंट उपयोगकर्ता के व्यूपोर्ट में कब शामिल होता है. अगर इमेज दिख रही है या व्यूपोर्ट में दिख रही है, तो JavaScript लाइब्रेरी, बिना स्टैंडर्ड वाले एट्रिब्यूट (अक्सर data-src या उससे मिलते-जुलते एट्रिब्यूट) को src जैसी सही एट्रिब्यूट से बदल देती है.
मान लें कि आपके पास एक ऐसा वीडियो है जो ऐनिमेशन वाले GIF की जगह ले लेता है, लेकिन आपको JavaScript की सुविधा की मदद से इसे लेज़ी लोड करना है. नीचे दिए गए मार्कअप पैटर्न वाले yall.js में ऐसा किया जा सकता है:
<!-- The autoplay, loop, muted, and playsinline attributes are to
ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
<source data-src="video.webm" type="video/webm">
<source data-src="video.mp4" type="video/mp4">
</video>
डिफ़ॉल्ट रूप से, yall.js "lazy" क्लास वाले सभी ज़रूरी एचटीएमएल एलिमेंट को मॉनिटर करता है. पेज पर yall.js लोड होने और उसे एक्ज़ीक्यूट करने के बाद, वीडियो तब तक लोड नहीं होता, जब तक कि उपयोगकर्ता उसे स्क्रोल करके व्यूपोर्ट में न ले जाए. इस स्थिति में, <video> एलिमेंट के चाइल्ड <source> एलिमेंट के data-src एट्रिब्यूट को src एट्रिब्यूट में बदल दिया जाता है. इससे वीडियो डाउनलोड करने का अनुरोध मिलता है और वीडियो अपने-आप चलने लगता है.
देखें कि आपको कितना ज्ञान है
<img> और <iframe> एलिमेंट, दोनों के लिए loading एट्रिब्यूट की डिफ़ॉल्ट वैल्यू
कौनसी है?
"eager""lazy"JavaScript पर आधारित लेज़ी लोडिंग सलूशन का इस्तेमाल कब करना चाहिए?
loading एट्रिब्यूट काम नहीं करता. जैसे, ऐनिमेशन वाली इमेज की जगह अपने-आप चलने वाले वीडियो के लिए या <video> एलिमेंट की पोस्टर इमेज को लेज़ी लोड करने के लिए.
फ़साड का इस्तेमाल कब किया जा सकता है?
अगला: प्रीफ़ेच और प्रीरेंडरिंग
अब आपके पास लेज़ी लोड होने वाली इमेज और <iframe> एलिमेंट को मैनेज करने की सुविधा है. इसलिए, अब आप अपने उपयोगकर्ताओं की ज़रूरतों को ध्यान में रखते हुए, पेजों को ज़्यादा तेज़ी से लोड करने के लिए तैयार हैं. हालांकि, कुछ ऐसे मामले भी होते हैं जिनमें
संसाधनों को अनुमान के हिसाब से लोड करना ज़रूरी हो सकता है. अगले मॉड्यूल में, प्रीफ़ेच और प्रीरेंडरिंग के बारे में जानें. साथ ही, यह भी जानें कि कैसे इन तकनीकों का इस्तेमाल ध्यान से
करके बाद में किया जाता है, ताकि आगे के पेजों को पहले से लोड करके,
नेविगेशन की रफ़्तार बढ़ाई जा सके.