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

एडी उस्मान

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

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

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

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

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

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

डेटा बचाने की सेटिंग का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए, अपने-आप लेज़ी-लोड होने वाले ऑफ़स्क्रीन iframe पर की गई Chrome की रिसर्च के आधार पर, लेज़ी-लोडिंग iframe, डेटा की 2-3% बचत कर सकता है. साथ ही, फ़र्स्ट कॉन्टेंटफ़ुल पेंट में 1 से 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 की मदद से डाइनैमिक रूप से iframes बनाना है, तो एलिमेंट पर iframe.loading = 'lazy' की सेटिंग भी काम करती है:

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

लेज़ी-लोड होने वाले लोकप्रिय iframe एम्बेड का क्या असर हो सकता है?

अगर वेब में इस तरह बदलाव किया जाता है कि लेज़ी-लोडिंग वाले ऑफ़स्क्रीन iframe डिफ़ॉल्ट हों, तो वह कुछ इस तरह दिखेगा:

लेज़ी-लोड होने वाले 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 एम्बेड पर स्विच किया, तब हमने मोबाइल डिवाइसों पर अपने पेज कितनी जल्दी इंटरैक्टिव होने वाले पेज से 10 सेकंड की बचत की. मैंने YouTube के साथ एक इंटरनल गड़बड़ी के बारे में बात की है, ताकि loading=lazy के एम्बेड कोड में जोड़ने के बारे में बातचीत की जा सके.

लेज़ी-लोडिंग Instagram एम्बेड (शुरुआती लोड होने पर करीब 100 केबी gzip किया गया):

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

लेज़ी लोड होने वाले 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>

हालांकि, ऊपर दिए गए एम्बेड मीडिया कॉन्टेंट के लिए लेज़ी-लोडिंग वाले iframe के संभावित फ़ायदों के बारे में बताते हैं, लेकिन विज्ञापनों के लिए ये फ़ायदे भी हो सकते हैं.

केस स्टडी: Facebook के सोशल प्लगिन की लेज़ी लोडिंग

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

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

क्या iframe क्रॉस-ब्राउज़र लेज़ी-लोड किया जा सकता है? हां

iframe लेज़ी-लोडिंग को प्रोग्रेसिव एनहैंसमेंट के तौर पर लागू किया जा सकता है. iframes पर loading=lazy के साथ काम करने वाले ब्राउज़र, iframe को लेज़ी-लोड करेंगे, जबकि loading एट्रिब्यूट को उन ब्राउज़र में सुरक्षित रूप से अनदेखा कर दिया जाएगा जो अभी तक यह काम नहीं करते.

lazysizes JavaScript लाइब्रेरी का इस्तेमाल करके भी ऑफ़स्क्रीन 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>

क्या ऐसे उदाहरण हैं जब loading=lazy वाले ऑफ़स्क्रीन iframe अब भी लोड होते हैं?

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

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

नतीजा

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

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