तीसरे पक्ष के लोकप्रिय एम्बेड को बेहतर तरीके से लोड करने की तकनीकों के बारे में खास जानकारी.
कई साइटें एक दिलचस्प उपयोगकर्ता अनुभव देने के लिए, तीसरे पक्ष के एम्बेड का इस्तेमाल करती हैं. इसके लिए, वे अपने वेब पेज के कुछ सेक्शन, कॉन्टेंट देने वाले किसी दूसरे व्यक्ति को सौंप देती हैं. तीसरे पक्ष के कॉन्टेंट को एम्बेड करने के सबसे सामान्य उदाहरणों में, वीडियो प्लेयर, सोशल मीडिया फ़ीड, मैप, और विज्ञापन शामिल हैं.
तीसरे पक्ष का कॉन्टेंट, किसी पेज की परफ़ॉर्मेंस पर कई तरह से असर डाल सकता है. यह रेंडरिंग को रोक सकता है, नेटवर्क और बैंडविड्थ के लिए अन्य ज़रूरी संसाधनों से टकरा सकता है या वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक पर असर डाल सकता है. तीसरे पक्ष के एम्बेड की वजह से भी लेआउट शिफ़्ट हो सकते हैं. इस लेख में, परफ़ॉर्मेंस से जुड़े सबसे सही तरीकों के बारे में बताया गया है. इनका इस्तेमाल, तीसरे पक्ष के एम्बेड को लोड करते समय किया जा सकता है. साथ ही, इसमें लोड करने की असरदार तकनीकों और लेआउट शिफ़्ट टर्मिनेटर टूल के बारे में भी बताया गया है. यह टूल, लोकप्रिय एम्बेड के लिए लेआउट शिफ़्ट को कम करने में मदद करता है.
एम्बेड क्या है
तीसरे पक्ष का एम्बेड, ऐसा कॉन्टेंट होता है जो आपकी साइट पर दिखाया जाता है. यह ऐसा कॉन्टेंट होता है:
- आपने नहीं लिखा है
- तीसरे पक्ष के सर्वर से दिखाए जाते हैं
एम्बेड का इस्तेमाल अक्सर इनमें किया जाता है:
- खेल-कूद, समाचार, मनोरंजन, और फ़ैशन से जुड़ी वेबसाइटें, टेक्स्ट वाले कॉन्टेंट को बेहतर बनाने के लिए वीडियो का इस्तेमाल करती हैं.
- जिन संगठनों के Twitter या सोशल मीडिया चालू खाते हैं वे इन खातों से अपने वेब पेजों पर फ़ीड एम्बेड करते हैं, ताकि आप ज़्यादा लोगों से जुड़ सकें और उनसे जुड़ सकें.
- रेस्टोरेंट, पार्क, और इवेंट के वेन्यू के पेजों पर अक्सर मैप एम्बेड किए जाते हैं.
तीसरे पक्ष के एम्बेड, आम तौर पर पेज पर मौजूद <iframe> एलिमेंट में लोड होते हैं. तीसरे पक्ष की कंपनियां, एचटीएमएल स्निपेट उपलब्ध कराती हैं. इनमें अक्सर <iframe> होता है, जो मार्कअप, स्क्रिप्ट, और स्टाइलशीट से बना पेज दिखाता है. कुछ कंपनियां स्क्रिप्ट स्निपेट का भी इस्तेमाल करती हैं, जो दूसरे कॉन्टेंट को शामिल करने के लिए डाइनैमिक तरीके से <iframe> इंजेक्ट करती है. इससे तीसरे पक्ष के एम्बेड की साइज़ ज़्यादा हो सकती है. साथ ही, पहले पक्ष के कॉन्टेंट को लोड होने में लगने वाले समय की वजह से, पेज की परफ़ॉर्मेंस पर असर पड़ सकता है.
तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट की परफ़ॉर्मेंस पर असर
कई लोकप्रिय एम्बेड में 100 केबी से ज़्यादा का JavaScript शामिल होता है. कभी-कभी, यह 2 एमबी तक भी हो सकता है. इन्हें लोड होने में ज़्यादा समय लगता है. साथ ही, इन्हें लागू करने पर मुख्य थ्रेड को व्यस्त रखा जाता है. Lighthouse और Chrome DevTools जैसे परफ़ॉर्मेंस मॉनिटर करने वाले टूल, परफ़ॉर्मेंस पर तीसरे पक्ष के एम्बेड के असर का पता लगाने में मदद करते हैं.
तीसरे पक्ष के कोड से पड़ने वाले असर को कम करें लाइटहाउस ऑडिट, साइज़ और मुख्य थ्रेड को ब्लॉक करने के समय की मदद से, तीसरे पक्ष की सेवा देने वाली तीसरे पक्ष की कंपनियों की सूची दिखाता है. यह ऑडिट, Chrome DevTools में Lighthouse टैब में उपलब्ध है.
समय-समय पर अपने एम्बेड और तीसरे पक्ष के कोड की परफ़ॉर्मेंस पर होने वाले असर को ऑडिट करना अच्छा तरीका है, क्योंकि एम्बेड के सोर्स कोड में बदलाव हो सकता है. इस ऑपर्च्यूनिटी का इस्तेमाल किसी भी ग़ैर-ज़रूरी कोड को हटाने के लिए किया जा सकता है.
सबसे सही तरीके लोड हो रहे हैं
तीसरे पक्ष के एम्बेड से परफ़ॉर्मेंस पर बुरा असर पड़ सकता है, लेकिन इससे कई ज़रूरी सुविधाएं भी मिलती हैं. तीसरे पक्ष के एम्बेड का बेहतर तरीके से इस्तेमाल करने और उनकी परफ़ॉर्मेंस पर पड़ने वाले असर को कम करने के लिए, इन दिशा-निर्देशों का पालन करें.
स्क्रिप्ट का क्रम
अच्छी तरह से डिज़ाइन किए गए पेज में, पहले पक्ष के मुख्य कॉन्टेंट पर फ़ोकस रहेगा. वहीं, तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट, साइड-बार में दिखेंगे या पहले-पक्ष के कॉन्टेंट के बाद दिखेंगे.
उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, मुख्य कॉन्टेंट को तेज़ी से और अन्य कॉन्टेंट से पहले लोड होना चाहिए. उदाहरण के लिए, किसी समाचार पेज पर समाचार टेक्स्ट, Twitter फ़ीड या विज्ञापनों में एम्बेड करने से पहले लोड होना चाहिए.
तीसरे पक्ष के एम्बेड के अनुरोध, पहले पक्ष के कॉन्टेंट को लोड करने में रुकावट डाल सकते हैं. इसलिए, तीसरे पक्ष के स्क्रिप्ट टैग की पोज़िशन अहम है. स्क्रिप्ट के लोड होने के क्रम पर, इसका असर पड़ सकता है. इसकी वजह यह है कि स्क्रिप्ट के चलने के दौरान डीओएम कंस्ट्रक्शन रुक जाता है. तीसरे पक्ष के स्क्रिप्ट टैग को मुख्य पहले पक्ष के टैग के बाद रखें. साथ ही, उन्हें अलग-अलग समय पर लोड करने के लिए, 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 लाइब्रेरी
ब्राउज़र, इफ़ेक्टिव कनेक्शन टाइप और Lite-mode जैसे सिग्नल के साथ-साथ, वेबव्यू से एम्बेड की दूरी का इस्तेमाल करके यह तय करते हैं कि iframe को कब लोड किया जाना चाहिए. इसलिए, ब्राउज़र की लेज़ी-लोडिंग में अंतर हो सकता है. अगर आपको दूरी के थ्रेशोल्ड पर बेहतर कंट्रोल चाहिए या आपको सभी ब्राउज़र पर एक जैसा लेज़ी-लोडिंग अनुभव देना है, तो लेज़ीसाइज़ लाइब्रेरी का इस्तेमाल करें.
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>
इसी तरह, तीसरे पक्ष के एम्बेड किए गए तीसरे पक्ष के लिए, iframe के साथ लेज़ीसाइज़ का इस्तेमाल किया जा सकता है.
ध्यान दें कि लेज़िसाइज़, इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करके, यह पता लगाता है कि कोई एलिमेंट कब दिखता है.
Facebook में डेटा लेज़ी का इस्तेमाल करना
Facebook, अलग-अलग तरह के सोशल प्लगिन उपलब्ध कराता है, जिन्हें एम्बेड किया जा सकता है. इसमें पोस्ट, टिप्पणियां, वीडियो, और सबसे लोकप्रिय पसंद करें बटन शामिल हैं. सभी प्लग इन में data-lazy के लिए एक सेटिंग शामिल होती है. इसे true पर सेट करने से यह पक्का होता है कि प्लग इन, loading="lazy" iframe एट्रिब्यूट सेट करके, ब्राउज़र के लेज़ी-लोडिंग मैकेनिज्म का इस्तेमाल करेगा.
Instagram फ़ीड की लेज़ी लोडिंग
Instagram, एम्बेड के हिस्से के तौर पर मार्कअप का एक ब्लॉक और स्क्रिप्ट उपलब्ध कराता है. स्क्रिप्ट, पेज में <iframe> इंजेक्ट करती है. इस <iframe> को लेज़ी लोड करने से परफ़ॉर्मेंस बेहतर हो सकती है, क्योंकि एम्बेड का साइज़ 100 केबी से ज़्यादा हो सकता है. WPZoom और Elfsight जैसी WordPress साइटों के लिए, कई Instagram प्लगिन लेज़ी-लोडिंग का विकल्प देते हैं.
एम्बेड किए गए कॉन्टेंट को फ़ेसेड से बदलना
इंटरैक्टिव एम्बेड, पेज को बेहतर बनाते हैं. हालांकि, हो सकता है कि कई उपयोगकर्ता उनसे इंटरैक्ट न करें. उदाहरण के लिए, रेस्टोरेंट के पेज को ब्राउज़ करने वाला हर उपयोगकर्ता, एम्बेड किए गए मैप पर क्लिक नहीं करेगा, उसे बड़ा नहीं करेगा, स्क्रोल नहीं करेगा, और उस पर नेविगेट नहीं करेगा. इसी तरह, टेलिकॉम सेवा देने वाली कंपनियों के पेज का इस्तेमाल करने वाला हर व्यक्ति, चैटबॉट से इंटरैक्ट नहीं करेगा. इन मामलों में, एम्बेड को लोड होने या लेज़ी-लोड होने से पूरी तरह रोका जा सकता है. इसके लिए, इसकी जगह पर सामने का हिस्सा दिखाएं.
फ़ैकेड एक स्टैटिक एलिमेंट है, जो एम्बेड किए गए तीसरे पक्ष की तरह दिखता है. हालांकि, यह काम नहीं करता. इसलिए, पेज लोड पर उस पर बहुत कम टैक्स लगता है. यहां कुछ ऐसी रणनीतियां दी गई हैं जिनकी मदद से, उपयोगकर्ता को कुछ फ़ायदा देते हुए, एम्बेड किए गए वीडियो को ऑप्टिमाइज़ तरीके से लोड किया जा सकता है.
फ़ेसेड के तौर पर स्टैटिक इमेज का इस्तेमाल करना
मैप एम्बेड करने के बजाय, स्टैटिक इमेज का इस्तेमाल किया जा सकता है. ऐसा तब किया जा सकता है, जब आपको मैप को इंटरैक्टिव बनाने की ज़रूरत न हो. मैप पर रुचि की जगह पर ज़ूम इन कर सकते हैं, इमेज कैप्चर कर सकते हैं, और इंटरैक्टिव मैप एम्बेड करने के बजाय इसका इस्तेमाल कर सकते हैं. एम्बेड किए गए iframe एलिमेंट का स्क्रीनशॉट लेने के लिए, DevTools की नोड का स्क्रीनशॉट लें सुविधा का भी इस्तेमाल किया जा सकता है.
DevTools, इमेज को png के तौर पर कैप्चर करता है. हालांकि, बेहतर परफ़ॉर्मेंस के लिए, इमेज को WebP फ़ॉर्मैट में बदला जा सकता है.
प्रोफ़ाइल को फ़ेस के तौर पर दिखाने के लिए, डाइनैमिक इमेज का इस्तेमाल करें
इस तकनीक से, रन टाइम के दौरान किसी इंटरैक्टिव एम्बेड से जुड़ी इमेज जनरेट की जा सकती हैं. यहां कुछ ऐसे टूल दिए गए हैं जिनकी मदद से, अपने पेजों पर एम्बेड किए गए वीडियो के स्टैटिक वर्शन जनरेट किए जा सकते हैं.
Maps का स्टैटिक एपीआई: Google Mapsस्टैटिक एपीआई सेवा, स्टैंडर्ड एचटीटीपी अनुरोध में शामिल यूआरएल पैरामीटर के आधार पर एक मैप जनरेट करती है. साथ ही, मैप को ऐसी इमेज के रूप में दिखाती है जिसे वेब पेज पर दिखाया जा सकता है. यूआरएल में Google Maps API पासकोड शामिल होना चाहिए. साथ ही, यह पेज पर मौजूद
<img>टैग में,srcएट्रिब्यूट के तौर पर मौजूद होना चाहिए.स्टैटिक मैप मेकर टूल, यूआरएल के लिए ज़रूरी पैरामीटर कॉन्फ़िगर करने में आपकी मदद करता है. साथ ही, यह आपको रीयल-टाइम में इमेज एलिमेंट के लिए कोड देता है.
नीचे दिया गया स्निपेट एक ऐसी इमेज के लिए कोड दिखाता है जिसमें सोर्स को Mapsstatic 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, ट्वीट के यूआरएल को स्वीकार करता है और कॉन्टेंट के साथ इमेज दिखाता है. यह एपीआई, इमेज के बैकग्राउंड, रंग, बॉर्डर, और डाइमेंशन को पसंद के मुताबिक बनाने के लिए पैरामीटर भी स्वीकार करता है.
चेहरे को बेहतर बनाने के लिए, क्लिक-टू-लोड का इस्तेमाल करें
क्लिक-टू-लोड कॉन्सेप्ट में, लेज़ी-लोडिंग और फ़ेसेड को जोड़ा जाता है. शुरुआत में पेज, बाहरी हिस्से के साथ लोड होता है. जब उपयोगकर्ता स्टैटिक प्लेसहोल्डर पर क्लिक करके उसके साथ इंटरैक्ट करता है, तो तीसरे पक्ष का एम्बेड लोड हो जाता है. इसे इंटरैक्शन पर इंपोर्ट पैटर्न के रूप में भी जाना जाता है. इसे नीचे दिए गए तरीके से लागू किया जा सकता है.
- पेज लोड होने पर: पेज पर फ़साड या स्टैटिक एलिमेंट शामिल किया गया है.
- माउसओवर पर: Faad, एम्बेड करने की सुविधा देने वाले तीसरे पक्ष की कंपनी से पहले से कनेक्ट हो जाता है.
- क्लिक करने पर: सामने के हिस्से को तीसरे पक्ष के प्रॉडक्ट से बदल दिया गया है.
फ़ेसेड का इस्तेमाल, तीसरे पक्ष के एम्बेड किए गए वीडियो प्लेयर, चैट विजेट, पुष्टि करने की सेवाओं, और सोशल मीडिया विजेट के साथ किया जा सकता है. 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 का छोटा वर्शन एम्बेड करना 
YouTube वीडियो एम्बेड करना 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 पर कोई भी सुझाव या राय दें. यह टूल बीटा वर्शन में है. आने वाले समय में, इसमें और सुधार किए जाएंगे.
नतीजा
तीसरे पक्ष के एम्बेड, उपयोगकर्ताओं के लिए काफ़ी फ़ायदेमंद हो सकते हैं. हालांकि, किसी पेज पर एम्बेड की संख्या और साइज़ बढ़ने पर, परफ़ॉर्मेंस पर असर पड़ सकता है. इसलिए, एम्बेड की जगह, काम की जानकारी, और संभावित उपयोगकर्ताओं की ज़रूरतों के आधार पर, एम्बेड के लिए लोड करने की सही रणनीतियों का आकलन करना, उन्हें मेज़र करना, और उनका इस्तेमाल करना ज़रूरी है.