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

Addy Osmani

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

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

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

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

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

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

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

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

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

लेज़ी-लोड होने वाले 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, एम्बेड की ज़रूरत के लिए सभी स्क्रिप्ट को लोड करने से बचता है. साथ ही, शुरुआती लोड पर यह करीब 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 की लेज़ी-लोडिंग को प्रोग्रेसिव एनहैंसमेंट के तौर पर लागू किया जा सकता है. ऐसे ब्राउज़र जो iframes पर loading=lazy के साथ काम करते हैं, वे iframe को लेज़ी-लोड करते हैं और जो ब्राउज़र loading एट्रिब्यूट के साथ काम नहीं करते वे इसे सुरक्षित रूप से अनदेखा कर देते हैं.

lazysizes JavaScript लाइब्रेरी का इस्तेमाल करके भी, ऑफ़स्क्रीन iframe को लेज़ी-लोड किया जा सकता है. शायद आप ऐसा करना चाहें, अगर:

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

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

लेज़ी लोडिंग का पता लगाने और उपलब्ध न होने पर लेज़ीसाइज़ फ़ेच करने की सुविधा पाने के लिए, इस पैटर्न का इस्तेमाल करें:

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

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

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

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

रिसॉर्स

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

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