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

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

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

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

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

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

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

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

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

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

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

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

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

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

हमने मेट्रिक के किन आइडिया को टेस्ट किया?

विंडोविंग की रणनीतियां

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

• टंबल विंडो
• स्लाइडिंग विंडो
• सेशन विंडो

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

टंबल विंडो

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

स्लाइडिंग विंडो

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

सेशन विंडो

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

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

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

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

खास जानकारी

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

पर्सेंटाइल

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

औसत

हमने विंडो की औसत वैल्यू देखी.

बजट

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

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

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

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

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

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

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

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

सबसे सही रणनीतियां

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

लंबी विंडो के हाई पर्सेंटाइल

विंडो के साइज़ को बड़ा करने की कुछ रणनीतियों से, बेहतर नतीजे मिले:

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

ये सभी, 95वें पर्सेंटाइल और ज़्यादा रेटिंग, दोनों में बहुत अच्छी रैंक पर रहे.

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

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

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

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

कम समयावधि वाली विंडो का प्रतिशत ज़्यादा होना

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

ऐसी रणनीतियां जो काम नहीं आईं

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

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

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

अगले चरण

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

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

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

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

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

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

हम आपको बताना चाहते हैं कि नए तरीके से, कई चीज़ों में बदलाव नहीं होगा:

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

मेट्रिक के बीच के अंतर

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

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

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

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

कृपया अपने सुझाव, शिकायत या राय, हमारे web-vitals-feedback Google ग्रुप को ईमेल करें. ईमेल के विषय में "[Layout Shift Metrics]" लिखें. हमें आपकी राय जानकर खुशी होगी!