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 एलिमेंट के साथ लेआउट शिफ़्ट का उदाहरण_
स्लेटी रंग के बॉक्स में सबसे नीचे एक बटन जोड़ने से, हरे रंग का बॉक्स नीचे की तरफ़ दिखने लगता है और कुछ हद तक व्यूपोर्ट से बाहर हो जाता है.

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

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

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

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

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

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

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

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

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

फिर से, लाल, बिंदु वाले आयत इन तीन अनिश्चित तत्वों के पहले और बाद के क्षेत्रों के संयोजन को दर्शाते हैं, जो इस मामले में व्यूपोर्ट के क्षेत्र का करीब 60% (0.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 के बीच अंतर के तौर पर दिख सकता है. सीएलएस को सही तरीके से मेज़र करने के लिए, आपको इन पर ध्यान देना चाहिए. सब-फ़्रेम, एपीआई का इस्तेमाल करके एग्रीगेशन के लिए अपनी 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 ग्रुप में दिया जा सकता है.