मुफ़्त CLS टेस्टर और विश्लेषक

Cumulative Layout Shift यह मापता है कि लोड होने के दौरान पेज की सामग्री अप्रत्याशित रूप से कितना खिसकती है। जितना कम, उतना बेहतर।

0.1 से कम अच्छा है। 0.1–0.25 में सुधार की ज़रूरत है। 0.25 से अधिक खराब है।

हाँ, पूरी तरह मुफ़्त।

बिल्कुल। CLS Tester & Analyzer सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या संग्रहीत नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।

हाँ, CLS Tester & Analyzer पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन तथा टैबलेट पर काम करता है। आप इसे किसी भी आधुनिक वेब ब्राउज़र वाले डिवाइस पर इस्तेमाल कर सकते हैं, किसी ऐप डाउनलोड की ज़रूरत नहीं है।

किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में CLS Tester & Analyzer खोलें और तुरंत इसका उपयोग शुरू करें। कोई साइन-अप बाधा या उपयोग प्रतिबंध नहीं है।

हाँ, CLS Tester & Analyzer को Google Search के वर्तमान दिशानिर्देशों और सर्वोत्तम प्रथाओं का पालन करते हुए बनाया गया है। हम सर्च इंजन की आवश्यकताओं में बदलावों को दर्शाने के लिए टूल को नियमित रूप से अपडेट करते हैं।

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

CLS Tester & Analyzer Chrome, Firefox, Safari, Edge और Opera सहित सभी आधुनिक ब्राउज़रों में काम करता है। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र का नवीनतम संस्करण उपयोग करें।

CLS समय का माप नहीं है बल्कि एक स्कोर है जो पेज के पूरे जीवनकाल में होने वाले हर अनपेक्षित लेआउट शिफ्ट को जोड़ता है। हर शिफ्ट को दो फैक्टर्स को आपस में गुणा करके ग्रेड किया जाता है: impact fraction, यानी दिखने वाले व्यूपोर्ट का कितना हिस्सा हिला, और distance fraction, यानी एलिमेंट्स व्यूपोर्ट के मुकाबले कितनी दूर तक गए। जो शिफ्ट कंटेंट के किसी बड़े हिस्से को लंबी दूरी तक धकेलता है, उसका स्कोर एक छोटी-सी हलचल की तुलना में कहीं ज़्यादा होता है। इसके बाद ब्राउज़र इन सभी अनपेक्षित शिफ्ट्स को जोड़कर एक अंतिम नंबर निकालता है। यह बात अहम है कि यूज़र के क्लिक या टैप के लगभग 500 मिलीसेकंड के भीतर होने वाली हलचल को गिनती से बाहर रखा जाता है, क्योंकि वे आमतौर पर जानबूझकर होती हैं। यह टूल बिल्कुल यही लॉजिक फॉलो करता है, इनपुट-फ्लैग किए गए शिफ्ट्स को नज़रअंदाज़ करता है और सिर्फ अनपेक्षित शिफ्ट्स का कुल जोड़ निकालता है। किसी भी पेज पर इसे खोलकर देखें कि यह कुल योग आपके ब्राउज़र में लाइव कैसे बनता है।

लैब टूल्स नियंत्रित परिस्थितियों में एक ही डिवाइस पर एक बार का पेज लोड मापते हैं, जबकि Chrome User Experience Report जैसे फील्ड टूल्स अलग-अलग स्क्रीन, नेटवर्क और व्यवहार वाली कई असली विज़िट्स का औसत निकालते हैं। यही अंतर बताता है कि आपका लैब नंबर और फील्ड नंबर शायद ही कभी मेल खाते हैं। कोई पेज एक सिंथेटिक टेस्ट में स्थिर दिख सकता है, फिर भी धीमे कनेक्शन या छोटे व्यूपोर्ट वाले विज़िटर्स के लिए हिल सकता है जहां देर से लोड होने वाली इमेजेस और ऐड्स अलग तरीके से व्यवहार करते हैं। Core Web Vitals पास करने के लिए, Google मोबाइल और डेस्कटॉप दोनों पर रियल-यूज़र CLS के 75वें पर्सेंटाइल को देखता है, जो 0.1 या उससे कम होना चाहिए। इस टूल में लाइव मेज़रमेंट उस पल आपके अपने डिवाइस, स्क्रीन साइज़ और नेटवर्क को दर्शाता है, इसलिए यह लैब औसत की बजाय एक अकेले फील्ड सैंपल की तरह व्यवहार करता है। कुछ बार चलाकर देखें कि परिस्थितियां नतीजे को कैसे बदलती हैं।

ज़्यादा CLS लगभग हमेशा कुछ गिने-चुने बार-बार दोहराने वाले कारणों से आता है। बिना स्पष्ट width और height एट्रिब्यूट्स, या CSS aspect-ratio के बिना, इमेजेस और iframes लोड होते ही पेज को दोबारा फ्लो करने पर मजबूर करते हैं। बिना रिज़र्व की गई जगह के दिखने वाले ऐड स्लॉट्स अचानक कंटेंट को नीचे धकेल देते हैं। पहले से मौजूद एलिमेंट्स के ऊपर जोड़ा गया कंटेंट, जैसे बैनर या नोटिस, नीचे की हर चीज़ को धकेल देता है। और देर से बदलने वाले वेब फॉन्ट्स टेक्स्ट के पूरे पैराग्राफ को दोबारा फ्लो कर सकते हैं। सबसे भरोसेमंद इलाज यह है कि जो भी चीज़ असिंक्रोनस तरीके से लोड होती है उसके लिए पहले से जगह रिज़र्व कर दी जाए, ताकि लेआउट को उसे समायोजित करने के लिए कभी उछलना न पड़े। जो मूवमेंट आप वाकई चाहते हैं, उसके लिए लेआउट को फिर से कैलकुलेट करने वाली प्रॉपर्टीज़ की बजाय transform और opacity से एनिमेट करें। यह टूल इन पैटर्न्स को उनके समाधान के साथ लिस्ट करता है, तो अपना स्कोर पेस्ट करें या मापें और अपने पेज को नुकसान पहुंचा रहे ठीक-ठीक शिफ्ट्स को टारगेट करने के लिए गाइडेंस का इस्तेमाल करें।

जब पेज लोड होता है, तो एनालाइज़र layout-shift इवेंट्स पर एक PerformanceObserver अटैच करता है और buffered entries का अनुरोध करता है। यह बफरिंग वाली डिटेल मायने रखती है: यह लोडिंग शुरू होने के ठीक पल से शिफ्ट्स को कैप्चर करती है, न कि सिर्फ तब से जब मापने वाली स्क्रिप्ट चलनी शुरू हुई, इसलिए शुरुआती कुछ भी छूटता नहीं। जैसे-जैसे शिफ्ट्स होते हैं, यह लाइव Layout Instability API को पढ़ता है, वही ब्राउज़र इंटरफेस जिस पर Google के अपने टूल्स निर्भर करते हैं, और रेटिंग बैज के साथ तीन दशमलव स्थानों तक राउंड किया गया कुल योग बनाए रखता है। क्योंकि यह वैल्यू सीधे आपके असली डिवाइस, स्क्रीन साइज़ और उस पल की नेटवर्क कंडीशन से आती है, यह एक आदर्श सिमुलेशन की बजाय वास्तविक परिस्थितियों को दर्शाती है। इसमें कोई क्रॉलिंग या सर्वर राउंड-ट्रिप शामिल नहीं है; सब कुछ लोकल रूप से होता है। जिस पेज का मूल्यांकन करना चाहते हैं, उस पर टूल खोलें और देखें कि जैसे-जैसे लेआउट स्थिर होता है, स्कोर और उसकी Good, Needs Improvement, या Poor रेटिंग कैसे अपडेट होती है।

ब्राउज़र में होने वाला लाइव मेज़रमेंट सिर्फ उसी पेज को पढ़ता है जिसे आपने अभी खोल रखा है, क्योंकि यह उसी डॉक्यूमेंट पर हो रहे लाइव लेआउट-शिफ्ट इवेंट्स को सुनता है। यह खुद किसी रिमोट URL को क्रॉल या फ़ेच नहीं करता। किसी दूसरी साइट का विश्लेषण करने के लिए, आपके पास यहां दो विकल्प हैं। पहला, मैनुअल स्कोर एनालाइज़र इस्तेमाल करें: अपनी पहले से मौजूद किसी रिपोर्ट से 0.0 से 1.0 के बीच कोई भी वैल्यू डालें, और यह टूल तुरंत बता देगा कि वह Google की थ्रेशोल्ड के हिसाब से Good है, Needs Improvement है, या Poor है। दूसरा, एक तय फील्ड में URL पेस्ट करें और टूल आपको Google के PageSpeed Insights तक भेज देगा, जो उस रिपोर्ट को एक नए टैब में खोलेगा जहां आपको लैब और रियल-यूज़र फील्ड डेटा दोनों मिलते हैं। तो भले ही यह बाहरी पेजों को सीधे स्कैन नहीं करता, यह आपको एक तेज़ रेटिंग और गहरे डेटा तक जाने का एक-क्लिक रास्ता देता है। अपने पास मौजूद किसी भी नंबर को समझने के लिए स्कोर एनालाइज़र आज़माएं।