अपने पेज और साइट की क्वालिटी को बेहतर तरीके से मेज़र और ऑप्टिमाइज़ करने में मदद पाने के लिए, PageSpeed Insights की नई सुविधा के बारे में जानें.
पिछले कुछ सालों में, PageSpeed Insights (पीएसआई) फ़ील्ड और लैब डेटा, दोनों के लिए एक ही जगह पर उपलब्ध हो गया है. यह Chrome UX रिपोर्ट (CrUX) और Lighthouse डायग्नोस्टिक से मिली जानकारी को इंटिग्रेट करता है, ताकि आपकी वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने में मदद करने वाली अहम जानकारी मिल सके.
आज हमें पीएसआई के अपडेट किए गए वर्शन की घोषणा करते हुए खुशी हो रही है! हमारे स्पीड टूलिंग सुइट का यह एक अहम एलिमेंट है. हालांकि, पीएसआई कोड बेस दस साल पुराना था और इसमें कई लेगसी कोड थे. इसे फिर से डिज़ाइन किया जाना चाहिए था. हमने इसका इस्तेमाल पीएसआई में इंटरफ़ेस से जुड़ी समस्याओं को हल करने के लिए किया. इससे कई बार लोगों के लिए रिपोर्ट को नेविगेट करना मुश्किल हो जाता है. हमारे प्राथमिक लक्ष्य थे:
- सिंथेटिक एनवायरमेंट से मिले डेटा और फ़ील्ड में मौजूद उपयोगकर्ताओं से इकट्ठा किए गए डेटा के बीच साफ़ तौर पर अंतर करके, यूज़र इंटरफ़ेस (यूआई) को ज़्यादा आसान बनाएं.
- साफ़ तौर पर बताएं कि यूज़र इंटरफ़ेस (यूआई) में, वेबसाइट की परफ़ॉर्मेंस की जानकारी का आकलन कैसे किया जाता है.
- मटीरियल डिज़ाइन का इस्तेमाल करके, पीएसआई के डिज़ाइन और डिज़ाइन को नया रूप दें.
इस पोस्ट में, पीएसआई में नई सुविधाओं के बारे में बताया गया है जिन्हें इस साल के आखिर में रिलीज़ किया जाएगा.
नया क्या है?
पीएसआई यूज़र इंटरफ़ेस (यूआई) को फिर से डिज़ाइन करने का मकसद, रिपोर्ट के डेटा को बेहतर तरीके से दिखाना है. साथ ही, इसका मकसद रिपोर्ट में उपलब्ध डेटा को साफ़ तौर पर और जानकारी के साथ उपलब्ध कराना है. नए यूज़र इंटरफ़ेस (यूआई) को ज़्यादा आसान बनाया गया है. इससे डेवलपर को अपने पेजों के लिए, लैब और फ़ील्ड की परफ़ॉर्मेंस से जुड़ी अहम जानकारी फटाफट खोजने में मदद मिलती है. यूज़र इंटरफ़ेस (यूआई) के बुनियादी बदलावों में ये शामिल हैं:
फ़ील्ड और लैब डेटा को अलग-अलग करने का तरीका
हमने फ़ील्ड डेटा को लैब डेटा से साफ़ तौर पर अलग करने के लिए, यूज़र इंटरफ़ेस (यूआई) को बदल दिया है. "फ़ील्ड डेटा" और "लैब डेटा" के लेबल टेक्स्ट से बदल दिए गए हैं जो बताता है कि डेटा का क्या मतलब है और यह कैसे मदद कर सकता है. हमने फ़ील्ड डेटा सेक्शन को भी सबसे ऊपर उपलब्ध करा दिया है. लैब-आधारित परफ़ॉर्मेंस के परंपरागत स्कोर को फ़िलहाल सबसे ऊपर दिखाया जा रहा है. इसे लैब डेटा सेक्शन में नीचे ले जाया गया है, ताकि स्कोर के बारे में साफ़ तौर पर जानकारी न मिल सके.
वेबसाइट की परफ़ॉर्मेंस की जानकारी का आकलन
वेबसाइट की परफ़ॉर्मेंस की जानकारी के आकलन का नतीजा, जो पहले फ़ील्ड डेटा में एक शब्द "पास" या "फ़ेल" के तौर पर दिखता था, अब एक अलग आइकॉन के साथ एक अलग सब-सेक्शन के तौर पर दिखता है.
ध्यान दें कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के आकलन की प्रक्रिया में कोई बदलाव नहीं होता है. वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक एफ़आईडी, एलसीपी, और सीएलएस को पेज या ऑरिजिन लेवल पर इकट्ठा किया जा सकता है. तीनों मेट्रिक में ज़रूरी डेटा के साथ एग्रीगेट होने के लिए, अगर सभी मेट्रिक का 75वां पर्सेंटाइल अच्छा है, तो यह एग्रीगेशन, वेबसाइट की परफ़ॉर्मेंस की जानकारी के आकलन में पास हो जाता है. ऐसा न होने पर, एग्रीगेशन टेस्ट को पास नहीं कर पाएगा. अगर एग्रीगेशन में ज़रूरत के मुताबिक एफ़आईडी डेटा नहीं है, तो एलसीपी और सीएलएस, दोनों के 75वें पर्सेंटाइल पर होने वाले आकलन को पास कर लिया जाएगा. अगर एलसीपी या सीएलएस में से ज़रूरत के मुताबिक डेटा नहीं है, तो पेज या ऑरिजिन-लेवल एग्रीगेशन का आकलन नहीं किया जा सकता.
मोबाइल और डेस्कटॉप परफ़ॉर्मेंस के लिए लेबल
हमने सबसे ऊपर मौजूद नेविगेशन मेन्यू को बदल दिया और रिपोर्ट पेज पर मोबाइल और डेस्कटॉप के लिंक शामिल कर दिए. लिंक अब आसानी से दिख रहे हैं और साफ़ तौर पर उस प्लैटफ़ॉर्म के बारे में बताते हैं जिसके लिए डेटा दिखाया जा रहा है. ऐसा करने से, नेविगेशन बार को ज़्यादा साफ़ बनाने में भी मदद मिली.
शुरुआत की जगह के बारे में खास जानकारी
शुरुआत की जगह की खास जानकारी, जिसमें ऑरिजिन के सभी पेजों के लिए एग्रीगेट किया गया CrUX स्कोर दिखाया जाता है. फ़िलहाल, यह एक चेकबॉक्स पर क्लिक करने पर दिखता है. हमने इस रिपोर्ट सेक्शन को 'फ़ील्ड डेटा' सेक्शन में नए टैब, "ऑरिजिन" में ले जाया गया है.
काम की अन्य जानकारी
रिपोर्ट में अब हर फ़ील्ड के नीचे एक नया जानकारी सेक्शन शामिल होगा. साथ ही, लैब कार्ड में सैंपल डेटा के बारे में नीचे दी गई जानकारी होगी:
- डेटा इकट्ठा करने की अवधि
- विज़िट की अवधि
- डिवाइस
- नेटवर्क कनेक्शन
- सैंपल का साइज़
- Chrome के वर्शन
इस जानकारी से लैब और फ़ील्ड डेटा के बीच अंतर बेहतर तरीके से किया जा सकता है. साथ ही, इससे उन उपयोगकर्ताओं को मदद मिलनी चाहिए जिन्हें पहले से पता नहीं था कि दोनों डेटा सोर्स (लैब और फ़ील्ड) के डेटा में क्या अंतर होगा.
व्यू को बड़ा करें
हमारे पास "व्यू बड़ा करें" नाम की एक नई सुविधा है. यह फ़ील्ड डेटा सेक्शन में ड्रिल-डाउन फ़ंक्शन जोड़ती है. इससे, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक की पूरी जानकारी देखी जा सकती है.
पेज चित्र
हमने लोड किए गए पेज की इमेज हटा दी है, जो फ़ील्ड डेटा के ठीक बगल में दिखती है. लोड होने का क्रम दिखाने वाले पेज की इमेज और थंबनेल , दोनों लैब डेटा सेक्शन में उपलब्ध होंगे.
प्रॉडक्ट से जुड़े अप-टू-डेट दस्तावेज़ देखने के लिए, https://developers.google.com/speed/docs/insights/. पर जाएं.
web.dev/measure के लिए अपडेट
परफ़ॉर्मेंस टूलबॉक्स किए गए अलग-अलग टूल में अंतर को कम करने के लिए, हम web.dev/measure को भी अपडेट कर रहे हैं. अब यह PageSpeed Insights API से सीधे तौर पर काम करेगा.
पहले डेवलपर पीएसआई टूल और /मेज़र, दोनों से रिपोर्ट चलाएंगे और उन्हें अलग-अलग लाइटहाउस नंबर दिखेंगे. दोनों में अंतर की एक मुख्य वजह यह थी कि सभी टेस्ट अमेरिका में किए गए थे. ऐसा इसलिए था, क्योंकि पहले 'क्लाउड बैकएंड' अमेरिका में काम करता था.
/measure उसी एपीआई को सीधे पीएसआई यूज़र इंटरफ़ेस (यूआई) के तौर पर कॉल करने से, डेवलपर को पीएसआई और /measure का इस्तेमाल करते समय एक जैसा अनुभव मिलेगा. लोग इस टूल का इस्तेमाल कैसे करते हैं, इसके आधार पर हमने /मेज़रमेंट के लिए कुछ बदलाव भी किए हैं. इसका मतलब है कि /measure के लिए साइन इन करने की सुविधा बंद हो जाएगी. हालांकि, सबसे ज़्यादा इस्तेमाल की जाने वाली कई कैटगरी देखने वाली सुविधा, अब भी इस्तेमाल के लिए उपलब्ध रहेगी.
आज पीएसआई है
एक कदम पीछे, आइए देखते हैं कि मौजूदा PageSpeed Insights रिपोर्ट में क्या-क्या सुविधाएं मिलती हैं. पीएसआई रिपोर्ट में मोबाइल और डेस्कटॉप, दोनों डिवाइसों की परफ़ॉर्मेंस का डेटा अलग-अलग टैब में शामिल होता है. साथ ही, यह सुझाव भी देता है कि किसी पेज को किस तरह बेहतर बनाया जा सकता है. हर मामले में, रिपोर्ट के मुख्य कॉम्पोनेंट एक जैसे होते हैं. इनमें ये चीज़ें शामिल होती हैं:
परफ़ॉर्मेंस स्कोर: परफ़ॉर्मेंस स्कोर, पीएसआई रिपोर्ट में सबसे ऊपर दिखता है. साथ ही, पेज की पूरी परफ़ॉर्मेंस की खास जानकारी भी दिखती है. यह स्कोर Lighthouse चलाकर तय किया जाता है, ताकि पेज के लैब डेटा को इकट्ठा और उसका विश्लेषण किया जा सके. 90 या उससे ज़्यादा का स्कोर अच्छा माना जाता है, 50-90 को सुधार की ज़रूरत होती है, और 50 से कम का स्कोर खराब होता है.
फ़ील्ड डेटा: CrUX रिपोर्ट डेटासेट से लिया गया फ़ील्ड डेटा, जिससे उपयोगकर्ता को असल ज़िंदगी के अनुभव के बारे में इनसाइट मिलती है. इस डेटा में फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) जैसी मेट्रिक शामिल होती हैं. साथ ही, यह वेबसाइट की परफ़ॉर्मेंस की जानकारी (फ़र्स्ट इनपुट डिले (एफ़आईडी), सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी), और कुल लेआउट शिफ़्ट (सीएलएस) को मेज़र करता है. मेट्रिक वैल्यू के साथ-साथ, ऐसे पेजों का डिस्ट्रिब्यूशन भी देखा जा सकता है जिन पर किसी मेट्रिक की वैल्यू अच्छी, सुधार की ज़रूरत है या खराब है. उन्हें हरे, ऐंबर, और लाल बार से दिखाया गया हो. CrUX डेटासेट में, उपयोगकर्ताओं के लिए पेज लोड के आधार पर डिस्ट्रिब्यूशन और स्कोर दिखाए जाते हैं. स्कोर का हिसाब पिछले 28 दिनों के आधार पर किया जाता है. यह स्कोर ऐसे नए पेजों के लिए उपलब्ध नहीं होता है जिन पर शायद उपयोगकर्ता का काफ़ी डेटा उपलब्ध न हो.
शुरुआत की जगह की खास जानकारी: उपयोगकर्ता, शुरुआत की जगह की खास जानकारी दिखाएं चेकबॉक्स पर क्लिक करके, पिछले 28 दिनों में एक ही ऑरिजिन से दिखाए गए सभी पेजों के लिए, मेट्रिक का कुल स्कोर देख सकते हैं.
लैब का डेटा: लैब का परफ़ॉर्मेंस स्कोर, लाइटहाउस का इस्तेमाल करके कैलकुलेट किया जाता है. यह परफ़ॉर्मेंस की समस्याओं को डीबग करने में मदद करता है, क्योंकि इसे एक कंट्रोल एनवायरमेंट में इकट्ठा किया जाता है. इस रिपोर्ट में, फ़र्स्ट कॉन्टेंटफ़ुल पेंट, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय, स्पीड इंडेक्स, कुल लेआउट शिफ़्ट, टाइम टू इंटरैक्टिव, और टोटल ब्लॉकिंग टाइम जैसी मेट्रिक का इस्तेमाल करके परफ़ॉर्मेंस को दिखाया जाता है. हर मेट्रिक को स्कोर किया जाता है और उस पर एक आइकॉन के साथ लेबल किया जाता है. यह आइकॉन, 'अच्छा', 'सुधार की ज़रूरत है' या 'खराब' दिखाने वाला आइकॉन होता है. यह सेक्शन रिलीज़ से पहले, परफ़ॉर्मेंस में आने वाली रुकावटों का अच्छा संकेत देता है. साथ ही, समस्याओं की पहचान करने में मदद कर सकता है, लेकिन हो सकता है कि असल दुनिया की समस्याओं को शामिल न कर पाए.
ऑडिट: इस सेक्शन में, Lighthouse की मदद से चलाए जाने वाले सभी ऑडिट की सूची होती है. इसमें, पास किए गए ऑडिट की जानकारी होती है. साथ ही, इसमें सुधार के अवसर और गड़बड़ी की अन्य जानकारी भी होती है.
मौजूदा पीएसआई डिज़ाइन में आने वाली चुनौतियां
जैसा कि ऊपर दिए गए स्क्रीनशॉट में दिखाया गया है, लैब और फ़ील्ड डेटा के अलग-अलग डेटा पॉइंट साफ़ तौर पर अलग नहीं किए गए हैं. साथ ही, जो डेवलपर पीएसआई के लिए नए हैं, हो सकता है कि उन्हें आसानी से डेटा का कॉन्टेक्स्ट और आगे क्या करना चाहिए, समझ में न आए. इस भ्रम की वजह से पीएसआई रिपोर्ट को समझने के बारे में कई "कैसे करें" ब्लॉग पोस्ट डाली गईं.
नए डिज़ाइन की मदद से, हम डेवलपर के लिए रिपोर्ट को समझने में आसानी की कोशिश कर रहे हैं. इससे वे पीएसआई रिपोर्ट जनरेट करने के बजाय, उसमें शामिल इनसाइट पर कार्रवाई कर पाएंगे.
ज़्यादा जानें
परफ़ॉर्मेंस टूल के अपडेट के बारे में ज़्यादा जानकारी के लिए, Chrome डेव समिट 2021 की अहम बातें देखें. हम आपको पीएसआई के रिलीज़ होने की तारीख और web.dev/measure में होने वाले बदलाव की जानकारी देंगे.
इस लेख के बारे में सुझाव देने के लिए, मिलिका मिहाजलिया, फ़िलिप वॉल्टन, ब्रेंडन केनी, और ईवा गैसपेरोविच का धन्यवाद