लेज़ी लोड इमेज और <iframe> एलिमेंट

इमेज और <iframe> एलिमेंट, दूसरी तरह के डिवाइसों की तुलना में अक्सर ज़्यादा बैंडविथ इस्तेमाल करते हैं संसाधन. <iframe> एलिमेंट के मामले में, काफ़ी हद तक अतिरिक्त प्रोसेसिंग उनमें पेजों को लोड और रेंडर करने में समय लग सकता है.

लेज़ी लोडिंग के मामले में, इमेज के लोड होने में देरी विकल्प को बाहर रखा जा सकता है. इससे बैंडविथ के कॉन्टेंट को कम करने में मदद मिल सकती है में ज़्यादा ज़रूरी संसाधन शामिल करें. इससे बेहतर तरीके से कुछ मामलों में, पेज का सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) जहां नेटवर्क कनेक्शन होते हैं हैं और फिर से असाइन किया गया बैंडविड्थ, एलसीपी उम्मीदवारों को लोड करने में मदद कर सकता है और तेज़ी से पेंट करने में मदद करता है.

जहां <iframe> एलिमेंट की समस्या है, वहां पेज का इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) को शुरू करने के दौरान, लेज़ी लोडिंग से बेहतर बनाया जा सकता है. ऐसा इसलिए होता है, क्योंकि <iframe> अपने सब रिसॉर्स के साथ, पूरी तरह से अलग एचटीएमएल दस्तावेज़ है. <iframe> एलिमेंट को किसी अलग प्रोसेस में चलाया जा सकता है. हालांकि, यह आम बात है दूसरे थ्रेड के साथ प्रोसेस शेयर कर पाते हैं, जिससे शर्तें बन सकती हैं. जहां पेज, उपयोगकर्ता के इनपुट के लिए कम रिस्पॉन्सिव होते हैं.

इसलिए, ऑफ़-स्क्रीन इमेज और <iframe> एलिमेंट के लोड होने में देरी होने से करने लायक तकनीक का इस्तेमाल करती है और उचित फ़ायदे के लिए काफ़ी कम मेहनत करती है पहले से ज़्यादा कमाई कर सकते हैं. इस मॉड्यूल में, इन चीज़ों को लेज़ी लोड करने के बारे में बताया गया है पेज के दौरान तेज़ और बेहतर उपयोगकर्ता अनुभव के लिए दो तरह के एलिमेंट स्टार्टअप के लिए अहम अवधि हो.

loading एट्रिब्यूट की मदद से, इमेज की लेज़ी लोडिंग

ब्राउज़र को यह बताने के लिए कि कैसे loading एट्रिब्यूट को <img> एलिमेंट में जोड़ा जा सकता है तो उन्हें लोड किया जाना चाहिए:

• "eager", ब्राउज़र को बताता है कि इमेज तुरंत लोड हो जानी चाहिए, भले ही वह शुरुआती व्यूपोर्ट के बाहर हो. यह इसके लिए भी डिफ़ॉल्ट मान है loading एट्रिब्यूट.
• "lazy", इमेज को तब तक लोड होने से रोकता है, जब तक कि वह इमेज व्यूपोर्ट. यह दूरी ब्राउज़र के हिसाब से अलग-अलग होती है, लेकिन अक्सर यह दूरी पर सेट होती है इतनी बड़ी हो कि इमेज स्क्रोल करते समय इमेज लोड हो जाए.

यह बात भी ध्यान में रखें कि अगर <picture> एलिमेंट का इस्तेमाल किया जा रहा है, तो loading एट्रिब्यूट को अब भी उसके चाइल्ड <img> एलिमेंट पर लागू किया जाना चाहिए, न <picture> एलिमेंट को भी शामिल किया जा सकता है. ऐसा इसलिए है, क्योंकि <picture> एलिमेंट एक कंटेनर जिसमें अलग-अलग <source> एलिमेंट शामिल हैं, जो और ब्राउज़र द्वारा चुना गया उम्मीदवार सीधे लागू किया जाता है अपने चाइल्ड <img> एलिमेंट में.

उन इमेज को लेज़ी लोड न करें जो शुरुआती व्यूपोर्ट में हैं

आपको loading="lazy" एट्रिब्यूट को सिर्फ़ ऐसे <img> एलिमेंट में जोड़ना चाहिए जो को शुरुआती व्यूपोर्ट के बाहर रखा जा सकता है. हालांकि, यह जानना मुश्किल हो सकता है कि व्यूपोर्ट में, पेज से पहले किसी एलिमेंट के मिलते-जुलते एलिमेंट की सटीक जगह रेंडर किया गया. व्यूपोर्ट के अलग-अलग साइज़, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और डिवाइस होने चाहिए विचार किया गया है.

उदाहरण के लिए, डेस्कटॉप व्यूपोर्ट मोबाइल फ़ोन की मदद से, यह ज़्यादा वर्टिकल स्पेस देता है, जिसमें इमेज फ़िट हो सकती हैं में नहीं दिखाई देगा, जो छोटा डिवाइस. पोर्ट्रेट ओरिएंटेशन में इस्तेमाल किए गए टैबलेट भी स्क्रीन पर दिखते हैं काफ़ी ज़्यादा वर्टिकल स्पेस, शायद कुछ डेस्कटॉप के मुकाबले ज़्यादा डिवाइस.

हालांकि, कुछ ऐसे मामले हैं जिनमें यह साफ़ तौर पर बताया गया है कि आपको इनसे बचना चाहिए loading="lazy" लागू किया जा रहा है. उदाहरण के लिए, आपको हीरो इमेज के मामलों में <img> एलिमेंट से loading="lazy" एट्रिब्यूट, या इमेज इस्तेमाल के ऐसे अन्य मामले जहां <img> एलिमेंट के ऊपर दिखने की संभावना डिवाइस को फ़ोल्ड या लेआउट में सबसे ऊपर ले जाएं. यह और भी ज़रूरी है, जिनमें एलसीपी उम्मीदवार होने की संभावना होती है.

लेज़ी लोड होने वाली इमेज को ब्राउज़र के लेआउट खत्म होने तक इंतज़ार करना होगा यह जानने के लिए कि इमेज की आखिरी स्थिति व्यूपोर्ट में है या नहीं. इसका मतलब है अगर दिखने वाले व्यूपोर्ट में <img> एलिमेंट में loading="lazy" है है, तो इसका अनुरोध केवलबाद के बाद किया जाता है, ताकि सभी CSS डाउनलोड, पार्स, और पेज पर लागू किया जाता है—क्योंकि यह तब फ़ेच किया जाता है, जब रॉ मार्कअप में प्रीलोड स्कैनर को डालना.

<img> एलिमेंट में मौजूद loading एट्रिब्यूट, सभी मुख्य प्रॉडक्ट पर काम करता है ब्राउज़र में इमेज को लेज़ी लोड करने के लिए, JavaScript का इस्तेमाल करने की ज़रूरत नहीं है. पेज के लिए अतिरिक्त JavaScript, ताकि ब्राउज़र पहले से मौजूद सुविधाएं दे सके पेज की परफ़ॉर्मेंस के दूसरे पहलुओं पर असर डालता है. जैसे, आईएनपी.

इमेज के लेज़ी लोडिंग का डेमो

<iframe> एलिमेंट की लेज़ी लोड

<iframe> एलिमेंट की लेज़ी लोडिंग तब तक सेव होती है, जब तक वे व्यूपोर्ट में नहीं दिखते, तब तक ये एलिमेंट सेव किए जा सकते हैं साथ ही, इससे ज़रूरी डेटा और ज़रूरी संसाधनों के लोड होने में सुधार होता है टॉप-लेवल पेज को लोड करने के लिए. इसके अलावा, क्योंकि <iframe> एलिमेंट ज़रूरी है कि पूरे एचटीएमएल दस्तावेज़ किसी टॉप-लेवल के दस्तावेज़ में लोड हों, तो वे इसमें बड़ी संख्या में सबरिसॉर्स शामिल होते हैं—खास तौर पर JavaScript—जो किसी पेज के आईएनपी पर तब बहुत ज़्यादा असर पड़ता है, जब उस फ़्रेम में मौजूद टास्क के लिए प्रोसेस करने में लगने वाला समय ज़्यादा है.

आम तौर पर, <iframe> एलिमेंट में तीसरे पक्ष का एम्बेड किया गया कॉन्टेंट इस्तेमाल किया जाता है. उदाहरण के लिए, एम्बेड किए गए वीडियो प्लेयर या सोशल मीडिया पोस्ट में आम तौर पर, <iframe> एलिमेंट का इस्तेमाल किया जाता है, और इन्हें अक्सर बड़ी संख्या में सबरिसॉर्स की ज़रूरत होती है. इन सबरिसॉर्स से के नतीजों के आधार पर, टॉप लेवल पेज के संसाधनों के लिए बैंडविथ को लेकर विवाद हो सकता है. इस तौर पर उदाहरण के लिए, YouTube वीडियो को एम्बेड करने के लिए लेज़ी लोडिंग के दौरान, 500 KiB से ज़्यादा Facebook पसंद करें बटन प्लगिन को लेज़ी लोड होने के दौरान शुरुआती पेज लोड होने के दौरान 200 KiB से ज़्यादा की बचत होती है—जिसमें से ज़्यादातर JavaScript का इस्तेमाल किया जाता है.

दोनों ही स्थितियों में, जब भी किसी पेज पर फ़ोल्ड के नीचे <iframe> हो, तो आपको इसलिए, लेज़ी लोडिंग (लेज़ी लोडिंग) पर ध्यान दें. ऐसा तब ज़रूरी है, जब आइटम को फ़्रंट लोड करना ज़रूरी न हो, क्योंकि ऐसा करने से उपयोगकर्ता अनुभव काफ़ी बेहतर हो सकता है.

<iframe> एलिमेंट के लिए loading एट्रिब्यूट

<iframe> एलिमेंट पर loading एट्रिब्यूट का इस्तेमाल सभी मुख्य प्रॉडक्ट में भी किया जा सकता है ब्राउज़र खोलें. loading एट्रिब्यूट और उनके व्यवहार के लिए वैल्यू जो loading एट्रिब्यूट का इस्तेमाल करने वाले <img> एलिमेंट के साथ होते हैं:

• डिफ़ॉल्ट वैल्यू "eager" है. यह ब्राउज़र को <iframe> को लोड करने के बारे में बताता है HTML और उसके उप-संसाधनों को तुरंत शामिल कर देते हैं.
• "lazy", <iframe> एलिमेंट के एचटीएमएल और उसके सबरिसॉर्स को लोड होने से रोकता है जब तक कि वह व्यूपोर्ट से पहले से तय की गई दूरी के अंदर न हो.

लेज़ी लोडिंग iframe का डेमो

किसी इमारत का बाहरी हिस्सा

पेज लोड होने के दौरान एम्बेड को तुरंत लोड करने के बजाय, इसे लोड किया जा सकता है उपयोगकर्ता इंटरैक्शन के जवाब में मांग. एक इमेज दिखाकर ऐसा किया जा सकता है या कोई दूसरा सही एचटीएमएल एलिमेंट जब तक उपयोगकर्ता उससे इंटरैक्ट न करे. एक बार अगर कोई उपयोगकर्ता एलिमेंट के साथ इंटरैक्ट करता है, तो उसकी जगह तीसरे पक्ष का एम्बेड किया जा सकता है. इस तकनीक को फ़ैकेड के नाम से जाना जाता है.

आम तौर पर, वीडियो में तीसरे पक्ष की सेवाओं के ज़रिए वीडियो एम्बेड किए जाते हैं. एम्बेड करने के लिए, कई अतिरिक्त डेटा लोड करना पड़ सकता है. वीडियो कॉन्टेंट के साथ-साथ JavaScript जैसे सबरिसॉर्स ऐसे में मामला—जब तक कि किसी वीडियो को अपने-आप चलने की ज़रूरत न हो—जब तक कि एम्बेड किए गए वीडियो में वीडियो चलाने से पहले, उपयोगकर्ता को 'चलाएं' पर क्लिक करके उनसे इंटरैक्ट करने की ज़रूरत होती है बटन.

यह एक ऐसी स्टैटिक इमेज दिखाने का बेहतरीन मौका है जो विज़ुअल तौर पर इससे मिलती-जुलती है वीडियो को एम्बेड करके रखता है और प्रोसेस में ज़रूरी बैंडविथ सेव करता है. उपयोगकर्ता को एक बार इमेज पर क्लिक करने के बाद, उसे असल <iframe> एम्बेड से बदल दिया जाता है, जो तीसरे पक्ष के <iframe> एलिमेंट के एचटीएमएल और उसके सबरिसॉर्स को ट्रिगर करता है डाउनलोड हो रहा है.

शुरुआती पेज लोड को बेहतर बनाने के अलावा, एक और अहम फ़ायदा यह है कि अगर उपयोगकर्ता वीडियो कभी नहीं चलाता है, इसे डिलीवर करने के लिए ज़रूरी संसाधन कभी नहीं चलाए जाते डाउनलोड किया गया. यह एक अच्छा पैटर्न है, क्योंकि यह पक्का करता है कि उपयोगकर्ता सिर्फ़ वही पैटर्न डाउनलोड करे जो वे असल में इसके बारे में गलत धारणा किए बिना करना चाहते हैं कोई समस्या नहीं है.

चैट विजेट, घर के बाहरी हिस्से की बनावट के लिए बेहतरीन इस्तेमाल हैं. ज़्यादातर चैट विजेट बड़ी संख्या में JavaScript डाउनलोड करते हैं. इसकी वजह से पेज के लोड होने और उपयोगकर्ता के इनपुट के जवाब देने में लगने वाले समय पर असर पड़ता है. जैसा कुछ भी लोड करने पर होता है के मामले में यह लागत, कॉन्टेंट लोड होने पर खर्च होती है. हालांकि, चैट विजेट के मामले में यह खर्च नहीं होता हर उपयोगकर्ता इससे इंटरैक्ट नहीं करता.

वहीं दूसरी ओर, तीसरे पक्ष की "शुरू करें" विंडो की जगह, चैट करें" जिस पर नकली बटन लगा है. उपयोगकर्ता के सही तरह से इंटरैक्ट करने पर उदाहरण के लिए, सही समय तक उस पर पॉइंटर रखने की सुविधा या चैट करने पर चैट मैसेज दिखता है. उपयोगकर्ता को इसकी ज़रूरत होती है.

भले ही, आप अपनी असल दुनिया को खुद ही बना सकते हैं, लेकिन हमारे पास ओपन सोर्स हैं ज़्यादा लोकप्रिय तीसरे पक्षों के लिए उपलब्ध विकल्प, जैसे कि lite-youtube-embed YouTube वीडियो के लिए, lite-vimeo-embed Vimeo वीडियो के लिए, और React लाइव चैट चैट विजेट के लिए लोडर.

JavaScript लेज़ी लोडिंग लाइब्रेरी

अगर आपको <video> एलिमेंट, <video> एलिमेंट poster इमेज को लेज़ी लोड करना है, सीएसएस background-image प्रॉपर्टी से लोड की गई इमेज या ऐसी दूसरी इमेज जिसे इस्तेमाल नहीं किया जा सकता एलिमेंट में, आप ऐसा JavaScript पर आधारित लेज़ी लोडिंग समाधान की मदद से कर सकते हैं, जैसे कि lazsizes या yall.js का इस्तेमाल किया जाता है. इसकी वजह यह है कि इस तरह के रिसॉर्स, लेज़ी लोडिंग के दायरे में नहीं आते ब्राउज़र लेवल की सुविधा है.

खास तौर पर, बिना ऑडियो ट्रैक के <video> एलिमेंट अपने-आप चलने और लूप में चलाने की सुविधा ऐनिमेट किए गए GIF इस्तेमाल करने के बजाय एक बेहतर विकल्प है, जो अक्सर, एक जैसे विज़ुअल वाले वीडियो रिसॉर्स से कई गुना ज़्यादा होता है क्वालिटी. फिर भी, ये वीडियो अब भी बैंडविथ के लिहाज़ से अहम हो सकते हैं, इसलिए, लेज़ी लोडिंग एक अतिरिक्त ऑप्टिमाइज़ेशन है. इससे, बर्बाद हो रही बैंडविथ को कम कर सकता है.

इनमें से ज़्यादातर लाइब्रेरी Intersection Observer API का इस्तेमाल करके काम करती हैं—और इसके अलावा Mutation Observer API तब भी शुरुआती लोड—यह पहचानने के लिए कि कोई एलिमेंट उपयोगकर्ता के व्यूपोर्ट में कब आता है. अगर इमेज दिखती है या व्यूपोर्ट से ठीक पहले होती है—और फिर JavaScript लाइब्रेरी दिखती है नॉन-स्टैंडर्ड एट्रिब्यूट (अक्सर data-src या इससे मिलते-जुलते एट्रिब्यूट) को बदलता है src जैसे सही एट्रिब्यूट का इस्तेमाल करें.

मान लें कि आपके पास एक ऐसा वीडियो है जो ऐनिमेशन वाले GIF की जगह लेता है, लेकिन आपको इसे लेज़ी लोड करना है शामिल हैं. yll.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 लोड होने और एक बार एक्ज़ीक्यूट होने के बाद, वीडियो लोड होती है जब तक कि उपयोगकर्ता इसे व्यूपोर्ट में स्क्रोल नहीं करता. उस समय, data-src <video> एलिमेंट के चाइल्ड <source> एलिमेंट में मौजूद एट्रिब्यूट को बदल दिया गया है इसके लिए src एट्रिब्यूट इस्तेमाल किए जाएंगे. इससे वीडियो डाउनलोड करने का अनुरोध भेजा जाएगा और उसे अपने-आप चलाना शुरू कर दें.

अपने ज्ञान को परखें

अगला चरण: प्रीफ़ेच करना और प्रीरेंडरिंग करना

अब आपको लेज़ी लोडिंग इमेज और <iframe> एलिमेंट के लिए हैंडल मिल चुका है, आपका स्टेटस तब बेहतर होता है, जब यह पक्का हो जाए कि अपने उपयोगकर्ताओं की ज़रूरतों का सम्मान करते हैं. हालांकि, कुछ मामलों में इसके लिए, अनुमान के हिसाब से संसाधनों को लोड करना ज़रूरी हो सकता है. अगले मॉड्यूल में, प्रीफ़ेच और प्रीरेंडरिंग के बारे में जानें. साथ ही, यह भी जानें कि इन तकनीकों का इस्तेमाल कैसे किया जाता है काफ़ी हद तक मदद करता है, क्योंकि इससे अगले पेजों पर नेविगेशन की स्पीड समय से पहले करना होगा.