तीसरे पक्ष के एम्बेड इस्तेमाल करने के सबसे सही तरीके

तीसरे पक्ष के लोकप्रिय एम्बेड को बेहतर तरीके से लोड करने की तकनीकों के बारे में खास जानकारी.

Addy Osmani

Katie Hempenius

Leena Sohoni

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

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

एम्बेड क्या है

तीसरे पक्ष का एम्बेड किया गया कॉन्टेंट, आपकी साइट पर दिखने वाला ऐसा कॉन्टेंट होता है जो:

• आपने नहीं लिखा है
• तीसरे पक्ष के सर्वर से दिखाए जाते हैं

एम्बेड का इस्तेमाल अक्सर इनमें किया जाता है:

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

तीसरे पक्ष के एम्बेड, आम तौर पर पेज पर <iframe> एलिमेंट में लोड किए जाते हैं. तीसरे पक्ष की कंपनियां, एचटीएमएल स्निपेट उपलब्ध कराती हैं. इनमें अक्सर <iframe> होता है, जो मार्कअप, स्क्रिप्ट, और स्टाइलशीट से बना पेज दिखाता है. कुछ कंपनियां, स्क्रिप्ट स्निपेट का भी इस्तेमाल करती हैं. यह स्निपेट, अन्य कॉन्टेंट को शामिल करने के लिए <iframe> को डाइनैमिक तौर पर इंजेक्ट करता है. इससे तीसरे पक्ष के एम्बेड की साइज़ ज़्यादा हो सकती है. साथ ही, पहले पक्ष के कॉन्टेंट को लोड होने में लगने वाले समय की वजह से, पेज की परफ़ॉर्मेंस पर असर पड़ सकता है.

तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट की परफ़ॉर्मेंस पर असर

कई लोकप्रिय एम्बेड में 100 केबी से ज़्यादा का JavaScript शामिल होता है. कभी-कभी यह 2 एमबी तक भी हो सकता है. इन्हें लोड होने में ज़्यादा समय लगता है. साथ ही, इन्हें लागू करने के दौरान मुख्य थ्रेड को व्यस्त रखा जाता है. Lighthouse और Chrome DevTools जैसे परफ़ॉर्मेंस मॉनिटरिंग टूल, परफ़ॉर्मेंस पर तीसरे पक्ष के एम्बेड के असर को मेज़र करने में मदद करते हैं.

तीसरे पक्ष के कोड का असर कम करना Lighthouse ऑडिट में, तीसरे पक्ष की सेवा देने वाली उन कंपनियों की सूची दिखती है जिनका इस्तेमाल पेज पर किया जाता है. साथ ही, इसमें साइज़ और मुख्य थ्रेड को ब्लॉक करने में लगने वाला समय भी दिखता है. यह ऑडिट, Chrome DevTools में Lighthouse टैब में उपलब्ध है.

समय-समय पर, एम्बेड और तीसरे पक्ष के कोड की परफ़ॉर्मेंस पर पड़ने वाले असर का ऑडिट करना अच्छा होता है. ऐसा इसलिए, क्योंकि एम्बेड का सोर्स कोड बदल सकता है. इस मौके का इस्तेमाल करके, किसी भी ग़ैर-ज़रूरी कोड को हटाया जा सकता है.

लोड करने के सबसे सही तरीके

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

स्क्रिप्ट का क्रम

अच्छी तरह से डिज़ाइन किए गए पेज पर, पहले पक्ष का मुख्य कॉन्टेंट पेज का फ़ोकस होगा. वहीं, तीसरे पक्ष के एम्बेड, साइड-बार में दिखेंगे या पहले पक्ष के कॉन्टेंट के बाद दिखेंगे.

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

तीसरे पक्ष के एम्बेड के अनुरोध, पहले पक्ष के कॉन्टेंट को लोड करने में रुकावट डाल सकते हैं. इसलिए, तीसरे पक्ष के स्क्रिप्ट टैग की पोज़िशन अहम है. स्क्रिप्ट से पेज लोड होने के क्रम पर असर पड़ सकता है, क्योंकि स्क्रिप्ट लागू होने के दौरान DOM का निर्माण रुक जाता है. तीसरे पक्ष के स्क्रिप्ट टैग को मुख्य पहले पक्ष के टैग के बाद रखें. साथ ही, उन्हें अलग-अलग समय पर लोड करने के लिए, async या defer एट्रिब्यूट का इस्तेमाल करें.

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

लेज़ी लोडिंग

आम तौर पर, तीसरे पक्ष का कॉन्टेंट मुख्य कॉन्टेंट के बाद आता है. इसलिए, हो सकता है कि पेज लोड होने पर वह व्यूपोर्ट में न दिखे. ऐसे में, तीसरे पक्ष के संसाधनों को तब तक डाउनलोड नहीं किया जा सकता, जब तक उपयोगकर्ता पेज के उस हिस्से तक स्क्रोल नहीं कर लेता. इससे, पेज के शुरुआती लोड को ऑप्टिमाइज़ करने में मदद मिलती है. साथ ही, तय डेटा प्लान और धीमे नेटवर्क कनेक्शन का इस्तेमाल करने वाले लोगों के लिए, डाउनलोड करने की लागत भी कम हो जाती है.

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

<iframe> के लिए ब्राउज़र लेज़ी-लोडिंग

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

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

लोडिंग एट्रिब्यूट में ये वैल्यू इस्तेमाल की जा सकती हैं:

• lazy: इससे पता चलता है कि ब्राउज़र को iframe को लोड करने में देरी करनी चाहिए. व्यूपोर्ट के पास पहुंचने पर, ब्राउज़र iframe को लोड करेगा. अगर iframe, लेज़ी लोडिंग के लिए सही है, तो इसका इस्तेमाल करें.
• eager: iframe तुरंत लोड हो जाता है. अगर iframe, लेज़ी-लोडिंग के लिए सही नहीं है, तो इसका इस्तेमाल करें. अगर loading एट्रिब्यूट की वैल्यू नहीं दी गई है, तो Lite मोड को छोड़कर, यह डिफ़ॉल्ट तौर पर लागू होता है.
• auto: ब्राउज़र यह तय करता है कि इस फ़्रेम को लेज़ी-लोड करना है या नहीं.

loading एट्रिब्यूट के साथ काम न करने वाले ब्राउज़र, इसे अनदेखा कर देते हैं. इसलिए, ब्राउज़र-लेवल पर लेज़ी-लोडिंग को प्रगतिशील बेहतर बनाने के तौर पर लागू किया जा सकता है. इस एट्रिब्यूट के साथ काम करने वाले ब्राउज़र में, distance-from-viewport थ्रेशोल्ड (वह दूरी जिस पर iframe लोड होना शुरू होता है) के लिए अलग-अलग तरीके हो सकते हैं.

अलग-अलग तरह के एम्बेड के लिए, iframe को लेज़ी लोड करने के कुछ तरीके यहां दिए गए हैं.

• YouTube वीडियो: YouTube वीडियो प्लेयर के iframe को लेज़ी-लोड करने के लिए, YouTube के दिए गए एम्बेड कोड में loading एट्रिब्यूट शामिल करें. YouTube वीडियो को लेज़ी लोड करने से, पेज के शुरुआती लोड में करीब 500 केबी की बचत हो सकती है.

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

• Google Maps: Google Maps के iframe को लेज़ी-लोड करने के लिए, Google Maps Embed API से जनरेट किए गए iframe एम्बेड के कोड में loading एट्रिब्यूट शामिल करें. यहां Google Cloud API पासकोड के लिए प्लेसहोल्डर वाले कोड का उदाहरण दिया गया है.

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

lazysizes लाइब्रेरी

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

lazysizes, इमेज और iframe, दोनों के लिए तेज़ और एसईओ-फ़्रेंडली लेज़ी लोडर है. कॉम्पोनेंट डाउनलोड करने के बाद, इसका इस्तेमाल YouTube एम्बेड के लिए iframe के साथ किया जा सकता है. इसके लिए, यह तरीका अपनाएं.

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

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

इसी तरह, तीसरे पक्ष के अन्य एम्बेड के लिए, iframes के साथ लेज़ी साइज़ का इस्तेमाल किया जा सकता है.

ध्यान दें कि जब कोई एलिमेंट दिखता है, तब lazysizes इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करके इसका पता लगाता है.

Facebook में data-lazy का इस्तेमाल करना

Facebook, अलग-अलग तरह के सोशल प्लगिन उपलब्ध कराता है, जिन्हें एम्बेड किया जा सकता है. इसमें पोस्ट, टिप्पणियां, वीडियो, और सबसे लोकप्रिय पसंद करें बटन शामिल हैं. सभी प्लग इन में data-lazy के लिए एक सेटिंग शामिल होती है. इसे true पर सेट करने से यह पक्का होता है कि प्लग इन, loading="lazy" iframe एट्रिब्यूट सेट करके, ब्राउज़र के लेज़ी-लोडिंग मैकेनिज्म का इस्तेमाल करेगा.

Instagram फ़ीड की लेज़ी लोडिंग

Instagram, एम्बेड करने के लिए मार्कअप का एक ब्लॉक और स्क्रिप्ट उपलब्ध कराता है. स्क्रिप्ट, पेज में <iframe> इंजेक्ट करती है. इस <iframe> को लैज़ी-लोड करने से परफ़ॉर्मेंस बेहतर हो सकती है, क्योंकि एम्बेड किए गए कॉन्टेंट का साइज़, ज़िप किया गया साइज़ 100 केबी से ज़्यादा हो सकता है. WordPress साइटों के लिए, WPZoom और Elfsight जैसे कई Instagram प्लग इन, लेज़ी-लोडिंग का विकल्प देते हैं.

एम्बेड किए गए कॉन्टेंट को फ़ेसेड से बदलना

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

फ़ेसेड एक स्टैटिक एलिमेंट होता है, जो एम्बेड किए गए तीसरे पक्ष के एलिमेंट से मिलता-जुलता दिखता है. हालांकि, यह काम नहीं करता. इसलिए, पेज लोड होने में इससे कम समय लगता है. यहां कुछ ऐसी रणनीतियां दी गई हैं जिनकी मदद से, उपयोगकर्ता को कुछ फ़ायदा देते हुए, एम्बेड किए गए वीडियो को बेहतर तरीके से लोड किया जा सकता है.

फ़ेसेड के तौर पर स्टैटिक इमेज का इस्तेमाल करना

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

DevTools, इमेज को png के तौर पर कैप्चर करता है. हालांकि, बेहतर परफ़ॉर्मेंस के लिए, इसे WebP फ़ॉर्मैट में बदला जा सकता है.

फ़ेसेड के तौर पर डाइनैमिक इमेज का इस्तेमाल करना

इस तकनीक की मदद से, रन टाइम पर इंटरैक्टिव एम्बेड से जुड़ी इमेज जनरेट की जा सकती हैं. यहां कुछ ऐसे टूल दिए गए हैं जिनकी मदद से, अपने पेजों पर एम्बेड किए गए वीडियो के स्टैटिक वर्शन जनरेट किए जा सकते हैं.

• Maps Static API: Google Maps Static API सेवा, स्टैंडर्ड एचटीटीपी अनुरोध में शामिल यूआरएल पैरामीटर के आधार पर मैप जनरेट करती है. साथ ही, मैप को एक इमेज के तौर पर दिखाती है, जिसे वेब पेज पर दिखाया जा सकता है. यूआरएल में Google Maps API पासकोड शामिल होना चाहिए. साथ ही, इसे पेज पर <img> टैग में src एट्रिब्यूट के तौर पर डाला जाना चाहिए.

  स्टैटिक मैप मेकर टूल की मदद से, यूआरएल के लिए ज़रूरी पैरामीटर कॉन्फ़िगर किए जा सकते हैं. साथ ही, आपको रीयल-टाइम में इमेज एलिमेंट का कोड मिलता है.

  यहां दिए गए स्निपेट में, Maps के स्टैटिक एपीआई यूआरएल पर सेट किए गए सोर्स वाली इमेज का कोड दिखाया गया है. इसे लिंक टैग में शामिल किया गया है, ताकि इमेज पर क्लिक करके असल मैप को ऐक्सेस किया जा सके. (ध्यान दें: यूआरएल में एपीआई पासकोड एट्रिब्यूट शामिल नहीं है)

  <a href="https://www.google.com/maps/place/Albany,+NY/">
  <img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
  </a>
  

• Twitter स्क्रीनशॉट: मैप के स्क्रीनशॉट की तरह ही, इस कॉन्सेप्ट की मदद से लाइव फ़ीड के बजाय, Twitter का स्क्रीनशॉट डाइनैमिक तौर पर जोड़ा जा सकता है. Tweetpik एक ऐसा टूल है जिसका इस्तेमाल करके, ट्वीट के स्क्रीनशॉट लिए जा सकते हैं. Tweetpik API, ट्वीट का यूआरएल स्वीकार करता है और उसके कॉन्टेंट के साथ एक इमेज दिखाता है. एपीआई, इमेज के बैकग्राउंड, रंगों, बॉर्डर, और डाइमेंशन को पसंद के मुताबिक बनाने के लिए पैरामीटर भी स्वीकार करता है.

फ़ेडेस को बेहतर बनाने के लिए, क्लिक-टू-लोड का इस्तेमाल करना

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

1. पेज लोड होने पर: पेज पर फ़ेसेड या स्टैटिक एलिमेंट शामिल होता है.
2. माउस घुमाने पर: फ़ेसेड, एम्बेड करने की सुविधा देने वाली तीसरे पक्ष की कंपनी से पहले से कनेक्ट हो जाता है.
3. क्लिक करने पर: फ़ेसेड को तीसरे पक्ष के प्रॉडक्ट से बदल दिया जाता है.

फ़ेसेड का इस्तेमाल, तीसरे पक्ष के एम्बेड किए गए वीडियो प्लेयर, चैट विजेट, पुष्टि करने की सेवाओं, और सोशल मीडिया विजेट के साथ किया जा सकता है. YouTube वीडियो के ऐसे एम्बेड जो सिर्फ़ प्ले बटन वाली इमेज होते हैं, वे अक्सर हमें दिखते हैं. असल वीडियो सिर्फ़ तब लोड होता है, जब इमेज पर क्लिक किया जाता है.

इंटरैक्शन पर इंपोर्ट पैटर्न का इस्तेमाल करके, क्लिक-टू-लोड फ़ेसेड बनाया जा सकता है. इसके अलावा, अलग-अलग तरह के एम्बेड के लिए उपलब्ध इन ओपन सोर्स फ़ेसेड में से किसी एक का इस्तेमाल किया जा सकता है.

• YouTube का फ़ेसेड

  Lite-youtube-embed, YouTube प्लेयर के लिए सुझाया गया फ़ेसेड है. यह असल प्लेयर की तरह दिखता है, लेकिन 224 गुना तेज़ है. इसका इस्तेमाल करने के लिए, स्क्रिप्ट और स्टाइलशीट डाउनलोड करें. इसके बाद, एचटीएमएल या JavaScript में <lite-youtube> टैग का इस्तेमाल करें. YouTube पर काम करने वाले कस्टम प्लेयर पैरामीटर, params एट्रिब्यूट की मदद से शामिल किए जा सकते हैं.

  <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
  

  यहां lite-youtube-embed और असल एम्बेड के बीच की तुलना की गई है.

  

  

  YouTube और Vimeo प्लेयर के लिए, lite-youtube, lite-vimeo-embed, और lite-vimeo जैसे अन्य फ़ेसेड भी उपलब्ध हैं.

• चैट विजेट का फ़ेसेड

  React लाइव चैट लोडर, चैट को एम्बेड करने के बजाय, एक बटन लोड करता है. यह बटन, चैट के एम्बेड किए गए वर्शन जैसा दिखता है. इसका इस्तेमाल, चैट की सेवा देने वाले अलग-अलग प्लैटफ़ॉर्म के साथ किया जा सकता है. जैसे, Intercom, Help Scout, Messenger. चैट विजेट की तुलना में, मिलता-जुलता विजेट का साइज़ बहुत कम होता है और यह तेज़ी से लोड होता है. जब उपयोगकर्ता बटन पर कर्सर घुमाता है या उस पर क्लिक करता है, तब इसे असली चैट विजेट से बदला जा सकता है. इसके अलावा, अगर पेज लंबे समय से इस्तेमाल में नहीं है, तो भी ऐसा किया जा सकता है. Postmark की केस स्टडी में बताया गया है कि उन्होंने react-live-chat-loader को कैसे लागू किया और परफ़ॉर्मेंस में क्या सुधार हुए.

  

एम्बेड किए गए वीडियो हटाना या उन्हें लिंक से बदलना

अगर आपको लगता है कि तीसरे पक्ष के कुछ एम्बेड की वजह से, पेज लोड होने में ज़्यादा समय लग रहा है और ऊपर बताई गई किसी भी तकनीक का इस्तेमाल नहीं किया जा सकता, तो एम्बेड को पूरी तरह से हटा दें. अगर आपको अब भी अपने उपयोगकर्ताओं को एम्बेड किए गए कॉन्टेंट को ऐक्सेस करने की अनुमति देनी है, तो target="_blank" का इस्तेमाल करके उसका लिंक दें. इससे उपयोगकर्ता उस पर क्लिक करके, उसे दूसरे टैब में देख सकते हैं.

लेआउट की स्थिरता

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

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

पेज लोड होने के दौरान, उन एलिमेंट के लिए जगह रिज़र्व करके लेआउट में होने वाले बदलावों से बचा जा सकता है जिन्हें बाद में डाइनैमिक तौर पर लोड किया जाएगा. अगर ब्राउज़र को एलिमेंट की चौड़ाई और ऊंचाई की जानकारी है, तो वह यह तय कर सकता है कि कितना स्पेस रिज़र्व करना है. iframes के width और height एट्रिब्यूट की वैल्यू तय करके या स्टैटिक एलिमेंट के लिए तय साइज़ सेट करके, यह पक्का किया जा सकता है कि तीसरे पक्ष का एम्बेड किया गया कॉन्टेंट, पेज पर सही तरीके से दिखे. उदाहरण के लिए, YouTube वीडियो को एम्बेड करने के लिए iframe की चौड़ाई और ऊंचाई इस तरह से तय की जानी चाहिए.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

YouTube, Google Maps, और Facebook जैसे लोकप्रिय एम्बेड, साइज़ एट्रिब्यूट के साथ एम्बेड कोड उपलब्ध कराते हैं. हालांकि, हो सकता है कि कुछ सेवा देने वाली कंपनियां इस जानकारी को शामिल न करें. उदाहरण के लिए, इस कोड स्निपेट से एम्बेड किए गए कॉन्टेंट के डाइमेंशन का पता नहीं चलता.

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

इस पेज के रेंडर होने के बाद, इंजेक्ट किए गए iframe की जांच करने के लिए, DevTools का इस्तेमाल किया जा सकता है. यहां दिए गए स्निपेट में देखा जा सकता है कि इंजेक्ट किए गए iframe की ऊंचाई तय होती है, जबकि चौड़ाई प्रतिशत में तय की जाती है.

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

इस जानकारी का इस्तेमाल, एलिमेंट के साइज़ को सेट करने के लिए किया जा सकता है. इससे यह पक्का किया जा सकता है कि फ़ीड लोड होने पर कंटेनर का साइज़ न बढ़े और लेआउट में कोई बदलाव न हो. पहले शामिल किए गए एम्बेड के साइज़ को ठीक करने के लिए, इस स्निपेट का इस्तेमाल किया जा सकता है.

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

लेआउट शिफ़्ट टर्मिनेटर

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

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

लेआउट शिफ़्ट टर्मिनेटर:

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

• यह ऑप्टिमाइज़ किया गया एम्बेड स्निपेट जनरेट करता है. इसे कॉपी करके उस जगह चिपकाया जा सकता है जहां आपको अपने पेज में एम्बेड शामिल करना है.

  

लेआउट शिफ़्ट टर्मिनेटर आज़माएं और GitHub पर कोई भी सुझाव या राय दें. यह टूल बीटा वर्शन में है. आने वाले समय में, इसमें और सुधार किए जाएंगे.

नतीजा

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