सीएलएस मेट्रिक को बेहतर बनाने की योजनाएं, ताकि यह लंबे समय तक पेजों पर रहने वाले पेजों के लिए ज़्यादा निष्पक्ष हो.
हमने (Chrome स्पीड मेट्रिक टीम) ने हाल ही में अपनी शुरुआती रिसर्च के बारे में बताया है. इसमें सीएलएस मेट्रिक को लंबे समय के लिए खुले हुए पेजों के लिए ज़्यादा बेहतर बनाने के विकल्प दिए गए हैं. हमें काफ़ी काम के सुझाव मिले हैं. बड़े स्तर पर विश्लेषण करने के बाद, हमने इस मेट्रिक में किए जाने वाले बदलाव को अंतिम रूप दिया है: 1 सेकंड के अंतर वाली ज़्यादा से ज़्यादा सेशन विंडो, जो पांच सेकंड में उपलब्ध होती है.
इस बारे में ज़्यादा जानने के लिए, यह लेख पढ़ना जारी रखें!
हमने विकल्पों का आकलन कैसे किया?
हमने डेवलपर समुदाय से मिले सभी सुझाव, शिकायत या राय की समीक्षा की है और उसे ध्यान में रखा है.
हमने Chrome में टॉप विकल्पों का भी इस्तेमाल किया. साथ ही, लाखों वेब पेजों से जुड़े मेट्रिक का बड़े पैमाने पर विश्लेषण किया. हमने जांच की कि हर विकल्प से किस तरह की साइटों में सुधार हुआ है और विकल्पों की तुलना कैसे की गई है. खास तौर पर, हमने उन साइटों को देखा जिनका स्कोर अलग-अलग विकल्पों से अलग था. कुल मिलाकर, हमने इन चीज़ों को देखा:
- सभी विकल्पों ने पेज पर बिताए गए समय और लेआउट शिफ़्ट स्कोर के बीच के संबंध को कम कर दिया है.
- किसी भी विकल्प की वजह से किसी भी पेज का स्कोर खराब नहीं हुआ. इसलिए, आपको इस बात की चिंता नहीं है कि इस बदलाव से आपकी साइट की परफ़ॉर्मेंस खराब हो जाएगी.
फ़ैसले के समय
सेशन विंडो क्यों ज़रूरी है?
हमने अपनी पहले की पोस्ट में, लेआउट शिफ़्ट को एक साथ ग्रुप करने के लिए विंडोविंग को कुछ खास रणनीतियों के बारे में बताया था, ताकि यह पक्का किया जा सके कि स्कोर में बढ़ोतरी न हो. डेवलपर से मिला सुझाव, सेशन विंडो की रणनीति को बहुत पसंद आया, क्योंकि इसमें लेआउट शिफ़्ट को आसानी से एक साथ रखा जाता है.
सेशन विंडो की समीक्षा करने के लिए, यहां एक उदाहरण दिया गया है:
ऊपर दिए गए उदाहरण में, जब उपयोगकर्ता पेज देखता है, तो समय के साथ कई लेआउट शिफ़्ट होते हैं. हर कॉलम को एक नीले बार से दिखाया जाता है. नीले बार की ऊंचाई अलग-अलग होती है. ये हर लेआउट शिफ़्ट का स्कोर दिखाती हैं. सेशन विंडो, पहली लेआउट शिफ़्ट से शुरू होती है और यह तब तक बढ़ती रहती है, जब तक कोई लेआउट शिफ़्ट नहीं होता. अगली लेआउट शिफ़्ट होने पर, एक नई सेशन विंडो शुरू हो जाती है. इस उदाहरण में तीन सेशन विंडो हैं, जिनमें कोई लेआउट शिफ़्ट नहीं है. सीएलएस की मौजूदा परिभाषा की तरह ही, हर शिफ़्ट के स्कोर जोड़े जाते हैं, ताकि हर विंडो का स्कोर उसके अलग-अलग लेआउट शिफ़्ट का योग हो.
शुरुआती रिसर्च के आधार पर, हमने सेशन विंडो के बीच एक सेकंड का अंतर चुना और यह अंतर बड़े पैमाने पर के विश्लेषण में कारगर रहा. ऊपर दिए गए उदाहरण में दिखाया गया "सेशन गैप" एक सेकंड का है.
सबसे ज़्यादा सेशन वाली विंडो क्यों इस्तेमाल की जा रही है?
हमने अपनी शुरुआती रिसर्च में खास जानकारी देने की रणनीतियों को दो विकल्पों में से एक तय किया है:
- बहुत बड़ी सेशन विंडो के लिए, सभी सेशन विंडो का औसत स्कोर. इन विंडो के बीच में पांच सेकंड के गैप वाली अनकैप की गई विंडो होती है.
- छोटी सेशन विंडो के लिए, सभी सेशन विंडो का ज़्यादा से ज़्यादा स्कोर (पांच सेकंड का हो सकता है, जिसमें एक सेकंड का अंतर होता है).
शुरुआती रिसर्च के बाद, हमने हर मेट्रिक को Chrome में जोड़ा, ताकि हम लाखों यूआरएल का बड़े स्तर पर विश्लेषण कर सकें. बड़े पैमाने पर किए जाने वाले विश्लेषण में हमें, इस तरह के लेआउट शिफ़्ट पैटर्न वाले कई यूआरएल मिले:
सबसे नीचे दाईं ओर, आपको सेशन विंडो 2 में सिर्फ़ एक छोटा-सा लेआउट शिफ़्ट दिखेगा, जो इसे बहुत कम स्कोर देगा. इसका मतलब है कि औसत स्कोर काफ़ी कम है. लेकिन अगर डेवलपर उस छोटे लेआउट शिफ़्ट को ठीक कर दे, तो क्या होगा? इसके बाद, स्कोर की गिनती, सेशन विंडो 1 के आधार पर की जाती है. इसका मतलब है कि पेज का स्कोर करीब दोगुना हो जाता है. अपने लेआउट शिफ़्ट को बेहतर बनाने से डेवलपर को भ्रम हो सकता है और नाराज़गी लग सकती है. इससे सिर्फ़ स्कोर खराब हो जाएगा. साथ ही, उपयोगकर्ता अनुभव के लिए इस छोटे लेआउट शिफ़्ट को हटाना साफ़ तौर पर थोड़ा बेहतर होता है, ताकि इससे स्कोर खराब न हो.
औसत से जुड़ी इस समस्या की वजह से, हमने छोटी, सीमित, ज़्यादा से ज़्यादा विंडो के साथ आगे बढ़ने का फ़ैसला किया. इसलिए, ऊपर दिए गए उदाहरण में, सेशन विंडो 2 को अनदेखा किया जाएगा और सिर्फ़ सेशन विंडो 1 में लेआउट शिफ़्ट के योग को रिपोर्ट किया जाएगा.
5 सेकंड ही क्यों?
हमने कई विंडो साइज़ की जांच की और हमें दो बातें मिलीं:
- छोटी विंडो के लिए, पेज के धीमे लोड होने और उपयोगकर्ता के इंटरैक्शन पर धीमे रिस्पॉन्स की वजह से, लेआउट शिफ़्ट कई विंडो में बदल सकता है और स्कोर बेहतर हो सकता है. हम खिड़की को काफ़ी बड़ा रखना चाहते थे, ताकि ट्रैफ़िक कम न हो!
- कुछ पेज ऐसे हैं जिनमें छोटे लेआउट शिफ़्ट का लगातार स्ट्रीम किया जाता है. उदाहरण के लिए, खेल के स्कोर का ऐसा पेज जो हर स्कोर अपडेट के साथ थोड़ा बदल जाता है. ये बदलाव परेशान करने वाले हैं, लेकिन समय के साथ ये ज़्यादा परेशान नहीं करते. इसलिए हम यह पक्का करना चाहते थे कि विंडो इस तरह के लेआउट शिफ़्ट के लिए सीमित हो.
इन दो चीज़ों को ध्यान में रखते हुए, असल दुनिया के वेब पेजों पर कई तरह की विंडो के साइज़ की तुलना करते हुए, हमने यह नतीजा निकाला है कि विंडो के साइज़ के लिए, पांच सेकंड काफ़ी हैं.
इससे मेरे पेज के सीएलएस स्कोर पर क्या असर पड़ेगा?
इस अपडेट में पेज के सीएलएस को सीमित किया जाता है, इसलिए इस बदलाव की वजह से किसी भी पेज का स्कोर सबसे खराब नहीं होगा.
साथ ही, हमारे विश्लेषण के मुताबिक, 55% ऑरिजिन को 75वें पर्सेंटाइल पर सीएलएस में कोई बदलाव नहीं दिखेगा. इसकी वजह यह है कि या तो उनके पेजों में फ़िलहाल कोई लेआउट शिफ़्ट नहीं होता है या उनकी शिफ़्ट पहले से ही एक ही सेशन विंडो तक सीमित हैं.
इस बदलाव के साथ, बाकी ऑरिजिन को 75वें पर्सेंटाइल पर बेहतर स्कोर दिखेगा. ज़्यादातर ज़्यादातर लोगों को मामूली सुधार दिखेगा, लेकिन करीब 3% लोगों को "सुधार की ज़रूरत है" या "खराब" रेटिंग मिलने से, "अच्छी" रेटिंग मिलने की वजह से उनके स्कोर में सुधार दिखेगा. ये पेज आम तौर पर इनफ़ाइनाइट स्क्रोलर का इस्तेमाल करते हैं या इनमें यूज़र इंटरफ़ेस (यूआई) कई धीमे अपडेट होते हैं, जैसा कि हमारी पहले की पोस्ट में बताया गया है.
मैं इसे कैसे आज़माऊं?
हम जल्द ही अपने टूल को अपडेट करेंगे, ताकि मेट्रिक की नई परिभाषा का इस्तेमाल किया जा सके! तब तक, किसी भी साइट पर सीएलएस के अपडेट किए गए वर्शन को आज़माया जा सकता है. इसके लिए, JavaScript के उदाहरण या वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले एक्सटेंशन का इस्तेमाल करें.
उन सभी लोगों को धन्यवाद जिन्होंने पिछली पोस्ट पढ़ने के लिए समय दिया और अपने सुझाव, शिकायत या राय दी!