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

Johannes Henkel

Jasmine Yan

Barry Pollard

इस गाइड में 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 इतिहास एपीआई के बारे में क्वेरी करें

इतिहास के एंडपॉइंट को कॉल करने के लिए, 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 मि॰से॰ से 400.8% के बीच थी.

इसी तरह, p75 वैल्यू के लिए एक टाइम सीरीज़ भी है: 14 अगस्त, 2022 तक 10 सितंबर, 2022 तक एलसीपी 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 टाइम सीरीज़ से ली गई p75 वैल्यू है और x-ऐक्सिस वह समय है जिसे कलेक्शन की हर अवधि के लिए, lastDate के तौर पर सेट अप किया गया है.

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

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

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

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

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

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

नतीजा

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

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

स्वीकार की गई

Unस्प्लैश पर डेव हेरिंग की हीरो इमेज