तीसरे पक्ष के लोकप्रिय एम्बेड को बेहतर तरीके से लोड करने की तकनीकों के बारे में खास जानकारी.
कई साइटें, उपयोगकर्ता को बेहतर अनुभव देने के लिए, तीसरे पक्ष के एम्बेड किए गए कॉन्टेंट का इस्तेमाल करती हैं. इसके लिए, अपने वेब पेज के कुछ सेक्शन, कॉन्टेंट देने वाले किसी दूसरे व्यक्ति को सौंपे जाते हैं. तीसरे पक्ष का जो कॉन्टेंट एम्बेड किया जाता है उसके सबसे सामान्य उदाहरण वीडियो प्लेयर, सोशल मीडिया फ़ीड, मैप, और विज्ञापन हैं.
तीसरे पक्ष का कॉन्टेंट, किसी पेज की परफ़ॉर्मेंस पर कई तरह से असर डाल सकता है. यह तरीका रेंडर होने से रोकता है, नेटवर्क और बैंडविड्थ के लिए दूसरे ज़रूरी संसाधनों के साथ काम कर सकता है या वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक पर असर डाल सकता है. तीसरे पक्ष के एम्बेड लोड होने पर भी लेआउट शिफ़्ट हो सकते हैं. इस लेख में तीसरे पक्ष के एम्बेड लोड करते समय इस्तेमाल किए जा सकने वाले परफ़ॉर्मेंस के सबसे सही तरीकों, लोड करने की बेहतर तकनीकों, और लोकप्रिय एम्बेड के लिए लेआउट शिफ़्ट को कम करने में मदद करने वाले लेआउट शिफ़्ट टर्मिनेटर टूल के बारे में बताया गया है.
एम्बेड क्या होता है
तीसरे पक्ष का एम्बेड, आपकी साइट पर दिखाया गया ऐसा कोई भी कॉन्टेंट होता है जो: * आपने नहीं बनाया हो * तीसरे पक्ष के सर्वर से दिया गया हो
एम्बेड का इस्तेमाल अक्सर इन जगहों पर किया जाता है: * खेल, समाचार, मनोरंजन, और फ़ैशन से जुड़ी वेबसाइटें, टेक्स्ट वाले कॉन्टेंट को बेहतर बनाने के लिए वीडियो का इस्तेमाल करती हैं. * सक्रिय 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> के लिए, लोड होने वाला एट्रिब्यूट, Chrome 77 और उसके बाद के वर्शन में उपलब्ध है. इसे Chromium का इस्तेमाल करने वाले अन्य ब्राउज़र के लिए भी उपलब्ध कराया गया है.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
लोडिंग एट्रिब्यूट में ये वैल्यू इस्तेमाल की जा सकती हैं:
lazy: इससे यह पता चलता है कि ब्राउज़र को iframe लोड करना चाहिए. जब यह व्यूपोर्ट के करीब होगा, तब ब्राउज़र iframe को लोड कर देगा. इसका इस्तेमाल तब करें, जब iframe लेज़ी-लोडिंग के लिए अच्छा विकल्प हो.eager: iframe को तुरंत लोड करता है. इसका इस्तेमाल तब करें, जब iframe लेज़ी-लोडिंग के लिए अच्छा विकल्प न हो. अगरloadingएट्रिब्यूट की वैल्यू नहीं दी गई है, तो लाइट मोड के अलावा, यह डिफ़ॉल्ट तरीका लागू होता है.auto: ब्राउज़र यह तय करता है कि इस फ़्रेम को लेज़ी-लोड करना है या नहीं.
जिन ब्राउज़र पर loading एट्रिब्यूट काम नहीं करता उन्हें इसे अनदेखा कर दिया जाता है. इसलिए, नेटिव लेज़ी-लोडिंग को प्रोग्रेसिव एनहैंसमेंट के तौर पर लागू किया जा सकता है. इस एट्रिब्यूट के साथ काम करने वाले ब्राउज़र में, व्यूपोर्ट से दूरी थ्रेशोल्ड (वह दूरी जिस पर iframe लोड होना शुरू होता है) को लागू करने के तरीके अलग-अलग हो सकते हैं.
नीचे कुछ ऐसे तरीके दिए गए हैं जिनसे अलग-अलग तरह के एम्बेड के लिए, iframes लेज़ी लोड हो सकते हैं.
- 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 प्लगिन लेज़ी लोडिंग का विकल्प देते हैं.
एम्बेड किए गए हिस्से को फ़साड से बदलें
इंटरैक्टिव एम्बेड पेज को बेहतर बनाते हैं, लेकिन हो सकता है कि कई उपयोगकर्ता उनसे इंटरैक्ट न करें. उदाहरण के लिए, यह ज़रूरी नहीं है कि रेस्टोरेंट का पेज ब्राउज़ करने वाला हर व्यक्ति, मैप पर क्लिक, बड़ा, स्क्रोल, और नेविगेट करे. इसी तरह, यह ज़रूरी नहीं है कि टेलिकॉम सेवा देने वाली कंपनियों के पेज पर जाने वाले सभी लोग, चैटबॉट से इंटरैक्ट करें. इन मामलों में, एम्बेड को लोड होने या लेज़ी-लोड होने से बचाने के लिए, उसकी जगह पर एक फ़ैकेड दिखाएं.
facade एक स्टैटिक एलिमेंट होता है, जो एम्बेड किए गए तीसरे पक्ष की तरह दिखता है, लेकिन काम नहीं करता. इस वजह से, पेज लोड होने पर कम टैक्स लगता है. यहां कुछ रणनीतियां दी गई हैं, जिनकी मदद से एम्बेड किए गए डिवाइसों को बेहतर तरीके से लोड किया जा सकता है. साथ ही, इससे लोगों को बेहतर अनुभव मिलेगा.
स्टैटिक इमेज का इस्तेमाल बाहरी हिस्से के तौर पर करें
मैप एम्बेड करने के बजाय, स्टैटिक इमेज का इस्तेमाल किया जा सकता है. हालांकि, ऐसा हो सकता है कि आपको मैप को इंटरैक्टिव बनाने की ज़रूरत न पड़े. मैप पर पसंद की जगह पर ज़ूम इन किया जा सकता है, इमेज कैप्चर की जा सकती है, और इंटरैक्टिव मैप एम्बेड के बजाय इसका इस्तेमाल किया जा सकता है. जैसा कि नीचे दिखाया गया है, एम्बेड किए गए iframe एलिमेंट का स्क्रीनशॉट कैप्चर करने के लिए, DevTools नोड स्क्रीनशॉट कैप्चर करने की सुविधा का इस्तेमाल भी किया जा सकता है.
DevTools, इमेज को png के तौर पर कैप्चर करता है. हालांकि, आपके पास इसे WebP format for better performance में बदलने का भी विकल्प है.
डाइनैमिक इमेज का इस्तेमाल बाहरी हिस्सों के तौर पर करें
इस तकनीक की मदद से, रन टाइम के दौरान इंटरैक्टिव एम्बेड के हिसाब से इमेज जनरेट की जा सकती हैं. नीचे कुछ ऐसे टूल दिए गए हैं जिनकी मदद से, अपने पेजों पर एम्बेड का स्टैटिक वर्शन जनरेट किया जा सकता है.
Maps स्टैटिक एपीआई: Google Maps स्टैटिक एपीआई सेवा, स्टैंडर्ड एचटीटीपी अनुरोध में शामिल यूआरएल पैरामीटर के आधार पर मैप जनरेट करती है. साथ ही, मैप को एक इमेज के तौर पर दिखाती है, जिसे आपके वेब पेज पर दिखाया जा सकता है. यूआरएल में 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, ट्वीट का यूआरएल स्वीकार करता है और उसके कॉन्टेंट के साथ इमेज दिखाता है. एपीआई इमेज के बैकग्राउंड, रंग, बॉर्डर, और डाइमेंशन को पसंद के मुताबिक बनाने के लिए पैरामीटर भी स्वीकार करता है.
सुविधाओं को बेहतर बनाने के लिए, क्लिक-टू-लोड का इस्तेमाल करें
क्लिक-टू-लोड सिद्धांत में लेज़ी-लोडिंग और टेस्केड, दोनों को शामिल किया गया है. शुरुआत में पेज, टेस्केड के साथ लोड होता है. जब उपयोगकर्ता, स्टैटिक प्लेसहोल्डर पर क्लिक करके उससे इंटरैक्ट करता है, तो तीसरे पक्ष का एम्बेड लोड होता है. इसे इंटरैक्शन पर इंपोर्ट पैटर्न भी कहा जाता है. इसे नीचे दिए गए तरीकों का इस्तेमाल करके लागू किया जा सकता है.
- पेज लोड होने पर: पेज पर Facade या स्टैटिक एलिमेंट शामिल है.
- माउसओवर पर: Facade, तीसरे पक्ष की एम्बेड की सेवा देने वाली कंपनी से पहले से कनेक्ट करता है.
- क्लिक करने पर: बाहरी हिस्से को तीसरे पक्ष के प्रॉडक्ट से बदल दिया जाता है.
फ़ैकेड का इस्तेमाल वीडियो प्लेयर, चैट विजेट, पुष्टि करने की सेवाओं, और सोशल मीडिया विजेट के लिए तीसरे पक्ष के एम्बेड के साथ किया जा सकता है. YouTube वीडियो में एम्बेड किए गए ऐसे वीडियो जो सिर्फ़ प्ले बटन वाली इमेज के तौर पर दिखते हैं, वे अक्सर हमारे सामने आते हैं. असल वीडियो, इमेज पर क्लिक करने पर ही लोड होता है.
आपके पास इंटरैक्शन पर इंपोर्ट करें पैटर्न का इस्तेमाल करके, क्लिक-टू-लोड सुविधा का कस्टम हिस्सा बनाने का विकल्प है. इसके अलावा, अलग-अलग तरह के एम्बेड के लिए, इनमें से किसी एक ओपन सोर्स मोड का इस्तेमाल किया जा सकता है.
YouTube का फ़साड
YouTube प्लेयर के लिए Lite-youtube-embed इस्तेमाल करने का सुझाव दिया जाता है. यह बिलकुल असली प्लेयर की तरह दिखता है, लेकिन इसकी स्पीड 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 जैसे अन्य प्लैटफ़ॉर्म भी उपलब्ध हैं.
Chat विजेट का बाहरी हिस्सा
React-live-chat-loader पेज पर ऐसा बटन लोड होता है जो एम्बेड किए गए बटन के बजाय, चैट में एम्बेड की तरह दिखता है. इसका इस्तेमाल, चैट की सेवा देने वाली अलग-अलग कंपनियों के प्लैटफ़ॉर्म पर किया जा सकता है. जैसे, Intercom, Help Scout, Messenger वगैरह. एक जैसा दिखने वाला विजेट, चैट-विजेट की तुलना में ज़्यादा हल्का होता है और तेज़ी से लोड होता है. अगर उपयोगकर्ता बटन पर कर्सर घुमाता है या उस पर क्लिक करता है या पेज काफ़ी समय से इस्तेमाल नहीं किया जाता है, तो इस विजेट को असल चैट विजेट से बदला जा सकता है. पोस्टमार्क की केस स्टडी में बताया गया है कि उन्होंने प्रतिक्रिया-लाइव चैट-लोडर की सुविधा और परफ़ॉर्मेंस में कैसे सुधार किए.
एम्बेड किए गए वीडियो को लिंक से हटाना या बदलना
अगर आपको पता चलता है कि एम्बेड किए गए तीसरे पक्ष के कुछ एम्बेड की लोडिंग परफ़ॉर्मेंस खराब है और ऊपर बताई गई किसी भी तकनीक का इस्तेमाल नहीं किया जा सकता, तो एम्बेड को पूरी तरह से हटा दें. अगर आपको अब भी उपयोगकर्ताओं को एम्बेड किए गए कॉन्टेंट को ऐक्सेस करना है, तो 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 का इस्तेमाल करके, फ़ाइनल साइज़ की मैन्युअल जांच किए बिना इस समस्या को हल करना मुश्किल हो सकता है.
अब अपने-आप काम करने वाला एक टूल, Layout Shift टर्मिनेटर उपलब्ध है. इसकी मदद से Twitter, Facebook, और अन्य प्लैटफ़ॉर्म पर एम्बेड किए गए लोकप्रिय एम्बेड से लेआउट शिफ़्ट को कम किया जा सकता है.
लेआउट शिफ़्ट टर्मिनेटर:
- एम्बेड किए गए क्लाइंट-साइड को iframe में लोड करता है.
- iframe को अलग-अलग लोकप्रिय व्यूपोर्ट साइज़ के हिसाब से बदलता है.
- हर लोकप्रिय व्यूपोर्ट के लिए, एम्बेड के डाइमेंशन को कैप्चर करता है, ताकि बाद में मीडिया क्वेरी और कंटेनर क्वेरी जनरेट की जा सकें.
- मीडिया क्वेरी (और कंटेनर क्वेरी) का इस्तेमाल करके एम्बेड मार्कअप के चारों ओर कम से कम ऊंचाई रैपर को तब तक साइज़ में बदलता है, जब तक कि एम्बेड शुरू नहीं हो जाता (इसके बाद, कम से कम ऊंचाई वाली स्टाइल हटा दी जाती हैं).
ऑप्टिमाइज़ किया गया एम्बेड स्निपेट जनरेट करता है. इसे वहां कॉपी करके चिपकाया जा सकता है, जहां इसे अपने पेज में शामिल किया जाता है.
लेआउट शिफ़्ट टर्मिनेटर का इस्तेमाल करके देखें. साथ ही, GitHub के बारे में कोई भी सुझाव, शिकायत या राय दें. फ़िलहाल, यह टूल बीटा वर्शन में उपलब्ध है. इसे बेहतर बनाने के लिए, समय-समय पर इसका इस्तेमाल किया जाता है.
नतीजा
तीसरे पक्ष के एम्बेड किए गए वीडियो से उपयोगकर्ताओं को काफ़ी फ़ायदा मिल सकता है. हालांकि, किसी पेज पर एम्बेड की संख्या और साइज़ बढ़ने से, परफ़ॉर्मेंस पर असर पड़ सकता है. इसलिए, एम्बेड किए गए लिंक की पोज़िशन, वे कितने काम का है, और संभावित उपयोगकर्ताओं की ज़रूरतों के हिसाब से लोड होने की सही रणनीतियों को मेज़र करना, आंकना, और उनका इस्तेमाल करना ज़रूरी है.