कुल लेआउट शिफ़्ट मेट्रिक को बेहतर बनाने के हमारे प्लान के बारे में जानें और हमें सुझाव, शिकायत या राय दें.
कुल लेआउट शिफ़्ट (सीएलएस) एक ऐसी मेट्रिक है जो किसी वेब पेज की विज़ुअल स्थिरता को मापती है. इस मेट्रिक को कुल लेआउट शिफ़्ट कहा जाता है, क्योंकि जब तक कोई पेज चलता है, तब तक हर शिफ़्ट का स्कोर, कुल लेआउट में एक ही बार में जोड़ा जाता है.
वैसे तो सभी लेआउट शिफ़्ट खराब उपयोगकर्ता अनुभव वाले होते हैं, लेकिन ये लंबे समय तक खुले हुए पेजों पर ज़्यादा चलते हैं. इसलिए, Chrome स्पीड मेट्रिक टीम ने सीएलएस मेट्रिक को बेहतर बनाने के लिए यह काम किया, ताकि किसी पेज पर बिताए गए समय के हिसाब से सीएलएस मेट्रिक में किसी तरह का बदलाव न किया जा सके.
यह ज़रूरी है कि मेट्रिक, पेज के पूरे जीवनकाल तक के उपयोगकर्ता अनुभव पर फ़ोकस करती है, क्योंकि हमने देखा है कि पेज लोड करने के बाद, पेज स्क्रोल करते या नेविगेट करते समय, उपयोगकर्ताओं को अक्सर नकारात्मक अनुभव होते हैं. हालांकि, हमें शिकायत मिली है कि इसका असर लंबे समय तक रहने वाले पेजों पर कैसे पड़ता है. ये ऐसे पेज होते हैं जिन्हें उपयोगकर्ता आम तौर पर लंबे समय तक खोलते हैं. पेज कई तरह के होते हैं, जो ज़्यादा समय तक खुले रहते हैं. इनमें से कुछ ऐसे सोशल मीडिया ऐप्लिकेशन हैं जिनमें इनफ़ाइनाइट स्क्रोलिंग होती है और एक पेज का ऐप्लिकेशन.
ज़्यादा सीएलएस स्कोर वाले लंबी अवधि के पेजों के अंदरूनी विश्लेषण में पाया गया कि ज़्यादातर समस्याएं इन पैटर्न की वजह से थीं:
- उपयोगकर्ता के स्क्रोल करने के दौरान इनफ़ाइनाइट स्क्रोलर कॉन्टेंट शिफ़्ट करते हैं.
- किसी भी तरह के प्लेसहोल्डर या स्केलेटन पैटर्न के बिना, उपयोगकर्ता इंटरैक्शन के जवाब में यूज़र इंटरफ़ेस (यूआई) को अपडेट करने में इनपुट हैंडलर को 500 मि॰से॰ से ज़्यादा समय लग रहा हो.
हम डेवलपर को उपयोगकर्ता अनुभव को बेहतर बनाने के लिए बढ़ावा देते हैं. हालांकि, हम मेट्रिक को बेहतर बनाने की कोशिश कर रहे हैं और संभावित तरीकों पर सुझाव, शिकायत या राय भी ढूंढ रहे हैं.
हम यह कैसे तय करेंगे कि नई मेट्रिक बेहतर है या नहीं?
मेट्रिक डिज़ाइन के बारे में जानने से पहले, हम यह पक्का करना चाहते थे कि हमने वास्तविक दुनिया के अलग-अलग तरह के वेब पेजों और उसके इस्तेमाल के उदाहरणों पर अपने आइडिया का मूल्यांकन किया. शुरू करने के लिए, हमने उपयोगकर्ताओं के इस्तेमाल के लिए एक छोटी सी स्टडी बनाई है.
सबसे पहले, हमने अलग-अलग वेबसाइटों पर गए 34 उपयोगकर्ताओं की गतिविधियों के वीडियो और Chrome ट्रेस रिकॉर्ड किए. उपयोगकर्ता की गतिविधियों को चुनते समय, हमने कुछ चीज़ों पर ध्यान दिया:
- कई तरह की साइटें, जैसे कि खबरों और शॉपिंग से जुड़ी साइटें.
- उपयोगकर्ता के अनुभव, जैसे कि शुरुआत में पेज लोड होना, स्क्रोल करना, एक पेज का ऐप्लिकेशन नेविगेशन, और उपयोगकर्ता के इंटरैक्शन.
- साइटों पर अलग-अलग लेआउट शिफ़्ट की संख्या और तीव्रता, दोनों.
- लेआउट शिफ़्ट के अलावा, साइट पर कुछ खराब अनुभव मिले हैं.
हमने अपने 41 सहकर्मियों को एक समय में दो वीडियो देखने के लिए कहा. इससे हमें पता चला कि लेआउट शिफ़्ट के हिसाब से कौनसा जोड़ा बेहतर है. इन रेटिंग से, हमने साइटों का एक आदर्श रैंकिंग क्रम बनाया है. उपयोगकर्ता रैंकिंग के नतीजों से हमारे संदेह की पुष्टि हुई कि पेज लोड होने के बाद, खास तौर पर एक पेज पर नेविगेट करने और स्क्रोल करने के दौरान, ज़्यादातर उपयोगकर्ताओं जैसे हमारे साथ काम करने वाले लोग, लेआउट शिफ़्ट से बहुत परेशान होते हैं. हमने देखा कि इन गतिविधियों के दौरान कुछ साइटों पर, दूसरी साइटों की तुलना में उपयोगकर्ताओं को बेहतर अनुभव मिलता है.
हमने वीडियो के साथ-साथ Chrome ट्रेस रिकॉर्ड किए थे. इसलिए, हमारे पास हर उपयोगकर्ता गतिविधि के दौरान, अलग-अलग लेआउट शिफ़्ट की पूरी जानकारी मौजूद थी. हम इनका इस्तेमाल, हर उपयोगकर्ता की गतिविधि के हर आइडिया के लिए मेट्रिक की वैल्यू का हिसाब लगाने के लिए करते हैं. इससे हमें यह पता चला कि मेट्रिक के हर वैरिएंट ने उपयोगकर्ता के सफ़र को किस तरह रैंक किया. साथ ही, यह भी पता चला कि हर वैरिएंट की रैंकिंग, सबसे अच्छी रैंकिंग से कितनी अलग थी.
हमने किन मेट्रिक आइडिया को टेस्ट किया?
विंडो लगाने की रणनीतियां
अक्सर पेजों में कई लेआउट शिफ़्ट होते हैं, क्योंकि एक-एक करके नया कॉन्टेंट आता है, इसलिए एलिमेंट कई बार शिफ़्ट हो सकते हैं. इससे हमें बदलावों का ग्रुप बनाने की तकनीकों को आज़माने की प्रेरणा मिली. इसे पूरा करने के लिए, हमने तीन विंडोइंग तरीकों पर ध्यान दिया:
- टंबलिंग विंडो
- स्लाइडिंग विंडो
- सेशन विंडो
इनमें से हर उदाहरण में, पेज के लेआउट शिफ़्ट में, समय के साथ गंभीरता के हिसाब से बदलाव किए गए हैं. हर नीला बार, सिंगल लेआउट शिफ़्ट को दिखाता है और लंबाई उस शिफ़्ट का स्कोर दिखाती है. इन इमेज में दिखाया गया है कि समय के साथ, विंडोइंग की अलग-अलग रणनीतियों से, लेआउट में होने वाले बदलावों को कैसे ग्रुप किया जाता है.
टंबलिंग विंडो
सबसे आसान तरीका यह है कि पेज को एक जैसे साइज़ के कई हिस्सों में बांटा जाए. इन्हें टंबलिंग विंडो कहा जाता है. आप ऊपर ध्यान देंगे कि चौथा बार वाकई ऐसा लगता है कि इसे दूसरी टंबलिंग विंडो में ग्रुप किया जाना चाहिए, लेकिन सभी विंडो तय साइज़ की होती हैं, इसके बजाय यह पहली विंडो में होती है. अगर पेज पर लोड होने या उपयोगकर्ता के इंटरैक्शन के समय में थोड़ा अंतर है, तो एक जैसे लेआउट शिफ़्ट, उतार-चढ़ाव वाली विंडो की सीमाओं के अलग-अलग तरफ़ दिख सकते हैं.
स्लाइडिंग विंडो
एक ऐसा तरीका जिससे हमें एक ही अवधि के ज़्यादा संभावित ग्रुप देखने में मदद मिलती है, वह समय के साथ संभावित विंडो को लगातार अपडेट करता है. ऊपर दी गई इमेज में, एक बार में एक स्लाइड करने वाली विंडो दिखाई गई है. हालांकि, मेट्रिक बनाने के लिए हम स्लाइड करने वाली सभी विंडो या उनके सबसेट को देख सकते हैं.
सेशन विंडो
अगर हमें कई लेआउट शिफ़्ट की मदद से, पेज के उन हिस्सों की पहचान करने पर फ़ोकस करना होता है जहां कई बार लेआउट शिफ़्ट हुआ है, तो हम हर विंडो को शिफ़्ट से शुरू कर सकते हैं. साथ ही, हम इसे तब तक बढ़ाते रहेंगे, जब तक कि हमें लेआउट शिफ़्ट के बीच दिए गए साइज़ में कोई अंतर नहीं मिलता. यह तरीका, लेआउट शिफ़्ट को एक साथ ग्रुप कर देता है. साथ ही, शिफ़्ट न होने वाले ज़्यादातर उपयोगकर्ता अनुभव को अनदेखा कर देता है. एक समस्या यह भी हो सकती है कि लेआउट शिफ़्ट में कोई गैप न हो, तो सेशन विंडो पर आधारित मेट्रिक, मौजूदा सीएलएस मेट्रिक की तरह ही, बिना किसी सीमा के बढ़ सकती है. इसलिए, हमने ज़्यादा से ज़्यादा विंडो साइज़ के साथ भी इसे आज़माने की कोशिश की.
विंडो के साइज़
विंडो कितनी बड़ी हैं, इस आधार पर मेट्रिक से काफ़ी अलग-अलग नतीजे मिल सकते हैं. इसलिए, हमने कई अलग-अलग साइज़ की विंडो आज़माई:
- हर शिफ़्ट अपनी विंडो (विंडो नहीं) के तौर पर
- 100 मि॰से॰
- 300 मि॰से॰
- 1 सेकंड
- पांच सेकंड
संक्षेपण
हमने अलग-अलग विंडो की खास जानकारी देने के लिए कई तरीके आज़माए.
पर्सेंटाइल
हमने सबसे ज़्यादा विंडो वैल्यू के साथ-साथ 95वां पर्सेंटाइल, 75वां पर्सेंटाइल, और मीडियन को देखा.
ठीक-ठाक
हमने मीन विंडो वैल्यू पर गौर किया.
बजट
हमने सोचा कि क्या ऐसा कम से कम लेआउट शिफ़्ट स्कोर है जो उपयोगकर्ताओं पर ध्यान नहीं देगा और हम स्कोर में उस "बजट" के मुकाबले लेआउट शिफ़्ट को गिन सकते हैं. इसलिए, अलग-अलग संभावित "बजट" वैल्यू के लिए, हमने बजट के मुकाबले शिफ़्ट के प्रतिशत और बजट के मुकाबले कुल शिफ़्ट स्कोर पर ध्यान दिया.
अन्य रणनीतियां
हमने ऐसी कई रणनीतियों पर भी ध्यान दिया जिनमें विंडो शामिल नहीं थीं. जैसे, कुल लेआउट शिफ़्ट को पेज पर बिताए गए समय से भाग देना और सबसे खराब N अलग-अलग शिफ़्ट का औसत.
शुरुआती नतीजे
कुल मिलाकर, हमने ऊपर दिए गए आइडिया के अलग-अलग क्रम के आधार पर, 145 अलग-अलग मेट्रिक की परिभाषाओं को टेस्ट किया. हर मेट्रिक के लिए, हम मेट्रिक पर उपयोगकर्ताओं की गतिविधियों को उनके स्कोर के हिसाब से रैंक करते हैं. इसके बाद, हम मेट्रिक को इस हिसाब से रैंक करते हैं कि वे सबसे सही रैंकिंग के कितने करीब थे.
बेसलाइन पाने के लिए, हमने सभी साइटों को उनके मौजूदा सीएलएस स्कोर के हिसाब से भी रैंक किया है. सीएलएस ने 13 अन्य रणनीतियों के साथ 32वें स्थान पर जगह बनाई, इसलिए यह ऊपर दी गई रणनीतियों के हिसाब से बेहतर थी. यह पक्का करने के लिए कि नतीजे सही हों, हमने बिना किसी क्रम के तीन क्रम भी जोड़े. उम्मीद के मुताबिक, रैंडम ऑर्डर ने जितनी भी रणनीति आज़माई, उससे खराब रही.
यह समझने के लिए कि क्या हम डेटा सेट के लिए ज़्यादा फ़िट हो सकते हैं, हमने अपने विश्लेषण के बाद कुछ नए लेआउट शिफ़्ट वीडियो और ट्रेस रिकॉर्ड किए, उन्हें मैन्युअल रूप से रैंक किया और पाया कि नए डेटा सेट और मूल डेटा के लिए मेट्रिक की रैंकिंग काफ़ी समान है.
रैंकिंग में कुछ अलग रणनीतियां सामने आईं.
सबसे अच्छी रणनीतियां
रणनीतियों को रैंक करने पर हमने पाया कि तीन तरह की रणनीतियां, सूची में सबसे ऊपर हैं. दोनों की परफ़ॉर्मेंस करीब-करीब एक जैसी है. इसलिए, हम इन तीनों का विश्लेषण ज़्यादा बारीकी से करने की योजना बना रहे हैं. हम डेवलपर के सुझाव, शिकायत या राय भी जानना चाहते हैं. इससे, हमें यह समझने में मदद मिलेगी कि उपयोगकर्ता अनुभव के अलावा, किन दूसरी बातों पर हमें विचार करना चाहिए. (सुझाव/राय देने या शिकायत करने का तरीका नीचे देखें.)
लंबी विंडो के ज़्यादा पर्सेंटाइल
लंबी विंडो के साइज़ के साथ विंडो लगाने की कुछ रणनीतियां अच्छी तरह काम की हैं:
- 1 सेकंड की स्लाइडिंग विंडो
- सेशन विंडो की सीमा पांच सेकंड है और इसमें एक सेकंड का अंतर है
- सेशन विंडो, एक सेकंड के अंतर के साथ पूरी तरह से बंद हो गई हैं
इन सभी विज्ञापनों को 95वें पर्सेंटाइल और सबसे ज़्यादा वैल्यू, दोनों में बहुत अच्छी रैंकिंग मिली.
लेकिन इतने बड़े विंडो आकार के लिए, हमें 95वें पर्सेंटाइल का इस्तेमाल करने को लेकर चिंता थी—अक्सर हम सिर्फ़ 4-6 विंडो को देख रहे थे और उसका 95वां पर्सेंटाइल लेना बहुत ही इंटरपोलेशन है. यह साफ़ नहीं है कि मेट्रिक वैल्यू के मामले में इंटरपोलेशन क्या कर रहा है. ज़्यादा से ज़्यादा वैल्यू के बारे में ज़्यादा साफ़ तौर पर बताया गया है. इसलिए, हमने तय किया है कि सबसे ज़्यादा वैल्यू की जांच की जा रही है.
लंबे अंतराल के साथ सेशन विंडो का औसत
सभी अनकैप सेशन विंडो के स्कोर का औसत निकाला गया, जबकि दोनों के बीच 5 सेकंड का अंतराल था. इस रणनीति की कुछ दिलचस्प विशेषताएं हैं:
- अगर पेज में लेआउट शिफ़्ट के बीच कोई अंतर नहीं है, तो पेज पर एक लंबी सेशन वाली विंडो दिखती है. इस विंडो का स्कोर, मौजूदा सीएलएस के बराबर होता है.
- यह मेट्रिक, डिवाइस के कुछ समय से इस्तेमाल में न होने के समय को सीधे तौर पर ध्यान में नहीं रखती. यह सिर्फ़ पेज पर होने वाले बदलावों पर नज़र रखती है, न कि उस समय पर जब पेज शिफ़्ट नहीं हो रहा था.
छोटी विंडो के ज़्यादा पर्सेंटाइल
ज़्यादा से ज़्यादा 300 मि॰से॰ की स्लाइडिंग विंडो को बहुत ज़्यादा रैंक किया गया और साथ ही, 95वां पर्सेंटाइल भी शामिल किया गया. छोटी विंडो के साइज़ के लिए, बड़ी विंडो साइज़ की तुलना में इंटरपोलेशन कम होता है. हालांकि, हम स्लाइड करने वाली "रिपीट" विंडो को लेकर भी चिंता करते थे. अगर लेआउट शिफ़्ट का कोई सेट दो फ़्रेम पर होता है, तो ऐसी कई 300 मि॰से॰ वाली विंडो होती हैं जिनमें वे शामिल होती हैं. 95वें पर्सेंटाइल की तुलना में ज़्यादा से ज़्यादा जानकारी को लेना ज़्यादा साफ़ और आसान है. इसलिए, हमने फिर से तय किया है कि ज़्यादा से ज़्यादा वैल्यू की जांच करें.
इन रणनीतियों से आपको कोई फ़ायदा नहीं हुआ
ऐसी रणनीतियां जिन्होंने लेआउट शिफ़्ट के बिना और लेआउट शिफ़्ट के साथ बिताए गए समय का "औसत" अनुभव देखने की कोशिश की, उनकी परफ़ॉर्मेंस बहुत खराब रही. विंडोइंग की किसी भी रणनीति के मीडियन या 75वें पर्सेंटाइल में से किसी ने भी साइट को अच्छी तरह से रैंक नहीं की. समय के साथ, लेआउट में भी कोई बदलाव नहीं हुआ.
हमने स्वीकार किए जाने वाले लेआउट शिफ़्ट के लिए, कई अलग-अलग "बजट" का आकलन किया है:
- कुछ बजट से ज़्यादा लेआउट शिफ़्ट का प्रतिशत. अलग-अलग बजट के लिए, इन सभी की रैंकिंग बहुत खराब थी.
- औसत लेआउट शिफ़्ट, थोड़ा ज़्यादा हो गया है. इस रणनीति में ज़्यादातर वैरिएशन की परफ़ॉर्मेंस खराब रही, लेकिन बड़े अंतर वाले लंबे सेशन में औसत बढ़त से, सेशन की औसत विंडो के साथ लंबे अंतर वाले सेशन की औसत संख्या भी करीब-करीब बराबर रही. हमने सिर्फ़ आखिरी रणनीति के साथ आगे बढ़ने का फ़ैसला किया, क्योंकि यह ज़्यादा आसान है.
अगले चरण
बड़े पैमाने पर विश्लेषण
हमने Chrome में ऊपर बताई गई रणनीतियों को लागू किया है, ताकि हम वेबसाइटों के बहुत बड़े सेट के लिए, असल में इस्तेमाल होने वाला डेटा पा सकें. हम बड़े पैमाने पर विश्लेषण करने के लिए, रैंकिंग साइटों के मेट्रिक स्कोर के आधार पर, इसी तरह के तरीके का इस्तेमाल करने की योजना बना रहे हैं:
- सीएलएस के हिसाब से और मेट्रिक के हर नए कैंडिडेट के हिसाब से, सभी साइटों को रैंक करें.
- सीएलएस और हर कैंडिडेट के हिसाब से, किन साइटों को सबसे अलग तरीके से रैंक किया जाता है? क्या इन साइटों को देखने पर, हमें कुछ ऐसा लगता है जिसकी उम्मीद नहीं थी?
- नए मेट्रिक उम्मीदवारों के बीच सबसे बड़े अंतर क्या हैं? क्या इनमें से कोई भी अंतर, किसी उम्मीदवार के फ़ायदे या नुकसान के तौर पर सामने आया है?
- ऊपर दिया गया विश्लेषण दोहराएं, लेकिन हर पेज के लोड होने में बिताए गए समय के आधार पर बकेटिंग करें. क्या हमें स्वीकार किए जाने वाले लेआउट शिफ़्ट के साथ, लंबे समय तक चलने वाले पेज लोड में सुधार दिखता है? क्या हमें कुछ समय के लिए रहने वाले पेजों के लिए कोई ऐसा नतीजा मिला जिसकी उम्मीद नहीं थी?
हमारे काम करने के तरीके के बारे में सुझाव, शिकायत या राय
इन तरीकों के बारे में, हम वेब डेवलपर से सुझाव लेना चाहेंगे. नया तरीका चुनते समय कुछ बातों का ध्यान रखें:
क्या नहीं बदल रहा है
हम यह साफ़ तौर पर बताना चाहते हैं कि नए तरीके से बहुत सारी चीज़ें नहीं बदलेंगी:
- हमारा कोई भी मेट्रिक आइडिया, अलग-अलग फ़्रेम के आकलन के लिए, लेआउट शिफ़्ट स्कोर का तरीका नहीं बदलता. यह सिर्फ़ कई फ़्रेम के बारे में जानकारी देने का तरीका होता है. इसका मतलब है कि लेआउट शिफ़्ट के लिए, JavaScript API पहले जैसा ही रहेगा. साथ ही, डेवलपर टूल के इस्तेमाल किए जाने वाले Chrome ट्रेस के बुनियादी इवेंट भी पहले जैसे ही रहेंगे. इसलिए, WebPageTest और Chrome DevTools जैसे टूल में लेआउट शिफ़्ट रेक्ट इसी तरह काम करते रहेंगे.
- हम डेवलपर के लिए मेट्रिक को आसानी से अपनाने लायक बनाने के लिए लगातार काम करते रहेंगे. इन मेट्रिक में ये मेट्रिक वेब की ज़रूरी जानकारी की लाइब्रेरी में शामिल होती हैं. साथ ही, इन्हें web.dev पर तैयार किया जाता है और लाइटहाउस जैसे हमारे डेवलपर टूल में उनकी रिपोर्टिंग भी की जाती है.
मेट्रिक के बीच ट्रेड-ऑफ़
सबसे ऊपर की रणनीतियों में से एक, औसत के तौर पर लेआउट शिफ़्ट विंडो की खास जानकारी देती है और बाकी विंडो, सबसे ज़्यादा विंडो की रिपोर्ट करती हैं. लंबे समय तक खुलने वाले पेजों के लिए, औसत वैल्यू को ज़्यादा काम का माना जाएगा. हालांकि, आम तौर पर डेवलपर के लिए एक ही विंडो पर कार्रवाई करना आसान होगा. वे ऐसा होने पर लॉग कर सकते हैं और ऐसे एलिमेंट जो शिफ़्ट हुए हैं वगैरह. हम आपके सुझाव, शिकायत या राय जानना चाहेंगे जो डेवलपर के लिए ज़्यादा ज़रूरी है.
क्या स्लाइडिंग या सेशन विंडो को समझना आसान है? क्या ये अंतर आपके लिए अहम हैं?
फ़ीडबैक कैसे दें
किसी भी साइट पर लेआउट शिफ़्ट की नई मेट्रिक इस्तेमाल की जा सकती हैं. इसके लिए, आपको JavaScript के उदाहरण लागू करना या वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले एक्सटेंशन के फ़ोर्क का इस्तेमाल करना होगा.
कृपया हमारे web-vitals-feedback वाले Google ग्रुप को ईमेल से सुझाव भेजें. ईमेल की सब्जेक्ट लाइन में "[लेआउट शिफ़्ट मेट्रिक]" होना चाहिए. हम आपके विचार जानने के लिए बहुत उत्सुक हैं!