ऑफ़स्क्रीन iframe को लेज़ी-लोड करने का समय आ गया है!

Addy Osmani

Barry Pollard

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

इमेज के लिए लेज़ी-लोडिंग की तरह ही, ब्राउज़र को यह बताने के लिए loading एट्रिब्यूट का इस्तेमाल करें कि आपको iframe को लेज़ी-लोड करना है.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<iframe loading=lazy> के इस डेमो में, लेज़ी-लोडिंग वीडियो एम्बेड दिखाए गए हैं:

लेज़ी-लोड iframe क्यों?

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

डेटा सेवर मोड का इस्तेमाल करने वाले लोगों के लिए, ऑटोमैटिक लैज़ी-लोडिंग ऑफ़स्क्रीन iframes के बारे में Chrome की रिसर्च के आधार पर, लैज़ी-लोडिंग iframes की मदद से, डेटा में औसतन 2-3% की बचत हो सकती है. साथ ही, औसतन फ़र्स्ट कॉन्टेंटफ़ुल पेंट में 1-2% की कमी और 95वें पर्सेंटाइल में फ़र्स्ट इनपुट डेले (एफ़आईडी) में 2% की बढ़ोतरी हो सकती है.

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

iframe के लिए, बिल्ट-इन लेज़ी-लोडिंग कैसे काम करती है?

loading एट्रिब्यूट की मदद से, ब्राउज़र को ऑफ़स्क्रीन iframe और इमेज को तब तक लोड करने से रोका जा सकता है, जब तक उपयोगकर्ता उनके पास स्क्रोल नहीं कर लेते. loading में दो वैल्यू इस्तेमाल की जा सकती हैं:

• lazy: लेज़ी-लोडिंग के लिए सही कैंडिडेट.
• eager: लेज़ी-लोडिंग के लिए सही नहीं है. तुरंत लोड करें.

iframe पर loading एट्रिब्यूट का इस्तेमाल करने पर यह तरीका काम करता है:

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

एट्रिब्यूट की वैल्यू न देने का असर, संसाधन को साफ़ तौर पर जल्दी लोड करने जैसा ही होता है.

अगर आपको JavaScript का इस्तेमाल करके, डाइनैमिक तरीके से iframe बनाने हैं, तो एलिमेंट पर iframe.loading = 'lazy' सेट करने की सुविधा भी काम करती है:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

लेज़ी-लोडिंग से, लोकप्रिय iframe एम्बेड करने की सुविधा का इस्तेमाल करने से, उपयोगकर्ता अनुभव पर क्या असर पड़ता है?

लेज़ी-लोडिंग iframe को डिफ़ॉल्ट बनाने से, वेबसाइटों को ज़्यादा रिस्पॉन्सिव बनने में मदद मिलेगी. नीचे दिए गए उदाहरण, टाइम टू इंटरैक्टिव (टीटीआई) के सुधार और डेटा दिखाते हैं मीडिया एम्बेड के लिए बचत हो सकती है, लेकिन लेज़ी-लोडिंग विज्ञापन iframe के ज़रिए फ़ायदे.

YouTube

YouTube वीडियो को एम्बेड करने के लिए, पेज लोड होने के बाद वीडियो लोड होने की सुविधा का इस्तेमाल करने पर, पेज लोड होने में लगने वाला समय कम हो जाता है. साथ ही, पेज लोड होने के दौरान 500 केबी का डेटा भी बचता है:

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Instagram

Instagram एम्बेड, मार्कअप का एक ब्लॉक और एक स्क्रिप्ट उपलब्ध कराता है. यह स्क्रिप्ट आपके पेज में iframe इंजेक्ट करती है. इस iframe को लेज़ी-लोड करने से, Google के सभी पेजों को लोड करने की ज़रूरत नहीं पड़ती. एम्बेड की ज़रूरत को स्क्रिप्ट करें और शुरुआती लोड होने पर करीब 100 केबी बचा सकता है. क्योंकि ये एम्बेड अक्सर ज़्यादातर लेखों में व्यूपोर्ट के नीचे दिखाए जाते हैं, iframe लेज़ी-लोडिंग के लिए सही कैंडिडेट है.

Spotify

Spotify के एम्बेड को धीरे-धीरे लोड करने से, शुरुआती लोड में 514 केबी की बचत हो सकती है.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Facebook के सोशल प्लगिन

Facebook के सोशल प्लगिन की मदद से, डेवलपर अपने वेब पेजों में Facebook कॉन्टेंट को एम्बेड कर सकते हैं. इनमें से सबसे लोकप्रिय पसंद करने वाला प्लग इन है. यह एक बटन है, जिससे पता चलता है कि कितने उपयोगकर्ताओं ने पेज को "पसंद" किया है. डिफ़ॉल्ट रूप से, Facebook JSSDK का इस्तेमाल करके किसी वेब पेज में 'पसंद करें' प्लग इन को जोड़ने पर, करीब 215 केबी के रिसॉर्स जुड़ते हैं. इनमें से 197 केबी JavaScript के होते हैं. प्लगिन अक्सर इसके अंत में दिखाई देता है किसी लेख या पेज के आखिरी हिस्से के आस-पास मौजूद होते हैं. इसलिए, ऑफ़स्क्रीन होने पर उसे लोड होने में बहुत ज़्यादा समय लगता है नुकसान हो सकता है.

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

जब आपको iframe के लेज़ी-लोड होने पर ज़्यादा कंट्रोल चाहिए

ब्राउज़र-लेवल पर iframe लेज़ी लोडिंग, सभी मुख्य ब्राउज़र पर अच्छी तरह से काम करती है. साथ ही, ज़्यादातर इस्तेमाल के उदाहरणों के लिए इसका सुझाव दिया जाता है, ताकि JavaScript पर अतिरिक्त डिपेंडेंसी की ज़रूरत न पड़े.

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

क्या ऑफ़स्क्रीन iframe लेज़ी लोडिंग के अपवाद हैं?

डेटा बचाने की सेटिंग के लिए, अपने-आप लेज़ी-लोड होने वाले iframe के साथ की जाने वाली शुरुआती प्रयोग Chrome के उपयोगकर्ताओं में, छिपे हुए iframe के लिए एक अपवाद था. इसे अक्सर इन चीज़ों के लिए इस्तेमाल किया जाता है या विश्लेषण के लिए इस्तेमाल किए जाते हैं. इन सुविधाओं को धीरे-धीरे लोड होने से रोका गया था. साथ ही, इन सुविधाओं को काम करने से रोकने के लिए, इन्हें हमेशा लोड किया जाता था.

loading एट्रिब्यूट, इन हेयुरिस्टिक्स को लागू नहीं करता. इसलिए, डेवलपर को हमेशा यह चुनने का विकल्प मिलता है कि कौनसा कॉन्टेंट लेज़ी-लोड किया जाए. loading एट्रिब्यूट की वैल्यू हमेशा दी जानी चाहिए. हालांकि, यह दूरी की सीमाओं और ब्राउज़र के अन्य विकल्पों (जैसे, प्रिंटिंग) पर निर्भर करता है.

संसाधन

लेज़ी लोडिंग के आइडिया के लिए, web.dev की इमेज और वीडियो लेज़ी-लोडिंग का कलेक्शन.

समीक्षा करने के लिए, डॉम फ़ारोलिनो, स्कॉट लिटल, हुसैन डीरडेह, साइमन पीटर, केसी बास्केस, जो मेडली, और स्टोयन स्टीफ़ानोव का धन्यवाद.