लेआउट शिफ़्ट को कम से कम करें

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

इस गाइड में, Google पब्लिशर टैग (GPT) का इस्तेमाल करते समय, लेआउट शिफ़्ट को मेज़र करने और कम करने का तरीका बताया गया है.

विज्ञापनों की वजह से लेआउट शिफ़्ट कैसे होता है

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

Google पब्लिशर टैग के साथ काम करते समय, विज्ञापन लाइफ़साइकल के कुछ पॉइंट पर लेआउट शिफ़्ट हो सकता है:

  1. जब display() को कॉल किया जाता है. स्लॉट को बड़ा या छोटा किया जा सकता है. ऐसा, स्लॉट को कॉन्फ़िगर करने के तरीके के आधार पर होता है.
  2. जब विज्ञापन कॉन्टेंट रेंडर किया जाता है. यदि कोई तरल विज्ञापन दिखाया जाता है या ज़रूरत से कम स्थान उपलब्ध है, तो स्लॉट का आकार बदला जा सकता है. इस दौरान, स्लॉट का साइज़ भी बड़ा या छोटा हो सकता है. यह इस बात पर निर्भर करता है कि उसे कैसे कॉन्फ़िगर किया गया है.
  3. विज्ञापन का कॉन्टेंट रेंडर होने के बाद. कुछ क्रिएटिव टाइप, पेज पर दिखने के बाद बड़ा होने के लिए डिज़ाइन किए जाते हैं.

ध्यान रखें कि व्यूपोर्ट में विज्ञापन स्लॉट जितना ऊपर होगा, उतने ही ज़्यादा कॉन्टेंट को हटाने की संभावना होगी. शुरुआती व्यूपोर्ट (फ़ोल्ड के ऊपर) के सबसे ऊपर मौजूद स्लॉट का खास ध्यान रखें. इन स्लॉट की वजह से लेआउट में बहुत ज़्यादा बदलाव हो सकता है, क्योंकि विज्ञापन कॉन्टेंट लोड होने पर ये स्लॉट दिखने की ज़्यादा संभावना होती है.

लेआउट शिफ़्ट को मेज़र किया जा रहा है

कुल लेआउट शिफ़्ट (सीएलएस), वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक है. इसका इस्तेमाल करके, अपनी साइट पर लेआउट शिफ़्ट के असर का आकलन किया जा सकता है. ऐसा, लैब और फ़ील्ड, दोनों में किया जा सकता है.

लैब में

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

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() तरीका आपको विज्ञापन स्लॉट div को छोटा करने की अनुमति देता है, ताकि दिखाने के लिए कोई विज्ञापन सामग्री न होने पर वे पेज पर जगह न लें. हालांकि, इस सुविधा का इस्तेमाल सावधानी से किया जाना चाहिए, क्योंकि इससे लेआउट में अनचाहे बदलाव हो सकते हैं. जैसा कि पिछले सेक्शन में बताया गया है, विज्ञापन स्लॉट को छोटा और बड़ा करने से, विज्ञापन लाइफ़साइकल के दो अलग-अलग पॉइंट पर लेआउट में बदलाव हो सकता है.

अगर आपको इस सुविधा का इस्तेमाल करना है, तो लेआउट शिफ़्ट के असर को कम किया जा सकता है. इसके लिए, Ad Manager रिपोर्टिंग के फ़िल डेटा का इस्तेमाल करें. इससे इन सबसे सही तरीकों को लागू किया जा सकेगा:

  • जिन स्लॉट में विज्ञापन दिखाए जा सकते हैं उन्हें हमेशा बड़ा करके दिखाना चाहिए.
  • जिन स्लॉट में बुकिंग होने की संभावना कम है उन्हें हमेशा छोटा किया जाना चाहिए.

लागू करने के उदाहरण के लिए, खाली विज्ञापन स्लॉट को छोटा करें सैंपल देखें.

पीछे जाएं
विज्ञापन के लिए सबसे सही तरीके
आगे बढ़ें
परफ़ॉर्मेंस पर नज़र बनाए रखना