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

Johannes Henkel
Jasmine Yan
Jasmine Yan
GitHub
Barry Pollard

पब्लिश करने की तारीख: 7 फ़रवरी, 2023, पिछली बार अपडेट करने की तारीख: 11 अप्रैल, 2025

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

ओरिजनल 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 पासकोड का इस्तेमाल किया जा सकता है. collectionPeriodCount से यह तय होता है कि टाइम सीरीज़ की कितनी एंट्री दिखानी हैं. ज़्यादा से ज़्यादा 40 एंट्री दिखाई जा सकती हैं. अगर कोई वैल्यू नहीं दी जाती है, तो डिफ़ॉल्ट रूप से यह 25 होती है.

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", "collectionPeriodCount": 40}'

जवाब का पूरा स्ट्रक्चर एक जैसा ही होता है—लेकिन इसमें ज़्यादा डेटा होता है! अब एक डेटा पॉइंट के बजाय, उन फ़ील्ड के लिए टाइम सीरीज़ मौजूद हैं जिनमें 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% पेज लोड की एलसीपी वैल्यू 2,500 मिलीसेकंड से कम थीं. 5.27% पेज लोड की वैल्यू 2,500 से 4,000 मिलीसेकंड के बीच थीं. साथ ही, 2.85% पेज लोड की वैल्यू 4,000 मिलीसेकंड से ज़्यादा थीं.

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

उदाहरण में सिर्फ़ छह टाइम सीरीज़ एंट्री और कलेक्शन की अवधियों की जानकारी दी गई है. हालांकि, एपीआई के रिस्पॉन्स में डिफ़ॉल्ट रूप से 25 टाइम सीरीज़ एंट्री और ज़्यादा से ज़्यादा 40 टाइम सीरीज़ एंट्री मिलती हैं. ऐसा तब होता है, जब अनुरोध में "collectionPeriodCount": 40 की जानकारी दी गई हो. कलेक्शन की इन सभी अवधियों के खत्म होने की तारीखें शनिवार हैं, जिनके बीच सात दिन का अंतर है. "collectionPeriodCount": 40 के साथ, यह 10 महीने तक चलता है.

किसी भी जवाब में, हिस्टोग्राम के बाइन डेंसिटी और 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 से दिखाया जाएगा. अंतर की वजह यह है कि हिस्टोग्राम डेंसिटी हमेशा संख्याएं होती हैं, जबकि प्रतिशत संख्याएं या स्ट्रिंग हो सकती हैं. सीएलएस, स्ट्रिंग का इस्तेमाल करता है, भले ही वे संख्याओं की तरह दिखें.

डेटा को विज़ुअलाइज़ करना

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

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

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

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

नतीजा

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

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

आभार

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