CrUX API इस्तेमाल करने का तरीका

लाखों वेबसाइटों पर, असली उपयोगकर्ताओं के अनुभव से जुड़ा डेटा ऐक्सेस करने के लिए, Chrome UX Report API का इस्तेमाल करने का तरीका जानें.

Rick Viscomi
Shane Exterkamp
Shane Exterkamp
X GitHub

Chrome UX Report (CrUX) डेटासेट से पता चलता है कि असल दुनिया में Chrome का इस्तेमाल करने वाले उपयोगकर्ताओं को वेब पर मौजूद लोकप्रिय साइटों पर कैसा अनुभव मिल रहा है. साल 2017 में, जब क्वेरी किए जा सकने वाले डेटासेट को पहली बार BigQuery पर रिलीज़ किया गया था, तब से CrUX के फ़ील्ड डेटा को डेवलपर टूल में इंटिग्रेट किया गया है. जैसे, PageSpeed Insights और Search Console की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली रिपोर्ट. इससे डेवलपर, असली उपयोगकर्ताओं के अनुभव को मेज़र और मॉनिटर कर पाते हैं. इस दौरान, CrUX डेटा को प्रोग्राम के हिसाब से मुफ़्त और RESTful तरीके से ऐक्सेस करने वाला टूल उपलब्ध नहीं था. इस अंतर को कम करने के लिए, हमें यह बताते हुए खुशी हो रही है कि हमने नया Chrome UX Report API लॉन्च किया है!

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

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

तो चलिए, इस बारे में जानते हैं कि इसका इस्तेमाल कैसे किया जाता है!

इस पेज पर मौजूद एपीआई को आज़माएं

इसे आज़माएं!

क्वेरी के ओरिजन का डेटा

CrUX डेटासेट में मौजूद ऑरिजिन में, पेज लेवल के सभी अनुभव शामिल होते हैं. यहां दिए गए उदाहरण में, कमांड लाइन पर curl का इस्तेमाल करके, किसी ऑरिजिन के उपयोगकर्ता अनुभव के डेटा के लिए 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"}'

curl कमांड में तीन हिस्से होते हैं:

  1. एपीआई का यूआरएल एंडपॉइंट. इसमें कॉल करने वाले की निजी एपीआई पासकोड भी शामिल है.
  2. Content-Type: application/json हेडर, जिससे पता चलता है कि अनुरोध के मुख्य भाग में JSON शामिल है.
  3. JSON कोड में बदला गया अनुरोध का मुख्य हिस्सा, जिसमें https://web.dev ऑरिजिन की जानकारी दी गई है.

JavaScript में इसी काम को करने के लिए, CrUXApiUtil यूटिलिटी का इस्तेमाल करें. यह एपीआई कॉल करती है और डिकोड किया गया रिस्पॉन्स दिखाती है. ज़्यादा सुविधाओं के लिए, हमारे Github वैरिएंट को भी देखें. इनमें इतिहास और बैच सपोर्ट शामिल है.

const CrUXApiUtil = {};
// Get your CrUX API key at https://goo.gle/crux-api-key.
CrUXApiUtil.API_KEY = '[YOUR_API_KEY]';
CrUXApiUtil.API_ENDPOINT = `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${CrUXApiUtil.API_KEY}`;
CrUXApiUtil.query = function (requestBody) {
  if (CrUXApiUtil.API_KEY == '[YOUR_API_KEY]') {
    throw 'Replace "YOUR_API_KEY" with your private CrUX API key. Get a key at https://goo.gle/crux-api-key.';
  }
  return fetch(CrUXApiUtil.API_ENDPOINT, {
    method: 'POST',
    body: JSON.stringify(requestBody)
  }).then(response => response.json()).then(response => {
    if (response.error) {
      return Promise.reject(response);
    }
    return response;
  });
};

[YOUR_API_KEY] की जगह अपनी कुंजी डालें. इसके बाद, CrUXApiUtil.query फ़ंक्शन को कॉल करें और अनुरोध का मुख्य हिस्सा ऑब्जेक्ट पास करें.

CrUXApiUtil.query({
  origin: 'https://web.dev'
}).then(response => {
  console.log(response);
}).catch(response => {
  console.error(response);
});

अगर इस ऑरिजिन के लिए डेटा मौजूद है, तो एपीआई से मिला जवाब, JSON-कोड में बदला गया ऑब्जेक्ट होता है. इसमें metrics शामिल होती हैं, जो उपयोगकर्ता अनुभव के डिस्ट्रिब्यूशन को दिखाती हैं. डिस्ट्रिब्यूशन मेट्रिक, हिस्टोग्राम बिन और पर्सेंटाइल होती हैं.

{
  "record": {
    "key": {
      "origin": "https://web.dev"
    },
    "metrics": {
      "largest_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 2500,
            "density": 0.7925068547983514
          },
          {
            "start": 2500,
            "end": 4000,
            "density": 0.1317422195536863
          },
          {
            "start": 4000,
            "density": 0.07575092564795324
          }
        ],
        "percentiles": {
          "p75": 2216
        }
      },
      // ...
    }
  }
}

histogram ऑब्जेक्ट की start और end प्रॉपर्टी, दी गई मेट्रिक के लिए उपयोगकर्ताओं को मिलने वाली वैल्यू की रेंज दिखाती हैं. density प्रॉपर्टी से, उस रेंज में उपयोगकर्ता अनुभव के अनुपात के बारे में पता चलता है. इस उदाहरण में, web.dev के सभी पेजों पर एलसीपी के 79% उपयोगकर्ता अनुभव 2,500 मिलीसेकंड से कम हैं. यह एलसीपी के लिए "अच्छी" थ्रेशोल्ड है. percentiles.p75 वैल्यू का मतलब है कि इस डिस्ट्रिब्यूशन में 75% उपयोगकर्ता अनुभव, 2,216 मिलीसेकंड से कम हैं. जवाब के मुख्य हिस्से के दस्तावेज़ में, जवाब के स्ट्रक्चर के बारे में ज़्यादा जानें.

गड़बड़ियां

जब CrUX API के पास किसी ऑरिजिन के लिए कोई डेटा नहीं होता है, तो वह JSON-कोड में बदला गया गड़बड़ी का मैसेज दिखाता है:

{
  "error": {
    "code": 404,
    "message": "chrome ux report data not found",
    "status": "NOT_FOUND"
  }
}

इस गड़बड़ी को ठीक करने के लिए, पहले यह देखें कि अनुरोध किया गया ऑरिजिन सार्वजनिक तौर पर नेविगेट किया जा सकता है या नहीं. इसकी जांच करने के लिए, अपने ब्राउज़र के पता बार में ऑरिजिन डालें. इसके बाद, किसी भी रीडायरेक्ट के बाद फ़ाइनल यूआरएल से इसकी तुलना करें. आम तौर पर, सबडोमेन को बिना वजह जोड़ने या हटाने और गलत एचटीटीपी प्रोटोकॉल का इस्तेमाल करने से समस्याएं होती हैं.

गड़बड़ी
{"origin": "http://www.web.dev"}

इस ऑरिजिन में http:// प्रोटोकॉल और www. सबडोमेन को गलत तरीके से शामिल किया गया है.

पुष्टि हो गई
{"origin": "https://web.dev"}

इस ऑरिजिन पर सार्वजनिक तौर पर नेविगेट किया जा सकता है.

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

यूआरएल के पैरामीटर का डेटा क्वेरी करना

आपने देखा कि किसी ऑरिजिन पर उपयोगकर्ता अनुभव के बारे में जानने के लिए, CrUX API से क्वेरी कैसे की जाती है. नतीजों को किसी खास पेज तक सीमित करने के लिए, url अनुरोध पैरामीटर का इस्तेमाल करें.

API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{"url": "https://web.dev/fast/"}'

यह कर्ल कमांड, ऑरिजिन के उदाहरण जैसी ही है. हालांकि, अनुरोध के मुख्य हिस्से में url पैरामीटर का इस्तेमाल किया जाता है, ताकि उस पेज के बारे में बताया जा सके जिसे खोजना है.

JavaScript में CrUX API से यूआरएल डेटा के लिए क्वेरी करने के लिए, अनुरोध के मुख्य हिस्से में url पैरामीटर का इस्तेमाल करके, CrUXApiUtil.query फ़ंक्शन को कॉल करें.

CrUXApiUtil.query({
  url: 'https://web.dev/fast/'
}).then(response => {
  console.log(response);
}).catch(response => {
  console.error(response);
});

अगर CrUX डेटासेट में इस यूआरएल का डेटा मौजूद है, तो एपीआई, JSON-कोड में बदला गया जवाब देगा. उदाहरण के लिए

{
  "record": {
    "key": {
      "url": "https://web.dev/fast/"
    },
    "metrics": {
      "largest_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 2500,
            "density": 0.8477304539092148
          },
          {
            "start": 2500,
            "end": 4000,
            "density": 0.08988202359528057
          },
          {
            "start": 4000,
            "density"