इस गाइड में, Chrome UX रिपोर्ट (CrUX) के इतिहास से जुड़ा एपीआई एंडपॉइंट के बारे में बताया गया है. यह एंडपॉइंट, वेब की परफ़ॉर्मेंस के डेटा की टाइम सीरीज़ उपलब्ध कराता है. यह डेटा हर हफ़्ते अपडेट होता है. इससे आपको पिछले छह महीनों का डेटा देखने में मदद मिलती है. इसमें हर हफ़्ते के हिसाब से 25 डेटा पॉइंट होते हैं.
ओरिजनल CrUX API एंडपॉइंट से मिलने वाले रोज़ के अपडेट के साथ इस्तेमाल करने पर, अब आपको सबसे हाल का डेटा और पहले क्या हुआ था, दोनों तुरंत दिख सकते हैं. इससे, समय के साथ वेब पेज में हुए बदलावों को देखने के लिए, यह एक बेहतरीन टूल बन जाता है.
इस पेज पर एपीआई आज़माएं
हर दिन के CrUX API से क्वेरी करना
CrUX API के बारे में पिछले लेख में बताई गई बातों को दोहराते हुए, किसी खास ऑरिजिन के लिए फ़ील्ड डेटा का स्नैपशॉट इस तरह पाया जा सकता है:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" --header 'Content-Type: application/json' --data '{"origin": "https://web.dev"}'
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogram": [{
"start": 0, "end": 2500, "density": 0.9192
}, {
"start": 2500, "end": 4000, "density": 0.0513
}, {
"start": 4000, "density": 0.0294
}],
"percentiles": {
"p75": 1303
}
}
// ...
},
"collectionPeriod": {
"firstDate": { "year": 2022, "month": 12, "day": 27 },
"lastDate": { "year": 2023, "month": 1, "day": 23 }
}
}
}
इस स्नैपशॉट में, डेटा इकट्ठा करने की किसी खास अवधि के लिए, हिस्टोग्राम डेंसिटी वैल्यू और पर्सेंटाइल वैल्यू शामिल होती हैं. इस मामले में, 27 दिसंबर, 2022 से 23 जनवरी, 2023 तक की अवधि.
CrUX History API से क्वेरी करना
इतिहास एंडपॉइंट को कॉल करने के लिए, curl कमांड में यूआरएल में मौजूद queryRecord को queryHistoryRecord में बदलें. पिछले कॉल के लिए इस्तेमाल की गई CrUX API पासकोड का इस्तेमाल किया जा सकता है.
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"origin": "https://web.dev"}'
जवाब का पूरा स्ट्रक्चर एक जैसा ही होता है—लेकिन इसमें ज़्यादा डेटा होता है! अब एक डेटा पॉइंट के बजाय, उन फ़ील्ड के लिए टाइम सीरीज़ मौजूद हैं जिनमें 75वां पर्सेंटाइल (p75) और हिस्टोग्राम डेंसिटी वैल्यू शामिल हैं.
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogramTimeseries": [{
"start": 0, "end": 2500, "densities": [
0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187
]
}, {
"start": 2500, "end": 4000, "densities": [
0.0521, 0.0513, 0.0518, 0.0518, 0.0526, 0.0527
]
}, {
"start": 4000, "densities": [
0.0288, 0.0282, 0.0286, 0.0285, 0.0290, 0.0285
]
}
],
"percentilesTimeseries": {
"p75s": [
1362, 1352, 1344, 1356, 1366, 1377
]
}
}
// ...
},
"collectionPeriods": [{
"firstDate": { "year": 2022, "month": 7, "day": 10 },
"lastDate": { "year": 2022, "month": 8, "day": 6 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 17 },
"lastDate": { "year": 2022, "month": 8, "day": 13 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 24 },
"lastDate": { "year": 2022, "month": 8, "day": 20 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 31 },
"lastDate": { "year": 2022, "month": 8, "day": 27 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 7 },
"lastDate": { "year": 2022, "month": 9, "day": 3 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 14 },
"lastDate": { "year": 2022, "month": 9, "day": 10 }
}
]
}
}
इस उदाहरण में, सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) मेट्रिक की 0 से 2500 मिलीसेकंड की बकेट के लिए densities टाइम सीरीज़ [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187]. है. इनमें से हर डेंसिटी को उससे जुड़ी collectionPeriods एंट्री के दौरान देखा गया था. उदाहरण के लिए, पांचवां डेंसिटी, 0.9183, डेटा इकट्ठा करने की पांचवीं अवधि के लिए था, जो 3 सितंबर, 2022 को खत्म हुई थी. इसके बाद के हफ़्ते में खत्म होने वाली अवधि के लिए डेंसिटी 0.9187 थी.
दूसरे शब्दों में, https://web.dev के उदाहरण में टाइम सीरीज़ की पिछली एंट्री का विश्लेषण करने पर पता चला कि 14 अगस्त, 2022 से 10 सितंबर, 2022 तक, 91.87% पेज लोड की एलसीपी वैल्यू 2500 मिलीसेकंड से कम थीं. 5.27% पेज लोड की वैल्यू 2500 से 4000 मिलीसेकंड के बीच थीं, जबकि 2.85% पेज लोड की वैल्यू 4000 मिलीसेकंड से ज़्यादा थीं.
इसी तरह, p75 वैल्यू के लिए एक टाइम सीरीज़ भी होती है: 14 अगस्त, 2022 से 10 सितंबर, 2022 तक LCP p75 1377 था. इसका मतलब है कि डेटा इकट्ठा करने की इस अवधि के दौरान, 75% उपयोगकर्ता अनुभवों का एलसीपी 1377 मिलीसेकंड से कम था और 25% उपयोगकर्ता अनुभवों का एलसीपी 1377 मिलीसेकंड से ज़्यादा था.
उदाहरण में सिर्फ़ छह टाइम सीरीज़ एंट्री और कलेक्शन पीरियड की जानकारी दी गई है. हालांकि, एपीआई के रिस्पॉन्स में 25 टाइम सीरीज़ एंट्री दी गई हैं. इनमें से हर कलेक्शन पीरियड की आखिरी तारीख शनिवार है और इनके बीच सात दिन का अंतर है. इसलिए, इनमें छह महीने का डेटा शामिल है.
किसी भी रिस्पॉन्स में, हिस्टोग्राम के बाइन डेंसिटी और p75 वैल्यू के लिए टाइम सीरीज़ की लंबाई, collectionPeriods फ़ील्ड में ऐरे की लंबाई के बराबर होगी: इन ऐरे में इंडेक्स के आधार पर, एक-एक का मिलान होता है.
पेज के लेवल का डेटा क्वेरी करना
CrUX History API, ऑरिजिन-लेवल के डेटा के साथ-साथ, पेज-लेवल के पुराने डेटा को ऐक्सेस करने की अनुमति देता है. पहले, BigQuery पर CrUX डेटासेट या CrUX डैशबोर्ड का इस्तेमाल करके, ऑरिजिन-लेवल का डेटा उपलब्ध था. हालांकि, पेज-लेवल का पुराना डेटा सिर्फ़ तब उपलब्ध होता था, जब साइटें डेटा को खुद इकट्ठा और सेव करती थीं. नया एपीआई, अब पेज-लेवल का पुराना डेटा ऐक्सेस कर सकता है.
पेज-लेवल के डेटा को उसी तरह से क्वेरी किया जा सकता है. हालांकि, इसके लिए पेलोड में origin के बजाय url का इस्तेमाल करें:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"url": "https://web.dev/blog/"}'
पेज-लेवल (और ऑरिजिन-लेवल) का पुराना डेटा, CrUX के बाकी डेटा की तरह ही ज़रूरी शर्तों के हिसाब से होता है. इसलिए, हो सकता है कि पेजों का पूरा पुराना रिकॉर्ड न हो. ऐसे मामलों में, histogramTimeseries डेंसिटी के लिए "मौजूद नहीं" डेटा को "NaN" और percentilesTimeseries के लिए null से दिखाया जाएगा. अंतर की वजह यह है कि हिस्टोग्राम डेंसिटी हमेशा संख्याएं होती हैं, जबकि प्रतिशत संख्याएं या स्ट्रिंग हो सकती हैं. सीएलएस, स्ट्रिंग का इस्तेमाल करता है, भले ही वे संख्याओं की तरह दिखें.
डेटा को विज़ुअलाइज़ करना
इसलिए, आपके मन में यह सवाल उठ सकता है कि डेटा को इस तरह से क्यों दिखाया गया है? इससे ग्राफ़ प्लॉट करना आसान हो जाता है. उदाहरण के लिए, यहां https://web.dev के लिए, पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) की p75 वैल्यू का ग्राफ़ दिया गया है:
इस लाइन चार्ट में, y-ऐक्सिस पर मौजूद हर वैल्यू, p75s टाइम सीरीज़ की 75% वैल्यू होती है. साथ ही, x-ऐक्सिस समय होता है, जिसे हर कलेक्शन पीरियड के लिए lastDate के तौर पर सेट अप किया जाता है.
यहां हिस्टोग्राम बाइन टाइम सीरीज़ का ग्राफ़ दिया गया है. इसे ट्राइ-बाइन चार्ट कहा जाता है, क्योंकि इन हिस्टोग्राम में तीन बाइन होते हैं.
हर कलेक्शन की अवधि के लिए, x-ऐक्सिस को lastDate के तौर पर सेट अप किया जाता है. हालांकि, इस बार Y-ऐक्सिस, INP मेट्रिक के लिए किसी खास रेंज में आने वाले पेज लोड का प्रतिशत है. इसे स्टैक किए गए बार चार्ट के ज़रिए दिखाया गया है. p75 चार्ट से, खास जानकारी तुरंत मिल जाती है. साथ ही, एक ही चार्ट में कई मेट्रिक जोड़ना या PHONE और DESKTOP, दोनों के लिए लाइनें दिखाना आसान होता है. ट्राई-बिन चार्ट से, हर कलेक्शन अवधि के दौरान मेज़र की गई मेट्रिक वैल्यू के डिस्ट्रिब्यूशन के बारे में पता चलता है.
उदाहरण के लिए, p75 चार्ट से पता चलता है कि निगरानी की अवधि के दौरान, https://web.dev की INP वैल्यू स्वीकार की जा सकने लायक थीं. हालांकि, ट्राइ-बिन चार्ट से पता चलता है कि पेज लोड के एक छोटे से हिस्से के लिए, INP की असल वैल्यू खराब थी. दोनों चार्ट में, यह अनुमान लगाना काफ़ी आसान है कि परफ़ॉर्मेंस में गिरावट अक्टूबर के आखिर में शुरू हुई थी और इसे नवंबर के बीच तक ठीक कर दिया गया था.
ऐसे चार्ट खुद जनरेट करने के लिए, हमने एक Colab का उदाहरण बनाया है. Colab या 'Colaboratory' की मदद से, अपने ब्राउज़र में Python कोड लिखा और चलाया जा सकता है. CrUX History API Colab (सोर्स), एपीआई को कॉल करने और डेटा को चार्ट में दिखाने के लिए Python का इस्तेमाल करता है.
इस Colab की मदद से, p75 चार्ट, ट्राइ-बिन चार्ट बनाए जा सकते हैं. साथ ही, टेबल के तौर पर डेटा भी पाया जा सकता है. इसके अलावा, एक छोटा फ़ॉर्म भरकर, CrUX API के लिए अनुरोध और रिस्पॉन्स पेयर देखा जा सकता है. इसका इस्तेमाल करने के लिए, आपको प्रोग्रामर होने की ज़रूरत नहीं है. हालांकि, Python कोड को देखकर, उसमें बदलाव करके उसे बेहतर बनाया जा सकता है! कृपया इसका आनंद लें और जो भी आपको मिलता है उसके बारे में बेझिझक सुझाव, राय या शिकायत दें!
बेशक, आपके पास Colab या Python के अलावा और भी विकल्प हैं. यह इस नए एपीआई को इस्तेमाल करने का सिर्फ़ एक उदाहरण है. JSON-आधारित एचटीटीपी एंडपॉइंट के तौर पर, एपीआई को किसी भी टेक्नोलॉजी से क्वेरी किया जा सकता है.
नतीजा
CrUX History API एंडपॉइंट के आने से पहले, साइट के मालिकों को CrUX से पुरानी जानकारी पाने की सुविधा सीमित थी. BigQuery और CrUX डैशबोर्ड का इस्तेमाल करके, हर महीने के ऑरिजिन-लेवल का डेटा उपलब्ध था. हालांकि, हर हफ़्ते का डेटा और पेज-लेवल का पुराना डेटा उपलब्ध नहीं था. साइट के मालिक, रोज़ के एपीआई का इस्तेमाल करके, यह डेटा खुद रिकॉर्ड कर सकते थे. हालांकि, अक्सर मेट्रिक में गिरावट आने के बाद ही इसकी ज़रूरत का पता चलता था.
हमें उम्मीद है कि CrUX History API के आने से, साइट के मालिकों को अपनी साइट की बदलती मेट्रिक को बेहतर तरीके से समझने में मदद मिलेगी. साथ ही, समस्याएं आने पर, इसका इस्तेमाल गड़बड़ी का पता लगाने वाले टूल के तौर पर किया जा सकेगा. अगर नए एपीआई का इस्तेमाल किया जा रहा है, तो Chrome UX Report (Discussions) Google ग्रुप पर सुझाव, शिकायत या राय दें.
आभार
Unsplash पर डेव हेरिंग की हीरो इमेज