लेआउट शिफ़्ट तब होता है, जब आपके पेज पर दिखने वाले किसी एलिमेंट की जगह या साइज़ में बदलाव होता है. इससे, उसके आस-पास मौजूद कॉन्टेंट की जगह पर असर पड़ता है. कभी-कभी शिफ़्ट करना ज़रूरी होता है. जैसे, जब उपयोगकर्ता की कार्रवाई की वजह से कंटेनर बड़ा हो जाता है. हालांकि, विज्ञापनों की डाइनैमिक प्रकृति की वजह से, लेआउट में अचानक बदलाव हो सकते हैं. इससे उपयोगकर्ता अनुभव पर बुरा असर पड़ता है और इस्तेमाल करने में गंभीर समस्याएं आ सकती हैं.
इस गाइड में, Google पब्लिशर टैग (GPT) का इस्तेमाल करते समय, लेआउट शिफ़्ट को मेज़र करने और कम करने का तरीका बताया गया है.
विज्ञापनों की वजह से लेआउट शिफ़्ट कैसे होता है
आम तौर पर, विज्ञापनों के लिए अनुरोध असींक्रोनस तरीके से किया जाता है. साथ ही, पेज लोड होने के दौरान या उसके बाद, आपके पेज पर डाइनैमिक तौर पर कॉन्टेंट जोड़ा जाता है. विज्ञापनों को फ़ेच करने के दौरान, बाकी पेज लोड होता रहता है और उपयोगकर्ता को विज्ञापन के अलावा अन्य कॉन्टेंट दिख सकता है. अगर आपने लोड होने वाले विज्ञापनों के लिए ज़रूरत के मुताबिक जगह नहीं छोड़ी है, तो हो सकता है कि पेज पर विज्ञापन जोड़ने पर, विज्ञापन के अलावा दिखने वाला कॉन्टेंट हट जाए.
Google पब्लिशर टैग के साथ काम करते समय, विज्ञापन लाइफ़साइकल के कुछ पॉइंट पर लेआउट शिफ़्ट हो सकता है:
- जब
display()को कॉल किया जाता है. स्लॉट को बड़ा या छोटा किया जा सकता है. ऐसा, स्लॉट को कॉन्फ़िगर करने के तरीके के आधार पर होता है. - जब विज्ञापन कॉन्टेंट रेंडर किया जाता है. अगर कोई फ़्लूइड विज्ञापन दिखाया जाता है या स्लॉट में जगह कम है, तो स्लॉट का साइज़ बदला जा सकता है. इस दौरान, स्लॉट का साइज़ भी बड़ा या छोटा हो सकता है. यह इस बात पर निर्भर करता है कि उसे कैसे कॉन्फ़िगर किया गया है.
- विज्ञापन का कॉन्टेंट रेंडर होने के बाद. कुछ क्रिएटिव टाइप को इस तरह से डिज़ाइन किया जाता है कि वे पेज पर दिखने के बाद, बड़े हो जाएं.
ध्यान रखें कि व्यूपोर्ट में विज्ञापन स्लॉट जितना ऊपर होगा, उतने ही ज़्यादा कॉन्टेंट को हटाने की संभावना होगी. शुरुआती व्यूपोर्ट (फ़ोल्ड के ऊपर) के सबसे ऊपर मौजूद स्लॉट का खास ध्यान रखें. इन स्लॉट की वजह से लेआउट में बहुत ज़्यादा बदलाव हो सकता है, क्योंकि विज्ञापन कॉन्टेंट लोड होने पर ये स्लॉट दिखने की ज़्यादा संभावना होती है.
लेआउट शिफ़्ट को मेज़र करना
कुल लेआउट शिफ़्ट (सीएलएस), वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक है. इसका इस्तेमाल करके, अपनी साइट पर लेआउट शिफ़्ट के असर का आकलन किया जा सकता है. ऐसा लैब और फ़ील्ड, दोनों में किया जा सकता है.
लैब में
लैब टूल, सीएलएस को सिंथेटिक तरीके से मेज़र करते हैं. इसका मतलब है कि ये रीयल यूज़र इंटरैक्शन पर निर्भर नहीं होते. इसलिए, इन्हें लगातार इंटिग्रेशन और लोकल डेवलपमेंट वर्कफ़्लो में इस्तेमाल किया जा सकता है. हालांकि, ये टूल आम तौर पर सिर्फ़ पेज लोड के दौरान परफ़ॉर्मेंस को मेज़र करते हैं. साथ ही, ये सीमित स्थितियों में सिम्युलेशन कर सकते हैं. इसलिए, रिपोर्ट की गई वैल्यू, असल उपयोगकर्ता को मिलने वाली वैल्यू से कम हो सकती हैं.
Publisher Ads Audits for Lighthouse एक ऐसा टूल है जिसका इस्तेमाल, खास तौर पर GPT विज्ञापनों से जुड़े सीएलएस को मेज़र करने के लिए किया जा सकता है. ज़्यादा जानकारी के लिए, विज्ञापन से जुड़े लेआउट शिफ़्ट को कम करने के लिए ऑडिट से जुड़ा दस्तावेज़ देखें.
Chrome DevTools को कॉन्फ़िगर करके, अपनी साइट पर नेविगेट करते समय लेआउट में हुए बदलावों को हाइलाइट भी किया जा सकता है. इसका इस्तेमाल, आपके पेज पर विज्ञापन स्लॉट के आस-पास होने वाले लेआउट शिफ़्ट की मैन्युअल तौर पर पहचान करने के लिए किया जा सकता है.
फ़ील्ड में
फ़ील्ड टूल, आपकी साइट के साथ इंटरैक्ट करने पर, असल उपयोगकर्ताओं को मिलने वाले सीएलएस को मेज़र करते हैं. इस प्रोसेस को आम तौर पर रीयल यूज़र मॉनिटरिंग (RUM) कहा जाता है. आरयूएम की मदद से, यह देखा जा सकता है कि असल दुनिया के फ़ैक्टर से सीएलएस पर क्या असर पड़ता है. जैसे, डिवाइस की क्षमताएं, नेटवर्क की स्थिति, उपयोगकर्ता इंटरैक्शन, और पेज को उपयोगकर्ता के हिसाब से बनाने की सुविधा. सिंथेटिक टेस्ट की मदद से, इन फ़ैक्टर को सिम्युलेट करना अक्सर मुश्किल या असंभव होता है.
लेआउट शिफ़्ट को कम करना
लेआउट शिफ़्ट से बचने का एक ही तरीका है. इसके लिए, सीएसएस का इस्तेमाल करके किसी विज्ञापन स्लॉट के लिए ज़रूरत के मुताबिक जगह रिज़र्व करें. विज्ञापन स्लॉट div पर सीधे तौर पर तय ऊंचाई और चौड़ाई सेट करना, ऐसा करने का सबसे असरदार तरीका है. हालांकि, यह तरीका स्टैटिक और तय साइज़ वाले विज्ञापन स्लॉट के लिए अच्छा काम करता है. हालांकि, ज़्यादा जटिल स्थितियों में, ज़्यादा बारीकी से काम करने की ज़रूरत पड़ सकती है. यहां कुछ सामान्य स्थितियों के बारे में बताया गया है.
अलग-अलग साइज़ के विज्ञापन स्लॉट
एक से ज़्यादा साइज़ वाले विज्ञापन स्लॉट के लिए, हमारा सुझाव है कि आप इनमें से कोई एक तरीका अपनाएं:
- दिखाने के लिए कॉन्फ़िगर किए गए सबसे बड़े साइज़ के लिए जगह रिज़र्व करें.
- दिखाने के लिए कॉन्फ़िगर किए गए सबसे छोटे साइज़ के लिए जगह रिज़र्व करें.
- Google Ad Manager रिपोर्टिंग से मिले पुराने डेटा की जांच करके, सबसे ज़्यादा दिखाए जाने वाले साइज़ के लिए स्पेस रिज़र्व करें.
सही तरीका चुनना
लेआउट में बदलाव को रोकने का सबसे असरदार तरीका यह है कि डिवाइस के हिसाब से कॉन्फ़िगर किए गए सबसे बड़े साइज़ के लिए जगह सुरक्षित रखी जाए. हालांकि, इस तरीके से विज्ञापन के आस-पास खाली जगह दिख सकती है. ऐसा तब होता है, जब बुक किए गए साइज़ से छोटा क्रिएटिव दिखाया जाता है. दिखाए गए क्रिएटिव के साइज़ से मैच करने के लिए, विज्ञापन स्लॉट को छोटा करने पर, लेआउट में एक और बदलाव होगा. इसलिए, ऐसा करने से बचने का सुझाव दिया जाता है. इसके बजाय, वर्टिकल और हॉरिज़ॉन्टल सेंटरिंग का इस्तेमाल करके, खाली जगह के विज़ुअल असर को कम किया जा सकता है.
दूसरी ओर, विज्ञापन दिखाने के लिए कॉन्फ़िगर किए गए सबसे छोटे साइज़ के लिए जगह रिज़र्व करने से, आपके विज्ञापन के आस-पास का खाली स्पेस कम हो जाता है. अगर आपके विज्ञापन स्लॉट में आम तौर पर छोटे क्रिएटिव होते हैं या स्लॉट में काम करने वाले सभी साइज़ एक जैसे होते हैं, तो यह एक अच्छा विकल्प हो सकता है. हालांकि, इस तरीके से लेआउट में बदलाव होता है. ऐसा तब होता है, जब रिज़र्व किए गए साइज़ से बड़ा क्रिएटिव दिखाया जाता है. हालांकि, आम तौर पर, जगह न बुक करने की तुलना में ऐसे बदलाव छोटे होते हैं.
खाली जगह और लेआउट में बदलाव के बीच संतुलन बनाने के लिए, अपने विज्ञापन स्लॉट के लिए "औसत" जगह को रिज़र्व किया जा सकता है. उदाहरण के लिए, 320x50 क्रिएटिव दिखाए जाने पर, 100px को वर्टिकल तौर पर रिज़र्व करने पर थोड़ा खाली स्पेस दिखता है. हालांकि, कोई स्पेस रिज़र्व न करने की तुलना में, सीएलएस स्कोर कम हो जाता है. अपनी साइट के लिए सबसे सही साइज़ चुनने के लिए, आपको अलग-अलग साइज़ आज़माने होंगे.
किसी स्लॉट के लिए कितना स्पेस रिज़र्व करना है, यह तय करते समय, Google Ad Manager की रिपोर्टिंग में मौजूद पुराने फ़िल डेटा की जांच करने से, आपको बेहतर फ़ैसला लेने में मदद मिल सकती है. इसे कुछ उदाहरणों की मदद से सबसे अच्छी तरह से समझा जा सकता है.
पहला उदाहरण
| क्रिएटिव का साइज़ (डिलीवर किया गया) | विज्ञापन सर्वर इंप्रेशन (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
इस मामले में, 250px को वर्टिकल तौर पर रिज़र्व करने से सीएलएस काफ़ी कम हो सकता है, क्योंकि दिखाए गए ज़्यादातर क्रिएटिव 300x250 होते हैं.
दूसरा उदाहरण
| क्रिएटिव का साइज़ (डिलीवर किया गया) | विज्ञापन सर्वर इंप्रेशन (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
इस मामले में, ज़्यादातर विज्ञापन 90px से ज़्यादा लंबे नहीं होते. इसलिए, वर्टिकल तौर पर 90px स्क्रीन रिजॉल्यूशन का इस्तेमाल करने से, ज़्यादातर समय लेआउट में बदलाव नहीं होता.
जगह रिज़र्व करने का तरीका
हमारा सुझाव है कि इस समस्या को हल करने के लिए, min-height और min-width सीएसएस प्रॉपर्टी की मदद से, अपने विज्ञापन स्लॉट का साइज़ बताएं:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
min-height और min-width एट्रिब्यूट का इस्तेमाल करके, अपने विज्ञापन स्लॉट के लिए कम से कम जगह रिज़र्व की जा सकती है. साथ ही, ब्राउज़र को ज़रूरत के हिसाब से कंटेनर का साइज़ बढ़ाने की अनुमति भी दी जा सकती है. इससे यह पक्का होता है कि अगर कोई बड़ा क्रिएटिव दिखाया जाता है, तो कोई कॉन्टेंट काटकर नहीं दिखाया जाएगा.
इस तकनीक को सीएसएस मीडिया क्वेरी के साथ जोड़ा जा सकता है, ताकि अलग-अलग स्क्रीन साइज़ के लिए कम से कम अलग-अलग वैल्यू तय की जा सकें:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
JavaScript की मदद से जगह रिज़र्व करने से बचना चाहिए, क्योंकि ऐसा करने पर स्क्रिप्ट लोड होने के समय लेआउट में बदलाव हो सकता है. सीएसएस की मदद से जगह रिज़र्व करने पर, यह जोखिम नहीं होता.
फ़्लूइड विज्ञापन स्लॉट
फ़्लूइड विज्ञापन स्लॉट, उन साइज़ के बारे में नहीं बताते जिन पर वे काम करते हैं. इसके बजाय, इन स्लॉट का साइज़ अपने-आप बदल जाता है, ताकि उनमें दिखाए जाने वाले क्रिएटिव कॉन्टेंट को फ़िट किया जा सके. इससे, इनमें किसी भी साइज़ के क्रिएटिव दिखाए जा सकते हैं. इसलिए, विज्ञापन कॉन्टेंट का अनुरोध करने से पहले, इन स्लॉट के लिए जगह रिज़र्व नहीं की जा सकती. साथ ही, फ़्लूइड साइज़ वाले विज्ञापनों की वजह से लेआउट में हमेशा बदलाव होता है.
फ़्लूइड विज्ञापन स्लॉट का इस्तेमाल करते समय, लेआउट में होने वाले बदलावों के असर को कम करने के लिए, हमारा सुझाव है कि आप ये काम करें:
- फ़ोल्ड के नीचे मौजूद स्लॉट के लिए, सिर्फ़
fluidसाइज़ का इस्तेमाल करें. - फ़्लूइड स्लॉट को जल्द से जल्द फ़ेच करें, ताकि स्लॉट का साइज़ बदलने से पहले ही उपयोगकर्ता उन्हें स्क्रोल करके न देख पाए.
विज्ञापन स्लॉट को छोटा और बड़ा करना
collapseEmptyDivs() तरीके की मदद से, विज्ञापन स्लॉट के डाइव को छोटा किया जा सकता है, ताकि जब कोई विज्ञापन कॉन्टेंट न दिखे, तब वे पेज पर जगह न ले. हालांकि, इस सुविधा का इस्तेमाल सावधानी से किया जाना चाहिए, क्योंकि इससे लेआउट में अनचाहे बदलाव हो सकते हैं. जैसा कि पिछले सेक्शन में बताया गया है, विज्ञापन स्लॉट को छोटा और बड़ा करने से, विज्ञापन लाइफ़साइकल के दो अलग-अलग पॉइंट पर लेआउट में बदलाव हो सकता है.
अगर आपको इस सुविधा का इस्तेमाल करना है, तो लेआउट में होने वाले बदलावों के असर को कम किया जा सकता है. इसके लिए, Ad Manager रिपोर्टिंग में मौजूद पुराने फ़िल डेटा का इस्तेमाल करके, यहां दिए गए सबसे सही तरीकों को लागू करें:
- जिन स्लॉट में विज्ञापन दिखाए जा सकते हैं उन्हें हमेशा बड़ा करके दिखाना चाहिए.
- जिन स्लॉट में बुकिंग होने की संभावना कम है उन्हें हमेशा छोटा किया जाना चाहिए.
लागू करने का उदाहरण देखने के लिए, खाली विज्ञापन स्लॉट को छोटा करें सैंपल देखें.