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 से 4000 मिलीसेकंड के बीच थीं. साथ ही, 2.85% पेज लोड की एलसीपी वैल्यू 4000 मिलीसेकंड से ज़्यादा थीं.

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

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

ध्यान दें: हर दिन के एपीआई से अलग, CrUX History API, हफ़्ते में सिर्फ़ एक बार सोमवार को अपडेट किया जाता है. इसमें पिछले शनिवार तक का डेटा भी शामिल है. हालांकि, हर दिन के डेटा को इकट्ठा करने वाले एपीआई की तरह, CrUX के इतिहास से जुड़े एपीआई में मौजूद हर वैल्यू को पिछले 28 दिनों के डेटा के आधार पर मेज़र किया जाता है. इसका मतलब है कि इतिहास एपीआई में वही डेटा होना चाहिए जो किसी खास तारीख को हर दिन के एपीआई का इस्तेमाल करके उपलब्ध हुआ था. अब यह पिछले एपीआई के ज़रिए क्वेरी करने के लिए उपलब्ध है. हालांकि, इसका मतलब है कि History API में ओवरलैप होने वाली अवधियों का डेटा शामिल होता है. हालांकि, रुझान के विश्लेषण के तौर पर, यह समय के साथ मेट्रिक में हुए बदलाव को ट्रैक करने के लिए मददगार होता है.

किसी भी रिस्पॉन्स में, हिस्टोग्राम के बाइन डेंसिटी और 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-ऐक्सिस, INP मेट्रिक के लिए किसी खास रेंज में आने वाले पेज लोड का प्रतिशत है. इसे स्टैक किए गए बार चार्ट के ज़रिए दिखाया गया है. 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 Report (Discussions) Google ग्रुप पर सुझाव, शिकायत या राय दें.

धन्यवाद

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