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

तीसरे पक्ष के लोकप्रिय एम्बेड किए गए ऑब्जेक्ट को असरदार तरीके से लोड करने की तकनीकों के बारे में खास जानकारी.

Addy Osmani

Katie Hempenius

Leena Sohoni

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

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

एम्बेड करने का क्या मतलब है

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

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

आम तौर पर, इन कामों के लिए वीडियो एम्बेड किए जाते हैं:

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

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

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

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

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

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

लोडिंग के सबसे सही तरीके

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

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

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

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

तीसरे पक्ष के कॉन्टेंट को एम्बेड करने के अनुरोधों की वजह से, पहले पक्ष का कॉन्टेंट लोड होने में समस्या आ सकती है. इसलिए, तीसरे पक्ष के स्क्रिप्ट टैग की जगह तय करना ज़रूरी है. स्क्रिप्ट, लोड होने के क्रम पर असर डाल सकती हैं. ऐसा इसलिए होता है, क्योंकि स्क्रिप्ट के चालू होने पर 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 एट्रिब्यूट की वैल्यू नहीं दी गई है, तो यह डिफ़ॉल्ट रूप से लागू होता है. हालांकि, लाइट मोड में ऐसा नहीं होता.
• 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 लाइब्रेरी

ब्राउज़र, 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>

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

ध्यान दें कि lazysizes, Intersection Observer API का इस्तेमाल करता है. इससे यह पता चलता है कि कोई एलिमेंट कब दिखता है.

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

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

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

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

एम्बेड की गई चीज़ों को फ़साड से बदलना

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

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

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

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

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

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

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

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

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

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

  <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. माउस घुमाने पर: Facade, तीसरे पक्ष की एम्बेड सेवा देने वाली कंपनी से पहले से कनेक्ट हो जाता है.
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 हैं.

• Chat widget facade

  React live chat loader, एम्बेड किए गए चैट की जगह पर, एम्बेड किए गए चैट जैसा दिखने वाला बटन लोड करता है. इसका इस्तेमाल, चैट की सुविधा देने वाले अलग-अलग प्लैटफ़ॉर्म के साथ किया जा सकता है. जैसे, 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 प्रोजेक्ट पर अपनी राय या सुझाव दें. फ़िलहाल, यह टूल बीटा वर्शन में उपलब्ध है. आने वाले समय में, इसे और बेहतर बनाया जाएगा.

नतीजा

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