ऑफ़स्क्रीन 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. भले ही, वे उस तक स्क्रोल न करते हों.

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

लेज़ी-लोड होने वाले ऑफ़-स्क्रीन 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 का इस्तेमाल करने वाले वेब पेज में 'पसंद करें' प्लगिन का इस्तेमाल करके, रिसॉर्स, जिनमें से 197 केबी JavaScript है. प्लगिन अक्सर इसके अंत में दिखाई देता है किसी लेख या पेज के आखिरी हिस्से के आस-पास मौजूद होते हैं. इसलिए, ऑफ़स्क्रीन होने पर उसे लोड होने में बहुत ज़्यादा समय लगता है नुकसान हो सकता है.

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

क्रॉस-ब्राउज़र iframe लेज़ी-लोडिंग

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

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

लेज़ीसाइज़ का इस्तेमाल करके भी ऑफ़स्क्रीन iframe को लेज़ी-लोड किया जा सकता है JavaScript लाइब्रेरी:

<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 लेज़ी लोडिंग के अपवाद हैं?

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

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

संसाधन

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

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