परफ़ॉर्मेंस की नई मेट्रिक, PageSpeed Insights और Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) से जुड़े अपडेट वगैरह.
Chrome डेवलपर समिट में, मैंने और पॉल आयरिश ने Lighthouse के अपडेट का एलान किया था. इनमें Lighthouse CI, परफ़ॉर्मेंस स्कोर का नया फ़ॉर्मूला वगैरह शामिल हैं. Lighthouse से जुड़ी बड़ी खबरों के साथ-साथ, हमने परफ़ॉर्मेंस टूल से जुड़ी दिलचस्प जानकारी भी दी. इसमें परफ़ॉर्मेंस से जुड़ी नई मेट्रिक, PageSpeed Insights और Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) के अपडेट, और वेब के पारिस्थितिक तंत्र के विश्लेषण से मिली अहम जानकारी शामिल है.
परफ़ॉर्मेंस की नई मेट्रिक
उपयोगकर्ता अनुभव की बारीकियों को मेज़र करना, आपकी आय पर पड़ने वाले असर को मेज़र करने और सुधारों और रिग्रेशन को ट्रैक करने के लिए ज़रूरी है. समय के साथ, नई मेट्रिक विकसित हुई हैं, ताकि इन बारीकियों को कैप्चर किया जा सके और उपयोगकर्ता अनुभव को मेज़र करने में मौजूद अंतर को पूरा किया जा सके. मेट्रिक की सूची में दो नई फ़ील्ड मेट्रिक जोड़ी गई हैं. ये मेट्रिक, W3C वेब परफ़ॉर्मेंस वर्किंग ग्रुप में शामिल हैं. इनमें, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) और लेआउट शिफ़्ट होने में लगने वाला समय (सीएलएस) शामिल हैं. साथ ही, एक नई लैब मेट्रिक भी जोड़ी गई है. इसका नाम ब्लॉकिंग में लगने वाला कुल समय (टीबीटी) है.
सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) से पता चलता है कि व्यूपोर्ट में सबसे बड़ा कॉन्टेंट एलिमेंट कब दिखता है.
सबसे बड़े कॉन्टेंटफ़ुल पेंट से पहले, फ़र्स्ट मीनिंगफ़ुल पेंट (एफ़एमपी) और स्पीड इंडेक्स (एसआई) का इस्तेमाल, शुरुआती पेंट के बाद लोडिंग अनुभव को कैप्चर करने के लिए किया जाता था. हालांकि, ये मेट्रिक जटिल हैं और अक्सर यह पता नहीं लगा पाती हैं कि पेज का मुख्य कॉन्टेंट कब लोड हुआ. रिसर्च से पता चला है कि पेज पर सबसे बड़े एलिमेंट के रेंडर होने का समय देखकर, यह पता लगाया जा सकता है कि पेज का मुख्य कॉन्टेंट कब लोड हुआ.
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) की नई मेट्रिक, Lighthouse की रिपोर्ट में जल्द ही उपलब्ध होगी. इस बीच, JavaScript में एलसीपी को मेज़र किया जा सकता है.
टोटल ब्लॉकिंग टाइम (टीबीटी)
ब्लॉक किए जाने का कुल समय (टीबीटी) मेट्रिक, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और इंटरैक्टिव में लगने वाले समय (टीटीआई) के बीच के कुल समय को मेज़र करती है. इस दौरान, मुख्य थ्रेड को इनपुट का रिस्पॉन्स देने से रोकने के लिए काफ़ी समय तक ब्लॉक किया गया था.
अगर कोई टास्क मुख्य थ्रेड पर 50 मिलीसेकंड से ज़्यादा समय तक चलता है, तो उसे लंबा टास्क माना जाता है. इसके बाद के हर मिलीसेकंड को उस टास्क के ब्लॉकिंग समय में गिना जाता है.

किसी पेज के लिए, ब्लॉक किए जाने का कुल समय, FCP और TTI के बीच होने वाले सभी लंबी अवधि के टास्क के ब्लॉक किए जाने के समय का कुल योग होता है.

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

ज़्यादा जानने के लिए, Lighthouse की परफ़ॉर्मेंस स्कोरिंग और web.dev की नई मेट्रिक कलेक्शन देखें.
PageSpeed Insights में फ़ील्ड डेटा (CrUX) थ्रेशोल्ड में बदलाव
पिछले एक साल से, हम Chrome इस्तेमाल करने वाले लोगों के अनुभव (CrUX) के डेटा की मदद से, फ़ील्ड से वेब परफ़ॉर्मेंस का विश्लेषण कर रहे हैं. उस डेटा से मिली अहम जानकारी के आधार पर, हमने थ्रेशोल्ड का फिर से आकलन किया. इन थ्रेशोल्ड का इस्तेमाल, फ़ील्ड पर वेबसाइट की परफ़ॉर्मेंस को "धीमी", "सामान्य" या "तेज़" के तौर पर लेबल करने के लिए किया जाता है.

किसी साइट का पूरा आकलन करने के लिए, PageSpeed Insights (PSI), फ़ील्ड डेटा के कुल डिस्ट्रिब्यूशन के किसी खास प्रतिशत का इस्तेमाल, उस साइट के लिए सबसे सही संख्या के तौर पर करता है. पहले इस्तेमाल किए गए थ्रेशोल्ड, फ़र्स्ट कॉन्टेंटफ़ुल पेंट के लिए 90वां प्रतिशत और फ़र्स्ट इनपुट डिले (एफ़आईडी) के लिए 95वां प्रतिशत थे.
उदाहरण के लिए, अगर किसी साइट का एफ़सीपी डिस्ट्रिब्यूशन 50% तेज़, 30% सामान्य, और 20% धीमा है, तो 90वां पर्सेंटाइल एफ़सीपी, धीमे सेक्शन में आता है. इससे साइट का कुल फ़ील्ड स्कोर धीमा हो जाता है.
इसे वेबसाइटों पर बेहतर तरीके से डिस्ट्रिब्यूट करने के लिए अडजस्ट किया गया है. इसके नए ब्रेकडाउन के बारे में यहां बताया गया है:
मेट्रिक | कुल पर्सेंटाइल | तेज़ (मि॰से॰) | सामान्य (मि॰से॰) | धीमा (मिलीसेकंड) |
एफ़सीपी | 75वां पर्सेंटाइल | 1000 | 1000-3000 | 3000+ |
एफ़आईडी | 95वां पर्सेंटाइल | 100 | 100-300 | 300+ |
उदाहरण के लिए, अगर किसी साइट का एफ़सीपी डिस्ट्रिब्यूशन 50% तेज़, 30% सामान्य, और 20% धीमा है, तो 75वां पर्सेंटाइल एफ़सीपी सामान्य सेक्शन में आता है. इससे साइट का कुल फ़ील्ड स्कोर सामान्य हो जाता है.
PageSpeed Insights में कैननिकल यूआरएल रीडायरेक्ट
उपयोगकर्ता अनुभव को ज़्यादा से ज़्यादा सटीक तरीके से मेज़र करने के लिए, PageSpeed Insights की टीम ने PSI में फिर से विश्लेषण करने का अनुरोध जोड़ा है. जिन साइटों को किसी नए यूआरएल पर रीडायरेक्ट किया जाता है उनके लिए, आपको लैंडिंग पेज के यूआरएल पर रिपोर्ट को फिर से चलाने के लिए कहा जाता है. इससे आपको अपनी असल परफ़ॉर्मेंस के बारे में पूरी जानकारी मिलती है.

Search Console की नई स्पीड रिपोर्ट में CrUX
Search Console ने Chrome Dev Summit से एक हफ़्ता पहले, साइट लोड होने की रफ़्तार बताने वाली नई रिपोर्ट को लॉन्च किया था. यह Chrome उपयोगकर्ता अनुभव रिपोर्ट के डेटा का इस्तेमाल करता है, ताकि साइट के मालिकों को उपयोगकर्ता अनुभव से जुड़ी संभावित समस्याओं का पता चल सके. साइट लोड होने की रफ़्तार बताने वाली रिपोर्ट, एक जैसे यूआरएल को अपने-आप अलग-अलग कैटगरी में बांट देती है. ये कैटगरी, "तेज़ रफ़्तार से लोड होने वाले पेज", "सामान्य रफ़्तार से लोड होने वाले पेज", और "धीमी रफ़्तार से लोड होने वाले पेज" हैं. इससे, किसी समस्या की परफ़ॉर्मेंस को बेहतर बनाने के लिए प्राथमिकता तय करने में मदद मिलती है.

वेब अलमनैक

शुरुआती मुख्य भाषण में, हमने वेब अल्मनैक के लॉन्च का एलान किया. यह एक सालाना प्रोजेक्ट है, जिसमें वेब कम्यूनिटी की विशेषज्ञता के साथ वेब की स्थिति के आंकड़े और रुझानों को मैच किया जाता है. इस प्रोजेक्ट पर काम करने के लिए, Chrome डेवलपर और वेब कम्यूनिटी के 85 लोगों ने वॉलंटियर किया है. इस प्रोजेक्ट में, वेब के 20 मुख्य पहलुओं का विश्लेषण किया जाता है. इनमें यह पता लगाया जाता है कि साइटें कैसे बनाई जाती हैं, डिलीवर की जाती हैं, और उनका इस्तेमाल कैसे किया जाता है. वेब पर परफ़ॉर्मेंस, JavaScript, और तीसरे पक्ष के कोड की स्थिति के बारे में ज़्यादा जानने के लिए, वेब अल्मनैक को एक्सप्लोर करना शुरू करें.
ज़्यादा जानें
Chrome डेवलपर समिट में, परफ़ॉर्मेंस टूल के अपडेट के बारे में ज़्यादा जानने के लिए, 'स्पीड टूल के विकास' टॉक देखें: