CrUX इतिहास एपीआई को इस्तेमाल करने का तरीका

Johannes Henkel
Jasmine Yan
Jasmine Yan
GitHub
Barry Pollard

इस गाइड में Chrome UX Report (CrUX) हिस्ट्री एपीआई एंडपॉइंट के बारे में जानकारी दी गई है, जो वेब परफ़ॉर्मेंस के डेटा की टाइम सीरीज़ उपलब्ध कराती है. यह डेटा हर हफ़्ते अपडेट होता है. इससे आपको करीब छह महीनों का इतिहास देखने में मदद मिलती है. इसमें एक हफ़्ते में 25 डेटा पॉइंट अलग-अलग हो जाते हैं.

ओरिजनल CrUX API एंडपॉइंट से रोज़ होने वाले अपडेट के साथ इस्तेमाल करने पर, अब आप सबसे हाल का डेटा और पहले हुए डेटा, दोनों को तुरंत देख सकते हैं. इस तरह, समय के साथ वेब पेज में होने वाले बदलावों को देखने का यह एक बेहतरीन टूल बन जाता है.

रोज़ के CrUX एपीआई पर क्वेरी करें

CrUX एपीआई पर पिछले लेख से रीकैप करने के लिए, इस तरह से किसी खास ऑरिजिन के लिए फ़ील्ड डेटा का स्नैपशॉट पाएं:

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 }
    }
  }
}

इस स्नैपशॉट में, 28 दिनों की खास अवधि के लिए हिस्टोग्राम डेंसिटी की वैल्यू और पर्सेंटाइल वैल्यू शामिल हैं. इस मामले में 27 दिसंबर, 2022 से लेकर 23 जनवरी, 2023 तक की वैल्यू शामिल हैं.

CrUX इतिहास एपीआई पर क्वेरी करें

इतिहास के एंडपॉइंट को कॉल करने के लिए, यूआरएल में मौजूद queryRecord को curl कमांड में 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%, और 40.0 मि॰से॰ 2500 मि॰से॰ से ज़्यादा थी.

इसी तरह, p75 वैल्यू के लिए टाइम सीरीज़ एक है: 14 अगस्त, 2022 से 10 सितंबर, 2022 तक का एलसीपी p75 1377 था. इसका मतलब यह है कि इकट्ठा करने की इस अवधि में, 75% उपयोगकर्ता अनुभवों का एलसीपी 1377 मि॰से॰ से कम था. वहीं, 25% उपयोगकर्ताओं का एलसीपी 1377 मि॰से॰ से ज़्यादा था.

इस उदाहरण में सिर्फ़ छह टाइम सीरीज़ एंट्री और कलेक्शन की अवधि दी गई है, जबकि एपीआई से मिलने वाले जवाबों में 25 टाइम सीरीज़ एंट्री दी गई हैं. इनमें से हर संग्रह की अवधि के खत्म होने की तारीख शनिवार की है, जिसमें सात दिन का अंतर है, इसलिए इसमें छह महीने हैं.

किसी भी दिए गए जवाब में, हिस्टोग्राम बिन डेंसिटी और p75 वैल्यू की टाइम सीरीज़ की लंबाई, collectionPeriods फ़ील्ड में अरे की लंबाई के जैसी ही होगी: इन अरे में, इंडेक्स के आधार पर वन-टू-वन कम्यूनिकेशन का इस्तेमाल किया जाता है.

क्वेरी पेज लेवल का डेटा

CrUX इतिहास एपीआई, ऑरिजिन लेवल के डेटा के साथ-साथ पुराने पेज लेवल के डेटा को ऐक्सेस करने की अनुमति देता है. ऑरिजिन-लेवल का डेटा पहले 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 के लिए इंटरैक्शन टू नेक्स्ट पेंट (INP) के p75 वैल्यू का ग्राफ़ दिया गया है:

नवंबर 2022 के आस-पास का रिग्रेशन दिखाने वाली p75 वैल्यू का टाइम सीरीज़ ग्राफ़

इस लाइन चार्ट में, y-ऐक्सिस पर मौजूद हर वैल्यू, p75s टाइम सीरीज़ की p75 वैल्यू है. साथ ही, x-ऐक्सिस समय है, जिसे कलेक्शन की हर अवधि के लिए lastDate के तौर पर सेट किया जाता है.

यहां हिस्टोग्राम बिन टाइम सीरीज़ का ग्राफ़ दिया गया है. इसे ट्रि-बिन चार्ट कहा जाता है, क्योंकि इन हिस्टोग्राम में तीन बिन होते हैं.

स्टैक किया गया बार चार्ट यह दिखाता है कि अच्छे के सापेक्ष अनुपात में, समय के साथ किस तरह सुधार की ज़रूरत है और किस तरह खराब बदलाव हुए हैं.

कलेक्शन की हर अवधि के लिए, x-ऐक्सिस को lastDate के तौर पर सेट अप किया जाता है. हालांकि, इस बार y-ऐक्सिस, आईएनपी मेट्रिक के लिए किसी तय सीमा में आने वाले पेज लोड का प्रतिशत है, जिसे स्टैक किए गए बार चार्ट के ज़रिए दिखाया जाता है. p75 चार्ट से खास जानकारी मिलती है. एक ही चार्ट में, कई मेट्रिक जोड़ना या PHONE और DESKTOP, दोनों के लिए लाइनें दिखाना आसान होता है. ट्राई-बिन चार्ट, हर कलेक्शन की अवधि के दौरान मेज़र की गई मेट्रिक वैल्यू के डिस्ट्रिब्यूशन को दिखाता है.

उदाहरण के लिए, भले ही p75 चार्ट से यह पता चलता हो कि निगरानी की अवधि के दौरान, https://web.dev में करीब-करीब स्वीकार करने लायक आईएनपी वैल्यू थीं, लेकिन ट्राई-बिन चार्ट से पता चलता है कि पेज लोड के एक छोटे से हिस्से के लिए, आईएनपी असल में खराब था. दोनों चार्ट में, यह अनुमान लगाना आसान है कि परफ़ॉर्मेंस रिग्रेशन थी, जो अक्टूबर के आखिर में शुरू हुई और नवंबर के बीच में ठीक कर दी गई.

इस तरह के चार्ट खुद जनरेट करने के लिए, हमने Colab का एक उदाहरण बनाया है. Colab या 'Colaboratory' की मदद से, ब्राउज़र में ही Python का इस्तेमाल किया जा सकता है और लिखा जा सकता है. CrUX History API Colab (सोर्स) एपीआई को कॉल करने और डेटा को चार्ट करने के लिए, Python का इस्तेमाल करता है.

इस Colab से आपको p75 चार्ट और ट्राइ-बिन चार्ट बनाने की सुविधा मिलती है. साथ ही, टेबल के रूप में डेटा पाने और CrUX API के लिए अनुरोध और रिस्पॉन्स पेयर देखने की सुविधा भी मिलती है. इसके लिए, आपको एक छोटा फ़ॉर्म भरना होगा. इसका इस्तेमाल करने के लिए ज़रूरी नहीं है कि आप प्रोग्रामर हों. हालांकि, Python कोड देखकर इसे बेहतर बनाया जा सकता है! कृपया इस कॉन्टेंट का आनंद लें और आपको जो भी कॉन्टेंट मिला है उसके बारे में बेझिझक हमें बताएं!

बेशक, आप Colab या Python के लिए सीमित नहीं हैं. यह सिर्फ़ एक उदाहरण है, जिसमें बताया गया है कि इस नए एपीआई का इस्तेमाल कैसे किया जा सकता है. JSON पर आधारित, एचटीटीपी एंडपॉइंट के तौर पर, एपीआई को किसी भी टेक्नोलॉजी से क्वेरी किया जा सकता है.

नतीजा

CrUX History API एंडपॉइंट के लॉन्च होने से पहले, साइट के मालिकों के पास CrUX से मिलने वाली पुरानी जानकारी को सीमित करने की सुविधा थी. BigQuery और CrUX डैशबोर्ड का इस्तेमाल करके, महीने के ऑरिजिन-लेवल का डेटा उपलब्ध था. हालांकि, हर हफ़्ते का डेटा उपलब्ध नहीं था और न ही पेज-लेवल का पुराना डेटा उपलब्ध था. साइट के मालिक, रोज़ के एपीआई का इस्तेमाल करके खुद इस डेटा को रिकॉर्ड कर सकते थे, लेकिन अक्सर इसकी ज़रूरत तब ही पता चलती है, जब मेट्रिक में रिग्रेशन होता है.

CrUX इतिहास एपीआई को लॉन्च करने से हमें उम्मीद है कि यह साइट के मालिकों को अपनी साइट की मेट्रिक को बेहतर तरीके से समझने में मदद करेगा. साथ ही, साइट के मालिकों को यह सुविधा मिलेगी कि वे समस्याओं के बारे में पता लगाने के लिए टूल के तौर पर काम कर सकें. अगर एपीआई के नए वर्शन का इस्तेमाल किया जा रहा है, तो हमें Chrome UX रिपोर्ट (चर्चा) वाले Google ग्रुप में सुझाव या राय मिलेगी.

स्वीकार हैं

Unsplash पर डेव हेरिंग की हीरो इमेज