तीसरे पक्ष के लोकप्रिय एम्बेड को बेहतर तरीके से लोड करने की तकनीकों के बारे में खास जानकारी.
कई साइटें एक दिलचस्प उपयोगकर्ता अनुभव देने के लिए, तीसरे पक्ष के एम्बेड का इस्तेमाल करती हैं. ऐसा करने के लिए, वे अपने वेब पेज के कुछ सेक्शन, कॉन्टेंट देने वाले किसी दूसरे व्यक्ति को सौंप देती हैं. वीडियो प्लेयर, सोशल मीडिया फ़ीड, मैप, और विज्ञापन, तीसरे पक्ष का कॉन्टेंट एम्बेड करने के सबसे सामान्य उदाहरण हैं.
तीसरे-पक्ष का कॉन्टेंट, किसी पेज की परफ़ॉर्मेंस पर कई तरह से असर डाल सकता है. इस प्रक्रिया में, रेंडर होने से रोका जा सकता है, नेटवर्क और बैंडविड्थ से जुड़े दूसरे ज़रूरी संसाधनों के साथ छेड़छाड़ की जा सकती है या वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक पर असर पड़ सकता है. तीसरे पक्ष के एम्बेड की वजह से भी लेआउट शिफ़्ट हो सकते हैं. इस लेख में परफ़ॉर्मेंस से जुड़े सबसे सही तरीकों के बारे में बताया गया है. तीसरे पक्ष के एम्बेड को लोड करते समय इन तरीकों का इस्तेमाल किया जा सकता है, लोड करने की बेहतर तकनीकों, और लेआउट शिफ़्ट टर्मिनेटर टूल की मदद से, लोकप्रिय एम्बेड के लेआउट शिफ़्ट कम किए जा सकते हैं.
एम्बेड क्या होता है
तीसरे पक्ष का एम्बेड, ऐसा कॉन्टेंट होता है जो आपकी साइट पर दिखाया जाता है. यह ऐसा कॉन्टेंट होता है:
- आपने यह लेखक नहीं बनाया है
- तीसरे पक्ष के सर्वर से दिखाया गया
एम्बेड का इस्तेमाल अक्सर इन चीज़ों में किया जाता है:
- खेल-कूद, समाचार, मनोरंजन, और फ़ैशन से जुड़ी वेबसाइटें, टेक्स्ट वाले कॉन्टेंट को बेहतर बनाने के लिए वीडियो का इस्तेमाल करती हैं.
- जिन संगठनों के Twitter या सोशल मीडिया चालू खाते हैं वे इन खातों से अपने वेब पेजों पर फ़ीड एम्बेड करते हैं, ताकि आप ज़्यादा लोगों तक पहुंच सकें.
- रेस्टोरेंट, पार्क, और इवेंट की जगह के पेजों पर अक्सर मैप एम्बेड होते हैं.
तीसरे पक्ष के एम्बेड, आम तौर पर पेज पर मौजूद <iframe> एलिमेंट में लोड होते हैं. तीसरे पक्ष की कंपनियां एचटीएमएल स्निपेट ऑफ़र करती हैं. इनमें अक्सर <iframe> शामिल होता है. यह मार्कअप, स्क्रिप्ट, और स्टाइलशीट वाले पेज को पूरा करता है. कुछ कंपनियां स्क्रिप्ट स्निपेट का भी इस्तेमाल करती हैं, जो दूसरे कॉन्टेंट को शामिल करने के लिए डाइनैमिक तरीके से <iframe> इंजेक्ट करती है. इस वजह से, तीसरे पक्ष का कॉन्टेंट एम्बेड करना ज़्यादा मुश्किल हो सकता है. साथ ही, पहले पक्ष के कॉन्टेंट में देरी हो सकती है, जिससे पेज की परफ़ॉर्मेंस पर असर पड़ सकता है.
तीसरे पक्ष के एम्बेड से परफ़ॉर्मेंस पर पड़ने वाला असर
कई लोकप्रिय एम्बेड में 100 केबी से ज़्यादा JavaScript शामिल होता है, कभी-कभी ये साइज़ 2 एमबी तक हो सकता है. इन्हें लोड होने में ज़्यादा समय लगता है और इनके चलने के दौरान मुख्य थ्रेड व्यस्त रहती है. Lighthouse और Chrome DevTools जैसे परफ़ॉर्मेंस मॉनिटर करने वाले टूल, परफ़ॉर्मेंस पर तीसरे पक्ष के एम्बेड के असर का पता लगाने में मदद करते हैं.
तीसरे पक्ष के कोड से पड़ने वाले असर को कम करें लाइटहाउस ऑडिट, साइज़ और मुख्य थ्रेड को ब्लॉक करने के समय की मदद से, तीसरे पक्ष की सेवा देने वाली तीसरे पक्ष की कंपनियों की सूची दिखाता है. ऑडिट की सुविधा Chrome DevTools के ज़रिए लाइटहाउस टैब में उपलब्ध है.
समय-समय पर अपने एम्बेड और तीसरे पक्ष के कोड की परफ़ॉर्मेंस पर होने वाले असर को ऑडिट करना अच्छा तरीका है, क्योंकि एम्बेड के सोर्स कोड में बदलाव हो सकता है. इस ऑपर्च्यूनिटी का इस्तेमाल किसी भी ग़ैर-ज़रूरी कोड को हटाने के लिए किया जा सकता है.
सबसे सही तरीके लोड हो रहे हैं
तीसरे पक्ष के एम्बेड से परफ़ॉर्मेंस पर बुरा असर पड़ सकता है, लेकिन इससे कई ज़रूरी सुविधाएं भी मिलती हैं. तीसरे पक्ष के एम्बेड का बेहतर तरीके से इस्तेमाल करने और उनकी परफ़ॉर्मेंस पर पड़ने वाले असर को कम करने के लिए, इन दिशा-निर्देशों का पालन करें.
स्क्रिप्ट ऑर्डर
अच्छी तरह से डिज़ाइन किए गए पेज में, पहले पक्ष के मुख्य कॉन्टेंट पर फ़ोकस रहेगा. वहीं, तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट, साइड-बार में दिखेंगे या पहले-पक्ष के कॉन्टेंट के बाद दिखेंगे.
उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, मुख्य कॉन्टेंट को तेज़ी से लोड होना चाहिए और उसे अन्य कॉन्टेंट से पहले लोड करना चाहिए. उदाहरण के लिए, किसी समाचार पेज पर समाचार टेक्स्ट, 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>
लेज़िसाइज़ लाइब्रेरी
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 केबी से ज़्यादा हो सकता है. WordPress साइटों, जैसे कि WPZoom और Elfsight के लिए कई 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.
चैट विजेट का सामने का हिस्सा
लाइव चैट लोड करने पर प्रतिक्रिया देने का विकल्प चुनने पर, एक बटन लोड होता है. यह बटन, एम्बेड की गई चैट के बजाय, चैट एम्बेड की तरह दिखता है. इसका इस्तेमाल चैट की सुविधा देने वाले अलग-अलग प्लैटफ़ॉर्म के साथ किया जा सकता है. जैसे, Intercom, Help Scout, Messenger. एक जैसा दिखने वाला विजेट, चैट विजेट से बहुत हल्का होता है और तेज़ी से लोड होता है. जब उपयोगकर्ता बटन पर माउस घुमाता है या क्लिक करता है या पेज काफ़ी समय से इस्तेमाल में नहीं है, तो इसे असली चैट विजेट से बदला जा सकता है. पोस्टमार्क केस स्टडी में बताया गया है कि उन्होंने
react-live-chat-loaderको कैसे लागू किया और परफ़ॉर्मेंस में सुधार कैसे किया.
एम्बेड किए गए वीडियो को लिंक से हटाना या बदलना
अगर आपको लगता है कि तीसरे पक्ष के कुछ एम्बेड की वजह से, लोड होने की परफ़ॉर्मेंस खराब हो रही है और ऊपर बताई गई किसी तकनीक का इस्तेमाल करना सही नहीं है, तो सबसे आसान तरीका है कि आप एम्बेड को पूरी तरह से हटा दें. अगर आपको अब भी अपने उपयोगकर्ताओं के लिए, एम्बेड किए गए कॉन्टेंट को ऐक्सेस करने की सुविधा देनी है, तो target="_blank" की मदद से उसका लिंक दें. ऐसा करने से, उपयोगकर्ता उस कॉन्टेंट पर क्लिक करके, दूसरे टैब में जाकर देख सकता है.
लेआउट की स्थिरता
एम्बेड किए गए कॉन्टेंट के डाइनैमिक तौर पर लोड होने से, पेज के लोड होने की परफ़ॉर्मेंस बेहतर हो सकती है. हालांकि, इसकी वजह से कभी-कभी पेज के कॉन्टेंट में अचानक से हलचल हो सकती है. इसे लेआउट शिफ़्ट कहा जाता है.
उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, विज़ुअल का सही तरह से दिखना ज़रूरी है. इसलिए, कुल लेआउट शिफ़्ट (सीएलएस) से पता चलता है कि ये बदलाव कितनी बार होते हैं और इनसे कितना रुकावट पैदा होता है.
लेआउट शिफ़्ट से बचने के लिए, पेज लोड के दौरान उन एलिमेंट के लिए स्पेस रिज़र्व करें जो बाद में डाइनैमिक रूप से लोड होने वाले हैं. अगर ब्राउज़र को एलिमेंट की चौड़ाई और ऊंचाई पता है, तो वह रिज़र्व किए जाने वाले स्पेस का पता लगा सकता है. ऐसा करने के लिए, iframe के 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 पर बेझिझक अपने सुझाव दें. यह टूल अभी बीटा वर्शन में है और इसे समय के साथ बेहतर बनाने के लिए काम किया जा रहा है.
नतीजा
तीसरे पक्ष के एम्बेड से लोगों के लिए बहुत काम का हो सकता है, लेकिन जैसे-जैसे किसी पेज पर एम्बेड की संख्या और साइज़ बढ़ता है, परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. इसलिए, यह ज़रूरी है कि एम्बेड किए गए वीडियो की पोज़िशन, कॉन्टेंट कितने काम का है, और संभावित उपयोगकर्ताओं के हिसाब से कॉन्टेंट लोड होने की सही रणनीतियों का आकलन किया जाए, आकलन किया जाए, और उनका इस्तेमाल किया जाए ज़रूरतें पूरी करता है.