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

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

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

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

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

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

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

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

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

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

लैब में

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

लाइटहाउस के लिए पब्लिशर विज्ञापन ऑडिट एक ऐसा टूल है जिसका इस्तेमाल सीएलएस को मापने के लिए किया जा सकता है. ऐसा खास तौर पर GPT विज्ञापनों के लिए किया जाता है. ज़्यादा जानकारी के लिए, विज्ञापन से जुड़े लेआउट शिफ़्ट को कम करें का ऑडिट दस्तावेज़ देखें.

Chrome DevTools को इस तरह भी कॉन्फ़िगर किया जा सकता है कि अपनी साइट पर नेविगेट करने के दौरान, लेआउट शिफ़्ट को हाइलाइट किया जा सके. इसका इस्तेमाल, आपके पेज पर विज्ञापन स्लॉट के पास होने वाले लेआउट शिफ़्ट की मैन्युअल तौर पर पहचान करने के लिए किया जा सकता है.

मैदान में

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

लेआउट शिफ़्ट को कम करना

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

कई आकार के विज्ञापन स्लॉट

कई आकार स्वीकार करने वाले विज्ञापन स्लॉट के लिए, हम नीचे दिए गए तरीकों में से किसी एक का सुझाव देते हैं:

• कॉन्फ़िगर किए गए सबसे बड़े साइज़ के लिए जगह बुक करें.
• कॉन्फ़िगर किए गए सबसे छोटे साइज़ के लिए जगह बुक करें.
• Google Ad Manager रिपोर्टिंग के ऐतिहासिक फ़िल डेटा की जांच करके, तय किए गए साइज़ के लिए सबसे ज़्यादा जगह रिज़र्व करें.

सही तरीका चुनना

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

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

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

किसी स्लॉट के लिए कितना स्पेस बुक करना है, यह तय करने के लिए Google Ad Manager रिपोर्टिंग से मिले पुराने फ़िल डेटा का पता लगाने से ज़्यादा बेहतर फ़ैसला लेने में मदद मिल सकती है. इसे कुछ उदाहरणों की मदद से बेहतर तरीके से समझा जा सकता है.

उदाहरण #1

क्रिएटिव का साइज़ (डिलीवर किया गया)	विज्ञापन सर्वर इंप्रेशन (%)
300x250	70%
320x50	30%

इस मामले में, 250px को वर्टिकल तौर पर रिज़र्व करने से सीएलएस में काफ़ी कमी आ सकती है, क्योंकि दिखाए गए क्रिएटिव का ज़्यादा हिस्सा 300x250 होता है.

उदाहरण #2

क्रिएटिव का साइज़ (डिलीवर किया गया)	विज्ञापन सर्वर इंप्रेशन (%)
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>

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

अलग-अलग स्क्रीन साइज़ के लिए, कम से कम वैल्यू तय करने के लिए, इस तकनीक को सीएसएस मीडिया क्वेरी के साथ जोड़ा जा सकता है:

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

JavaScript के साथ स्पेस को रिज़र्व करने से बचना चाहिए, क्योंकि ऐसा करने से स्क्रिप्ट लोड होने के समय लेआउट शिफ़्ट हो सकता है. सीएसएस की मदद से जगह बुक करने से इस जोखिम से बचा जा सकता है.

फ़्लूइड विज्ञापन स्लॉट

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

फ़्लूइड विज्ञापन स्लॉट के साथ काम करते समय लेआउट शिफ़्ट के असर को कम करने के लिए, हमारा सुझाव है कि आप ये काम करें:

• वेबसाइट में फ़ोल्ड के नीचे मौजूद स्लॉट के लिए, सिर्फ़ fluid साइज़ का इस्तेमाल करें.
• जल्द से जल्द फ़्लूइड स्लॉट को फ़ेच करें, ताकि स्लॉट का साइज़ बदलने से पहले, उपयोगकर्ता के लिए उन्हें स्क्रोल करने की संभावना कम हो.

विज्ञापन स्लॉट को छोटा करना और बड़ा करना

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

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

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

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