सुझाव, शिकायत या राय: लंबे समय तक पेजों पर रहने वाले पेजों के लिए, लेआउट शिफ़्ट की बेहतर मेट्रिक उपलब्ध कराना

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

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

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

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

लंबे समय तक सीएलएस स्कोर वाले पेजों के अंदरूनी विश्लेषण से पता चला है कि ज़्यादातर समस्याएं इन पैटर्न की वजह से हुई थीं:

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

हालांकि, हम डेवलपर को उपयोगकर्ता अनुभव को बेहतर बनाने के लिए प्रोत्साहित करते हैं, लेकिन हम मेट्रिक को बेहतर बनाने और संभावित तरीकों पर सुझाव पाने की दिशा में भी काम कर रहे हैं.

हम यह कैसे तय करेंगे कि नई मेट्रिक बेहतर है या नहीं?

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

सबसे पहले हमने अलग-अलग वेबसाइटों के ज़रिए 34 उपयोगकर्ताओं की गतिविधियों के वीडियो और Chrome ट्रेस को रिकॉर्ड किया. उपयोगकर्ता की गतिविधियां चुनते समय, हमने कुछ चीज़ों पर ध्यान दिया:

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

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

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

हमने किन मेट्रिक आइडिया की जांच की?

विंडो बनाने से जुड़ी रणनीतियां

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

• विंडो को एक से दूसरी जगह ले जाना
• विंडो स्लाइड करना
• सेशन विंडो

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

विंडो को एक से दूसरी जगह ले जाना

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

विंडो स्लाइड करना

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

सेशन विंडो

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

विंडो के साइज़

विंडो असल में कितनी बड़ी हैं, इसके आधार पर मेट्रिक अलग-अलग नतीजे दे सकती है, इसलिए हमने कई अलग-अलग विंडो साइज़ आज़माए:

• हर शिफ़्ट को अलग विंडो के तौर पर सेट किया जाता है (कोई विंडो नहीं)
• 100 मिलीसेकंड
• 300 मिलीसेकंड
• 1 सेकंड
• 5 सेकंड

खास जानकारी

हमने अलग-अलग विंडो की खास जानकारी देने के लिए, कई तरीके आज़माए.

पर्सेंटाइल

हमने विंडो की सबसे बड़ी वैल्यू के साथ-साथ, 95वां पर्सेंटाइल, 75वां पर्सेंटाइल, और मीडियन पर गौर किया.

ठीक-ठाक

हमने मीन विंडो वैल्यू पर गौर किया.

बजट

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

अन्य रणनीतियां

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

शुरुआती नतीजे

कुल मिलाकर, हमने ऊपर दिए गए आइडिया के क्रमचय के आधार पर 145 अलग-अलग मेट्रिक परिभाषाओं का टेस्ट किया. हर मेट्रिक के लिए, हम मेट्रिक में उपयोगकर्ता की गतिविधियों को उसके स्कोर के हिसाब से रैंक करते हैं. इसके बाद, हम मेट्रिक को इस हिसाब से रैंक करते हैं कि वे सही रैंकिंग के कितने करीब थे.

बेसलाइन हासिल करने के लिए, हमने सभी साइटों को उनके मौजूदा सीएलएस स्कोर के हिसाब से रैंक भी की है. सीएलएस ने 13 अन्य रणनीतियों के साथ 32वें स्थान पर रहा. इसलिए, यह ऊपर दी गई रणनीतियों के ज़्यादातर विकल्पों से बेहतर था. सही नतीजे दिखाने के लिए, हमने तीन क्रमों में भी यह सुविधा जोड़ी है. उम्मीद के मुताबिक, किसी भी रैंडम ऑर्डर को टेस्ट की गई हर रणनीति की तुलना में खराब रहा.

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

हालांकि, रैंकिंग में कुछ अलग रणनीतियां सबसे अलग दिख रही थीं.

सबसे अच्छी रणनीतियां

रणनीतियों को रैंक करते समय हमने पाया कि सूची में तीन तरह की रणनीतियां सबसे ऊपर हैं. हर एक की परफ़ॉर्मेंस करीब-करीब एक जैसी थी, इसलिए हम इन तीनों के बारे में ज़्यादा गहराई से विश्लेषण करने की योजना बना रहे हैं. हम डेवलपर के सुझाव भी जानना चाहते हैं, ताकि हमें यह पता चल सके कि क्या उपयोगकर्ता अनुभव के अलावा, अन्य चीज़ें भी हैं या नहीं, इन बातों का फ़ैसला लेते समय हमें उन बातों पर ध्यान देना चाहिए. (सुझाव, राय देने या शिकायत करने का तरीका नीचे देखें.)

लंबी विंडो के ज़्यादा पर्सेंटाइल

खिड़की बनाने से जुड़ी कुछ रणनीतियों ने लंबी विंडो के साइज़ के साथ अच्छा काम किया:

• स्लाइड होने वाली 1 सेकंड की विंडो
• सेशन की विंडो पांच सेकंड के लिए शेड्यूल की गई हैं, जिनमें एक सेकंड का अंतर है
• सेशन की विंडो एक सेकंड के अंतर के साथ पूरी नहीं की गई

इन सभी को 95वें पर्सेंटाइल पर और सबसे ज़्यादा संख्या में रैंक किया गया.

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

लंबे अंतराल वाली सेशन की औसत विंडो

दोनों के बीच 5 सेकंड के अंतर के साथ, अनकैप्ड सभी सेशन विंडो के स्कोर का औसत निकालने में बहुत अच्छा रहा. इस रणनीति की कुछ दिलचस्प विशेषताएं हैं:

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

छोटी विंडो के लिए ज़्यादा पर्सेंटाइल

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

वे रणनीतियां जो काम नहीं करतीं

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

हमने स्वीकार किए गए लेआउट शिफ़्ट के लिए, कई अलग-अलग "बजट" का आकलन किया है:

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

अगले चरण

बड़े पैमाने पर विश्लेषण

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

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

हमारे काम करने के तरीके के बारे में सुझाव, शिकायत या राय

हमें इन तरीकों के बारे में, वेब डेवलपर से सुझाव, शिकायत या राय जानकर खुशी होगी. नए तरीकों पर विचार करते समय इन बातों का ध्यान रखें:

क्या नहीं बदल रहा है

हम यह साफ़ तौर पर बताना चाहते हैं कि नए तरीके से बहुत सी चीज़ें नहीं बदलेंगी:

• हमारे किसी भी मेट्रिक आइडिया में, अलग-अलग फ़्रेम के हिसाब से लेआउट शिफ़्ट स्कोर का तरीका नहीं बदला जाता है. सिर्फ़ एक से ज़्यादा फ़्रेम के बारे में खास जानकारी देने का तरीका बदला जाता है. इसका मतलब है कि लेआउट शिफ़्ट के लिए JavaScript API पहले जैसा ही रहेगा. साथ ही, डेवलपर टूल में इस्तेमाल किए जाने वाले Chrome ट्रेस में मौजूद इवेंट भी पहले जैसे ही रहेंगे. इसलिए, WebPageTest और Chrome DevTools जैसे टूल में लेआउट शिफ़्ट रेक्टैंगल पहले की तरह ही काम करते रहेंगे.
• हम पूरी कोशिश करते रहेंगे कि डेवलपर इन मेट्रिक को आसानी से इस्तेमाल कर पाएं. इन मेट्रिक में, वेब-विटल्स लाइब्रेरी में इन्हें शामिल किया गया है, web.dev पर दस्तावेज़ बनाए गए हैं, और इनकी जानकारी को लाइटहाउस जैसे हमारे डेवलपर टूल में रिपोर्ट किया गया है.

मेट्रिक के बीच ट्रेड-ऑफ़

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

क्या आपको स्लाइडिंग या सेशन विंडो समझने में ज़्यादा आसान लगती है? क्या अंतर आपके लिए अहम हैं?

फ़ीडबैक कैसे दें

हमारे JavaScript लागू करने के उदाहरण या Core Web Vitals एक्सटेंशन का इस्तेमाल करके, किसी भी साइट पर लेआउट शिफ़्ट की नई मेट्रिक को आज़माया जा सकता है.

कृपया हमारे web-vitals-feedback Google ग्रुप पर सुझाव, शिकायत या राय भेजें. इसकी सब्जेक्ट लाइन में "[लेआउट शिफ़्ट मेट्रिक]" लिखा होगा. हमें आपकी राय का इंतज़ार रहेगा!