Search Console पर CLS समस्याओं को ठीक करने के सर्वश्रेष्ठ सुझाव

Table of contents

CLS: पृष्ठभूमि

Cumulative Layout Shift अप्रत्याशित लेआउट मूवमेंट को मापता है। जब भी कोई दृश्यमान एलिमेंट पेज लोड होते समय या इंटरैक्शन के दौरान अपनी पोजीशन बदलता है, तो एक लेआउट शिफ्ट स्कोर कैलकुलेट होता है। संचित स्कोर ही CLS है।

सामान्य कारण:

• बिना स्पष्ट width और height एट्रिब्यूट के इमेज या iframes
• विज्ञापन जो आसपास का कंटेंट रेंडर हो जाने के बाद फैलते हैं
• डायनामिकली इंजेक्ट किया गया कंटेंट (बैनर, कुकी नोटिस, चैट विजेट) जो मौजूदा कंटेंट के ऊपर डाला जाता है
• वेब फॉन्ट जो लोड होने पर फ्लैश और रिफ्लो का कारण बनते हैं (FOUT/FOIT)
• तीसरे पक्ष का JavaScript जो शुरुआती रेंडर के बाद UI एलिमेंट जोड़ता है

संबंधित: Search Console पर LCP समस्याओं को कैसे ठीक करें

CLS मापना

Google Search Console

Search Console की Core Web Vitals रिपोर्ट शुरुआती बिंदु है। यह “खराब” (CLS ≥ 0.25) या “सुधार की आवश्यकता है” (0.1–0.25) के रूप में फ्लैग किए गए पेजों को, समस्या के प्रकार के अनुसार ग्रुप करके दिखाती है। प्रभावित URLs की सूची पाने के लिए इस रिपोर्ट का उपयोग करें।

PageSpeed Insights

PageSpeed Insights (PSI) लैब डेटा (Lighthouse सिमुलेशन) और Chrome UX Report (CrUX) के माध्यम से वास्तविक उपयोगकर्ताओं का फील्ड डेटा दोनों दिखाता है। रैंकिंग के उद्देश्य से फील्ड डेटा अधिक महत्वपूर्ण है — यह केवल एक सिंथेटिक टेस्ट के बजाय वास्तविक उपयोगकर्ता अनुभवों को दर्शाता है।

PSI केवल लोड पर शुरुआती व्यूपोर्ट सिमुलेट करता है, इसलिए यह स्क्रॉलिंग या उपयोगकर्ता इंटरैक्शन द्वारा ट्रिगर होने वाले CLS को नहीं पकड़ सकता। उन मामलों के लिए Chrome DevTools का उपयोग करें।

Chrome DevTools और Web Vitals एक्सटेंशन

Web Vitals Chrome एक्सटेंशन (Google द्वारा बनाए रखा गया) पेज स्क्रॉल करते और इंटरैक्ट करते समय लाइव CLS स्कोर दिखाता है। लेआउट शिफ्ट को मैन्युअल रूप से रिप्रोड्यूस करने का यह सबसे तेज़ तरीका है। Chrome DevTools का Performance पैनल भी लेआउट शिफ्ट रिकॉर्ड को एनोटेशन के साथ हाइलाइट करता है, जो दिखाता है कि कौन से एलिमेंट शिफ्ट हुए और कितने।

CLS समस्याओं को ठीक करना

सभी इमेज और iframes में width और height जोड़ें

यह अधिकांश साइटों के लिए सबसे अधिक प्रभावी ठीक करने का तरीका है। स्पष्ट डाइमेंशन के बिना, ब्राउज़र नहीं जानता कि इमेज लोड होने के दौरान कितना स्पेस रिज़र्व करना है, इसलिए जब इमेज प्रकट होती है तो नीचे का कंटेंट नीचे धकेल जाता है।

<!-- बुरा: कोई डाइमेंशन नहीं -->
<img src="photo.jpg" alt="…">

<!-- अच्छा: स्पष्ट डाइमेंशन ब्राउज़र को स्पेस रिज़र्व करने देते हैं -->
<img src="photo.jpg" alt="…" width="800" height="450">

आधुनिक CSS (aspect-ratio) रेस्पॉन्सिव इमेज के लिए वही प्रभाव प्राप्त करता है, लेकिन HTML में width और height एट्रिब्यूट को स्पष्ट रूप से सेट करना सबसे विश्वसनीय तरीका है और अधिकांश आधुनिक फ्रेमवर्क और CMS इमेज पाइपलाइन इसे स्वचालित रूप से संभालती हैं।

विज्ञापनों के लिए स्पेस रिज़र्व करें

विज्ञापन मोनेटाइज्ड साइटों पर उच्च CLS का सबसे सामान्य कारण हैं। विज्ञापन नेटवर्क डायनामिक साइज़ सर्व करते हैं, और अगर कोई स्पेस रिज़र्व नहीं है तो विज्ञापन लोड होने पर पेज रिफ्लो हो जाता है।

1. विज्ञापन टैग लोड होने से पहले एक फिक्स्ड कंटेनर (आपके सबसे सामान्य विज्ञापन साइज़ से मेल खाता min-height) रिज़र्व करें।
2. अगर कोई विज्ञापन सर्व नहीं किया गया तो कंटेनर को कोलैप्स न करें — एक खाली प्लेसहोल्डर दूसरे रिफ्लो से बचाता है।
3. व्यूपोर्ट के शीर्ष के पास रखे गए विज्ञापनों के साथ विशेष रूप से सावधान रहें। फोल्ड के ऊपर डाले गए नॉन-स्टिकी विज्ञापन सबसे खराब CLS स्कोर का कारण बनते हैं।
4. हर स्लॉट के लिए सबसे सामान्य विज्ञापन साइज़ निर्धारित करने के लिए अपने विज्ञापन नेटवर्क के ऐतिहासिक इम्प्रेशन डेटा का उपयोग करें, फिर कंटेनर को उसी के अनुसार साइज़ करें।

मौजूदा कंटेंट के ऊपर कंटेंट डालने से बचें

Cookie सहमति बैनर, नोटिफिकेशन प्रॉम्प्ट और चैट विजेट जो असिंक्रोनस रूप से लोड होते हैं और मौजूदा कंटेंट के ऊपर दिखाई देते हैं, वे एक सामान्य CLS स्रोत हैं। विकल्प:

• उन्हें फिक्स्ड-पोजीशन ओवरले में लोड करें (वे डॉक्यूमेंट फ्लो को प्रभावित नहीं करते)।
• अगर उन्हें इनलाइन दिखाई देना है तो लेआउट में पहले से स्पेस आवंटित करें।
• कुकी बैनर के लिए विशेष रूप से, स्क्रीन के नीचे प्लेसमेंट पर विचार करें — यह पूरी तरह से CLS से बचाता है और समान रूप से कम्प्लायंट है।

वेब फॉन्ट लोडिंग ठीक करें (FOIT और FOUT)

FOIT (Flash of Invisible Text) तब होता है जब एक ब्राउज़र कस्टम फॉन्ट लोड होने तक टेक्स्ट छुपा देता है। FOUT (Flash of Unstyled Text) तब होता है जब पहले एक फॉलबैक फॉन्ट दिखाया जाता है, फिर स्वैप किया जाता है — फॉन्ट मेट्रिक्स का अंतर लेआउट शिफ्ट का कारण बनता है।

ठीक करना है font-display: swap और महत्वपूर्ण फॉन्ट के लिए <link rel="preload"> का उपयोग करें:

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap FOIT (अदृश्य टेक्स्ट) के बजाय FOUT (दृश्यमान लेकिन अनस्टाइल्ड टेक्स्ट) का कारण बनता है, जो CLS के लिए बेहतर है क्योंकि टेक्स्ट तुरंत दृश्यमान होता है। स्वैप के मेट्रिक प्रभाव को और कम करने के लिए, फॉलबैक फॉन्ट मेट्रिक्स को कस्टम फॉन्ट से मेल कराने के लिए CSS प्रॉपर्टी size-adjust का उपयोग करें — यह कस्टम फॉन्ट के लागू होने पर रिफ्लो को कम करता है।

तीसरे पक्ष का JavaScript

तीसरे पक्ष के स्क्रिप्ट (शेयर बटन, कमेंट विजेट, लाइव चैट, एनालिटिक्स पॉपअप) असिंक्रोनस रूप से लोड होते हैं और अक्सर पेज के पहले से रेंडर हो जाने के बाद UI एलिमेंट इंजेक्ट करते हैं। उनके CLS प्रभाव को कम करने के लिए:

• जहाँ संभव हो, तीसरे पक्ष के विज़ुअल एलिमेंट को शुरुआती व्यूपोर्ट से नीचे धकेलें — पेज पर नीचे का कंटेंट उपयोगकर्ता के पहुँचने से पहले लोड होने के लिए अधिक समय पाता है।
• स्क्रिप्ट चलने से पहले कंटेनर डाइमेंशन पहले से परिभाषित करें, ताकि ब्राउज़र पहले से जाने कि कितना स्पेस रिज़र्व करना है।
• तीसरे पक्ष के ओरिजिन द्वारा फिल्टर किए गए Chrome DevTools के Network टैब का उपयोग करके पहचानें कि कौन से स्क्रिप्ट लेआउट शिफ्ट में योगदान दे रहे हैं।

लेज़ी लोडिंग और प्लेसहोल्डर

लेज़ी लोडिंग इमेज लोडिंग को तब तक स्थगित करती है जब तक कोई इमेज व्यूपोर्ट के पास न हो, जिससे बैंडविड्थ की बचत होती है। लेकिन अगर कोई प्लेसहोल्डर सेट नहीं है, तो इमेज कंटेनर शून्य ऊँचाई तक सिकुड़ जाता है और फिर इमेज लोड होने पर अचानक खुल जाता है।

हमेशा सुनिश्चित करें कि लेज़ी-लोडेड एलिमेंट में स्पष्ट डाइमेंशन या CSS के माध्यम से सेट aspect-ratio हो, ताकि ब्राउज़र इमेज लोड होने से पहले भी सही स्पेस रिज़र्व कर सके। यह नेटिव loading="lazy" और JavaScript-आधारित लेज़ी लोडर दोनों पर लागू होता है।

CLS — 2026 FAQ

क्या FID 2026 में अभी भी रैंकिंग सिग्नल है?

नहीं। Google ने मार्च 2024 में FID (First Input Delay) को Core Web Vital के रूप में आधिकारिक रूप से हटा दिया और इसे INP (Interaction to Next Paint) से बदल दिया। वर्तमान CWV तिकड़ी LCP, INP और CLS है। किसी भी आंतरिक दस्तावेज़ या टूलिंग को अपडेट करें जो अभी भी FID का संदर्भ देता है।

लक्षित करने के लिए एक अच्छा CLS स्कोर क्या है?

Google के थ्रेशोल्ड: 0.1 से नीचे “अच्छा” है, 0.1–0.25 “सुधार की आवश्यकता है”, 0.25 से ऊपर “खराब” है। 0.1 से नीचे लक्ष्य रखें। स्कोर CrUX फील्ड डेटा में पेज लोड के 75वें पर्सेंटाइल पर मापा जाता है।

क्या CLS रैंकिंग को प्रभावित करता है?

हाँ, लेकिन यह कई सिग्नलों में से एक है। Core Web Vitals 2021 के मध्य से एक पेज अनुभव रैंकिंग कारक रहे हैं। खराब CLS एक मजबूत पेज को नहीं डुबोएगा, लेकिन यह एक टाईब्रेकर हो सकता है और उपयोगकर्ता जुड़ाव मेट्रिक्स (बाउंस दर, सेशन गहराई) को अपने गुण-दोष पर सीधे नुकसान पहुँचाएगा।

मेरा PSI स्कोर अच्छा CLS दिखाता है लेकिन Search Console पेज को खराब के रूप में फ्लैग करता है — कौन सा सही है?

टकराव होने पर PSI लैब डेटा के ऊपर Search Console (फील्ड डेटा) पर भरोसा करें। PSI लैब टेस्ट केवल शुरुआती व्यूपोर्ट लोड को सिमुलेट करते हैं; यह उपयोगकर्ता स्क्रॉलिंग, धीमे कनेक्शन पर फॉन्ट स्वैप, या इंटरैक्शन के बाद लोड होने वाले विज्ञापनों द्वारा ट्रिगर CLS को मिस करता है। Search Console में CrUX फील्ड डेटा वास्तविक परिस्थितियों में वास्तविक उपयोगकर्ताओं को दर्शाता है।

संबंधित पठन:

• Search Console पर LCP समस्याओं को कैसे ठीक करें
• अपनी वेबसाइट की स्पीड को कैसे ऑप्टिमाइज़ करें
• तकनीकी SEO ऑडिट

संक्षिप्त संस्करण

अगर आप यह इसलिए पढ़ रहे हैं क्योंकि इसमें वर्णित वर्कफ़्लो आपका पूरा हफ्ता खा रहा है, तो यही वह प्रकार का लूप है जिसके लिए मैं AI एजेंट बनाता हूँ। एक समय में दो बिल्ड स्लॉट खुले हैं।

मई 2026 के लिए अपडेट किया गया

2026 में Google की कहानी है AI Overviews हर जगह: 2023 का SGE प्रयोग मई 2024 में एक डिफ़ॉल्ट फीचर बन गया और अब अनुमानित ~60% अमेरिकी सूचनात्मक प्रश्नों पर दिखाई देता है। SEO और विज्ञापन ऑपरेटरों के लिए:

• AI Overviews वाले प्रश्नों पर ऑर्गेनिक CTR औसतन 15–30% गिर गया है, Ahrefs, Authoritas और समान स्रोतों के प्रकाशित अध्ययनों के अनुसार (2024–25 डेटा)।
• Google Ads ने कई PMax फीचर्स को AI-powered Search के रूप में रीब्रांड किया; अभियान प्रबंधन UI अब AI बिडिंग सुझाव डिफ़ॉल्ट रूप से दिखाता है।
• Search Console ने 2025 के अंत में “AI Overview impressions” फिल्टर जोड़ा — अगर यहाँ कोई पोस्ट GSC रिपोर्टिंग का संदर्भ देता है, तो प्लेबुक को रिफ्रेश करने की आवश्यकता है।
• Google का विज्ञापन राजस्व 2024 में ~$265B को पार कर गया; Search कुल Alphabet राजस्व का ~57% बना हुआ है।

2026 में “Google पैसे कैसे कमाता है” का जवाब: अभी भी Search विज्ञापन (प्रभावशाली), लेकिन YouTube विज्ञापन, Cloud और Subscriptions (YouTube Premium + Google One) अब सभी महत्वपूर्ण लाइनें हैं।