Cumulative Layout Shift (CLS)

Milica Mihajlija
Philip Walton

ब्राउज़र सहायता

  • 77
  • 79
  • x
  • x

सोर्स

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

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

लेआउट में अचानक बदलाव होने पर, उपयोगकर्ता उस बड़े ऑर्डर की पुष्टि कर लेता है जिसे वह रद्द करना चाहता है.

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

साइट के डेवलपमेंट के दौरान साइट के काम करने के तरीके और उसके उपयोगकर्ताओं के अनुभव में फ़र्क़ होने से इस समस्या और भी बिगड़ जाती है. उदाहरण के लिए:

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

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

सीएलएस क्या है?

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

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

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

सबसे बड़ा बर्स्ट सेशन विंडो है, जिसमें उस विंडो में सभी लेआउट शिफ़्ट का ज़्यादा से ज़्यादा कुल स्कोर होता है.

सेशन विंडो का उदाहरण. नीले बार, हर लेआउट शिफ़्ट का स्कोर दिखाते हैं.

अच्छा सीएलएस स्कोर क्या होता है?

अच्छा उपयोगकर्ता अनुभव देने के लिए, साइट का सीएलएस स्कोर 0.1 या इससे कम होना चाहिए. यह पक्का करने के लिए कि आपने ज़्यादातर उपयोगकर्ताओं के लिए यह टारगेट पूरा किया है, हमारा सुझाव है कि आप पेज लोड के 75वें पर्सेंटाइल का आकलन करें. इस पर्सेंटाइल को मोबाइल और डेस्कटॉप डिवाइसों के हिसाब से बांटा गया है.

सीएलएस की अच्छी वैल्यू 0.1 या उससे कम है, खराब वैल्यू 0.25 से ज़्यादा है, और ज़रूरत के हिसाब से सुधार की ज़रूरत है
अच्छे सीएलएस की वैल्यू 0.1 या उससे कम होती हैं. खराब वैल्यू, 0.25 से ज़्यादा हैं.

इस सुझाव को लागू करने के तरीके और रिसर्च के बारे में ज़्यादा जानने के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड तय करना लेख पढ़ें.

लेआउट शिफ़्ट की पूरी जानकारी

लेआउट शिफ़्ट को Layout Instability API से तय किया जाता है. जब व्यूपोर्ट में कोई एलिमेंट दिखता है, तो दो फ़्रेम के बीच जब भी कोई एलिमेंट अपनी शुरुआती पोज़िशन (उदाहरण के लिए, डिफ़ॉल्ट राइटिंग मोड में सबसे ऊपर और बाईं ओर) बदलता है, तो layout-shift एंट्री की रिपोर्ट किया जाता है. जिन एलिमेंट की शुरुआती पोज़िशन में बदलाव होता है उन्हें असुरक्षित एलिमेंट माना जाता है.

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

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

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

layout shift score = impact fraction * distance fraction

इंपैक्ट फ़्रैक्शन

इफ़ेक्ट फ़्रैक्शन यह मापता है कि अस्थिर एलिमेंट, दो फ़्रेम के बीच के व्यूपोर्ट एरिया पर किस तरह असर डालते हैं.

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

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

इस इमेज में ऐसा एलिमेंट दिखाया गया है जो एक फ़्रेम में व्यूपोर्ट का आधा हिस्सा घेरता है. अगले फ़्रेम में, एलिमेंट, व्यूपोर्ट की ऊंचाई के 25% तक नीचे शिफ़्ट हो जाता है. लाल डैश वाला रेक्टैंगल, दोनों फ़्रेम पर एलिमेंट के दिखने का हिस्सा दिखाता है, जो इस मामले में, कुल व्यूपोर्ट का 75% है. इसलिए, इसका असर फ़्रैक्शन 0.75 है.

दूरी भिन्न

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

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

इस उदाहरण में, सबसे बड़ा व्यूपोर्ट डाइमेंशन, ऊंचाई है और अस्थिर एलिमेंट, व्यूपोर्ट की ऊंचाई के 25% भाग में चला गया है, जिससे दूरी का अंश 0.25 है.

0.75 का इंपैक्ट फ़्रैक्शन और 0.25 का दूरी वाला फ़्रैक्शन, 0.75 * 0.25 = 0.1875 का लेआउट शिफ़्ट स्कोर जनरेट करता है.

उदाहरण

अगले उदाहरण में दिखाया गया है कि किसी मौजूदा एलिमेंट में कॉन्टेंट जोड़ने से, लेआउट शिफ़्ट स्कोर पर क्या असर पड़ता है:

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

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

"मुझे क्लिक करें!" बटन पहले डीओएम में नहीं था, इसलिए इसकी शुरुआती स्थिति में भी कोई बदलाव नहीं हुआ.

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

दूरी भिन्न को नीले तीर से दिखाया गया है. हरे रंग का बॉक्स, व्यूपोर्ट के 14% हिस्से से नीचे चला गया है, इसलिए दूरी का हिस्सा 0.14 है.

लेआउट शिफ़्ट स्कोर 0.5 x 0.14 = 0.07 है.

नीचे दिए गए उदाहरण में दिखाया गया है कि एक से ज़्यादा अस्थिर एलिमेंट, पेज के लेआउट शिफ़्ट स्कोर पर कैसे असर डालते हैं:

स्थिर और _unstable एलिमेंट_ और व्यूपोर्ट क्लिपिंग के साथ लेआउट शिफ़्ट का उदाहरण
इस क्रम में लगाई गई सूची में जैसे-जैसे और नाम आएंगे, वैसे-वैसे मौजूदा नामों को वर्णमाला के क्रम में पहले जैसा रखा जाएगा.

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

फिर से याद दिला दें कि लाल रंग की डैश वाली रेक्टैंगल, शिफ़्ट से पहले और बाद में बदलने वाले इन तीन एलिमेंट के एरिया को दिखाता है. इस मामले में, यह व्यूपोर्ट एरिया (0.60 का इफ़ेक्ट फ़्रैक्शन) का करीब 60% है.

ऐरो वह दूरी दिखाते हैं जो अस्थिर एलिमेंट से शुरुआत की स्थिति से हट गई है. नीले तीर से दिखाया गया "ज़ेब्रा" एलिमेंट, व्यूपोर्ट की ऊंचाई के करीब 30% हिस्से में सबसे ज़्यादा खिसक गया है. इससे, इस उदाहरण 0.3 में दी गई दूरी का फ़्रैक्शन बन जाता है.

लेआउट शिफ़्ट स्कोर 0.60 x 0.3 = 0.18 है.

अनुमानित बनाम अनचाहे लेआउट शिफ़्ट

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

उपयोगकर्ता की ओर से किए गए लेआउट शिफ़्ट

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

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

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

ऐनिमेशन और ट्रांज़िशन

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

prefers-reduced-motion ब्राउज़र की सेटिंग का ध्यान रखें, क्योंकि ऐनिमेशन से कुछ साइट पर आने वाले लोगों की सेहत या ध्यान से जुड़ी समस्याएं हो सकती हैं.

सीएसएस transform प्रॉपर्टी की मदद से, लेआउट शिफ़्ट ट्रिगर किए बिना एलिमेंट को ऐनिमेट किया जा सकता है:

  • height और width प्रॉपर्टी बदलने के बजाय, transform: scale() का इस्तेमाल करें.
  • एलिमेंट को एक से दूसरी जगह मूव करने के लिए, top, right, bottom या left प्रॉपर्टी को बदलने के बजाय, transform: translate() का इस्तेमाल करें.

सीएलएस को मेज़र करने का तरीका

सीएलएस को लैब या फ़ील्ड में मापा जा सकता है. यह इन टूल में उपलब्ध है.

फ़ील्ड टूल

लैब टूल

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

JavaScript में लेआउट शिफ़्ट को मेज़र करने के लिए, Layout Instability API का इस्तेमाल करें.

नीचे दिए गए उदाहरण में, कंसोल में layout-shift एंट्री को लॉग करने के लिए, PerformanceObserver बनाने का तरीका बताया गया है:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

JavaScript में सीएलएस को मेज़र करना

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

ज़्यादातर मामलों में, पेज अनलोड होते समय सीएलएस वैल्यू उस पेज की फ़ाइनल सीएलएस वैल्यू होती है. हालांकि, अगले सेक्शन में कुछ अहम अपवाद दिए गए हैं. वेब एपीआई की सीमाओं के तहत, web vitals JavaScript लाइब्रेरी में ये बातें ज़्यादा से ज़्यादा लागू हो सकती हैं.

मेट्रिक और एपीआई के बीच अंतर

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

इन अपवादों के अलावा, सीएलएस में और भी जटिलताएं हैं, क्योंकि यह किसी पेज के पूरे जीवनकाल का आकलन करता है:

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

ऐसे मामलों में, हमारा सुझाव है कि पेज के अनलोड होने के साथ-साथ, जब भी उस पेज को बैकग्राउंड में रखा जाए, तो उस समय सीएलएस रिपोर्ट करें. visibilitychange इवेंट में ये दोनों स्थितियां शामिल हैं. यह डेटा पाने वाले Analytics सिस्टम को बैकएंड पर आखिरी सीएलएस वैल्यू का हिसाब लगाना होगा.

इन सभी मामलों को खुद याद रखने और जोड़ने के बजाय, डेवलपर web-vitals JavaScript लाइब्रेरी का इस्तेमाल करके, सीएलएस को मेज़र कर सकते हैं. सीएलएस में, iframe के मामले को छोड़कर, यहां बताई गई सभी चीज़ों को शामिल किया जाता है:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

सीएलएस को बेहतर बनाने का तरीका

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

अन्य संसाधन

बदलावों का लॉग

कभी-कभी, मेट्रिक को मापने के लिए इस्तेमाल किए जाने वाले एपीआई में गड़बड़ियां मिलती हैं. कभी-कभी, मेट्रिक की परिभाषा में भी गड़बड़ियां मिलती हैं. इसलिए, कभी-कभी बदलाव करने पड़ते हैं. ये बदलाव, आपकी इंटरनल रिपोर्ट और डैशबोर्ड में सुधार या रिग्रेशन के तौर पर दिख सकते हैं.

इसे मैनेज करने में आपकी मदद के लिए, इन मेट्रिक को लागू करने या इनकी परिभाषा में होने वाले सभी बदलावों को इस बदलाव लॉग में दिखाया गया है.

अगर आपके पास इन मेट्रिक के बारे में कोई सुझाव/शिकायत/राय है, तो उसे वेब-वाइटल-सुझाव/शिकायत/राय वाले Google ग्रुप में दें.