स्पीड टूल के विकास: Chrome डेवलपर सम्मेलन 2019 की हाइलाइट

परफ़ॉर्मेंस की नई मेट्रिक, PageSpeed Insights, और Chrome इस्तेमाल करने वाले लोगों के अनुभव की रिपोर्ट (CrUX) में अपडेट वगैरह.

Elizabeth Sweeny

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

परफ़ॉर्मेंस की नई मेट्रिक

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

सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)

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

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

सबसे बड़े कॉन्टेंटफ़ुल पेंट की नई मेट्रिक, जल्द ही Lighthouse रिपोर्ट में उपलब्ध होगी. इस दौरान, JavaScript में एलसीपी को मेज़र किया जा सकता है.

टोटल ब्लॉकिंग टाइम (टीबीटी)

टोटल ब्लॉकिंग टाइम (TBT) मेट्रिक से, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और टाइम टू इंटरैक्टिव (टीटीआई) के बीच लगने वाले कुल समय का आकलन किया जाता है. इस मेट्रिक में, मुख्य थ्रेड को लंबे समय तक ब्लॉक किया गया था, ताकि इनपुट का रिस्पॉन्स न मिले.

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

किसी पेज के लिए टोटल ब्लॉकिंग टाइम, एफ़सीपी और टीटीआई के बीच हुए सभी लंबे टास्क को ब्लॉक करने के समय का कुल योग है.

टाइम टू इंटरैक्टिव, यह पता लगाने का अच्छा काम करता है कि मुख्य थ्रेड के लोड होने के बाद कब बंद होता है. टोटल ब्लॉकिंग टाइम का मकसद यह आकलन करना है कि लोड के दौरान, मुख्य थ्रेड पर किस तरह की परेशानी है. इस तरह, टीटीआई और TBT एक-दूसरे को पूरा करते हैं और संतुलन बनाते हैं.

कुल लेआउट शिफ़्ट (सीएलएस)

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

इसे कैलकुलेट करने और इसे मेज़र करने का तरीका जानने के लिए, कुल लेआउट शिफ़्ट की ज़्यादा जानकारी वाली गाइड देखें.

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

ज़्यादा जानने के लिए, Lighthouse की परफ़ॉर्मेंस स्कोरिंग और नया web.dev मेट्रिक कलेक्शन देखें.

PageSpeed Insights में फ़ील्ड डेटा (CrUX) के थ्रेशोल्ड अडजस्ट किए गए

पिछले साल से, हम Chrome User Experience (CrUX) डेटा की मदद से, फ़ील्ड की वेब परफ़ॉर्मेंस का विश्लेषण कर रहे हैं. उस डेटा की मदद से, हमने उन थ्रेशोल्ड का फिर से आकलन किया जिनका इस्तेमाल हमने फ़ील्ड की परफ़ॉर्मेंस में वेबसाइट को "धीमा", "सामान्य" या "तेज़" लेबल करने के लिए किया था.

किसी साइट का पूरा आकलन करने के लिए, PageSpeed Insights (PSI) उस साइट के गोल्डन नंबर के तौर पर फ़ील्ड डेटा के कुल डिस्ट्रिब्यूशन के एक तय पर्सेंटाइल का इस्तेमाल करता है. पहले इस्तेमाल किए गए थ्रेशोल्ड, फ़र्स्ट कॉन्टेंटफ़ुल पेंट के लिए 90वां पर्सेंटाइल और फ़र्स्ट इनपुट डिले (एफ़आईडी) के लिए 95वां पर्सेंटाइल थे.

उदाहरण के लिए, अगर किसी साइट का एफ़सीपी डिस्ट्रिब्यूशन 50% तेज़, 30% सामान्य, 20% धीमा है, तो 90वां पर्सेंटाइल एफ़सीपी, धीमे सेक्शन में है. इससे साइट का कुल फ़ील्ड स्कोर धीमा हो जाता है.

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

उदाहरण के लिए, अब अगर किसी साइट का एफ़सीपी डिस्ट्रिब्यूशन 50% तेज़, 30% सामान्य, 20% धीमा है, तो 75वां पर्सेंटाइल एफ़सीपी, मॉडरेट सेक्शन में है. इससे साइट के लिए सामान्य फ़ील्ड स्कोर मिलता है.

PageSpeed Insights में कैननिकल यूआरएल रीडायरेक्ट करता है

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

Search Console की नई स्पीड रिपोर्ट में CrUX

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

वेब कैलेंडर

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

ज़्यादा जानें

'Chrome डेवलपर समिट' के परफ़ॉर्मेंस टूल के अपडेट के बारे में ज़्यादा जानने के लिए, स्पीड टूल के विकास से जुड़ा यह वीडियो देखें: