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

Addy Osmani

Barry Pollard

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 77
• 79
• 121
• 16.4

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

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

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

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

iframe को लेज़ी-लोड क्यों करना चाहिए?

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

ऑफ़स्क्रीन iframes को जल्दी से लोड करने का मतलब है कि उपयोगकर्ता ऐसे एलिमेंट डाउनलोड करके डेटा बर्बाद करते हैं जो शायद उन्हें कभी न दिखें.

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

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

iframe के लिए, पहले से मौजूद लेज़ी लोडिंग की सुविधा कैसे काम करती है?

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

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

iframes पर 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 एम्बेड को लेज़ी-लोड करने से, उपयोगकर्ता अनुभव पर क्या असर पड़ता है?

लेज़ी-लोडिंग iframes को डिफ़ॉल्ट तौर पर सेट करने से, वेबसाइटें ज़्यादा रिस्पॉन्सिव हो जाएंगी. नीचे दिए गए उदाहरणों में, मीडिया एम्बेड के लिए इंटरैक्टिव होने में लगने वाला समय (टीटीआई) और डेटा में हुई बचत को दिखाया गया है. हालांकि, विज्ञापन के लिए लेज़ी-लोड होने वाले 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>

Chrome.com ने YouTube के एम्बेड किए गए वीडियो को स्क्रीन पर दिखने से पहले लोड करने की सुविधा का इस्तेमाल करके, TTi को 10 सेकंड तक कम किया.

ध्यान दें: अगर आपको YouTube पर एम्बेड किए गए वीडियो को लोड करने के बेहतर तरीके चाहिए, तो YouTube lite कॉम्पोनेंट इस्तेमाल करें.

Instagram

Instagram एम्बेड, मार्कअप का एक ब्लॉक और एक स्क्रिप्ट उपलब्ध कराते हैं. यह स्क्रिप्ट आपके पेज में iframe इंजेक्ट करती है. इस iframe को धीरे-धीरे लोड करने से, एम्बेड करने के लिए ज़रूरी सभी स्क्रिप्ट लोड करने की ज़रूरत नहीं पड़ती. साथ ही, शुरुआती लोड में करीब 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 का 'पसंद करें' प्लग इन.

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

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

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

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

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

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

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

संसाधन

लेज़ी लोडिंग के बारे में ज़्यादा आइडिया पाने के लिए, web.dev पर इमेज और वीडियो को लेज़ी लोड करने से जुड़ा कलेक्शन देखें.

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