কিভাবে CrUX API ব্যবহার করবেন

লক্ষ লক্ষ ওয়েবসাইট জুড়ে বাস্তব-ব্যবহারকারীর অভিজ্ঞতা ডেটাতে অ্যাক্সেস পেতে Chrome UX রিপোর্ট API কীভাবে ব্যবহার করবেন তা শিখুন।

রিক ভিসকোমি
শেন এক্সটারক্যাম্প
Shane Exterkamp
X GitHub

Chrome UX রিপোর্ট (CrUX) ডেটাসেট প্রতিনিধিত্ব করে যে বাস্তব-বিশ্বের Chrome ব্যবহারকারীরা ওয়েবে জনপ্রিয় গন্তব্যগুলি কীভাবে অনুভব করে। 2017 সাল থেকে, যখন কোয়েরিযোগ্য ডেটাসেটটি BigQuery- এ প্রথম প্রকাশিত হয়েছিল, তখন CrUX থেকে ফিল্ড ডেটা পেজস্পিড ইনসাইটস , CrUX ড্যাশবোর্ড এবং সার্চ কনসোলের কোর ওয়েব ভাইটালস রিপোর্টের মতো ডেভেলপার টুলগুলিতে একীভূত করা হয়েছে, যা ডেভেলপারদের প্রকৃত-ব্যবহারকারীর অভিজ্ঞতা পরিমাপ ও নিরীক্ষণ করতে সক্ষম করে। এই সমস্ত সময় যে অংশটি অনুপস্থিত তা হল একটি টুল যা CrUX ডেটা প্রোগ্রামগতভাবে বিনামূল্যে এবং আরামদায়ক অ্যাক্সেস প্রদান করে। সেই ব্যবধান পূরণে সাহায্য করার জন্য, আমরা সমস্ত নতুন Chrome UX Report API- এর প্রকাশ ঘোষণা করতে পেরে আনন্দিত!

এই APIটি বিকাশকারীদের CrUX ডেটাতে সহজ, দ্রুত এবং ব্যাপক অ্যাক্সেস প্রদানের লক্ষ্যে তৈরি করা হয়েছে। CrUX API শুধুমাত্র ক্ষেত্র ব্যবহারকারীর অভিজ্ঞতার ডেটা রিপোর্ট করে, বিদ্যমান PageSpeed ​​Insights API থেকে ভিন্ন, যা Lighthouse পারফরম্যান্স অডিট থেকে ল্যাব ডেটাও রিপোর্ট করে। CrUX API স্ট্রিমলাইন করা হয়েছে এবং দ্রুত ব্যবহারকারীর অভিজ্ঞতার ডেটা পরিবেশন করতে পারে, এটিকে রিয়েল-টাইম অডিটিং অ্যাপ্লিকেশনের জন্য আদর্শভাবে উপযুক্ত করে তোলে।

ডেভেলপারদের সবচেয়ে গুরুত্বপূর্ণ সমস্ত মেট্রিক্সে অ্যাক্সেস আছে তা নিশ্চিত করতে - কোর ওয়েব ভাইটালগুলি - CrUX API অডিট করে এবং নিরীক্ষণ করে Largest Contentful Paint (LCP), ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP), এবং Cumulative Layout Shift (CLS) উৎপত্তি এবং URL উভয় স্তর।

তো চলুন ডুব দিয়ে দেখি কিভাবে এটি ব্যবহার করতে হয়!

এই পৃষ্ঠায় 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. API এর URL এন্ডপয়েন্ট, কলারের ব্যক্তিগত API কী সহ।
  2. Content-Type: application/json শিরোনাম, নির্দেশ করে যে অনুরোধের বডিতে JSON রয়েছে।
  3. JSON-এনকোডেড রিকোয়েস্ট বডি , https://web.dev উৎস উল্লেখ করে।

জাভাস্ক্রিপ্টে একই জিনিস করতে, CrUXApiUtil ইউটিলিটি ব্যবহার করুন, যা API কল করে এবং ডিকোডড প্রতিক্রিয়া প্রদান করে (ইতিহাস এবং ব্যাচ সমর্থন সহ আরও বৈশিষ্ট্যের জন্য আমাদের 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);
});

যদি এই উৎপত্তির জন্য ডেটা বিদ্যমান থাকে, তাহলে API প্রতিক্রিয়া হল একটি JSON-এনকোডেড অবজেক্ট যা ব্যবহারকারীর অভিজ্ঞতার বিতরণের প্রতিনিধিত্বকারী মেট্রিক্স ধারণকারী। বন্টন মেট্রিক্স হল হিস্টোগ্রাম বিন এবং পার্সেন্টাইল।

{
  "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 পৃষ্ঠা জুড়ে LCP ব্যবহারকারীর অভিজ্ঞতার 79% হল 2,500 মিলিসেকেন্ডের কম, যা " ভাল " LCP থ্রেশহোল্ড৷ percentiles.p75 মান মানে এই ডিস্ট্রিবিউশনে 75% ব্যবহারকারীর অভিজ্ঞতা 2,216 মিলিসেকেন্ডের কম। প্রতিক্রিয়া বডি ডকুমেন্টেশনে প্রতিক্রিয়া গঠন সম্পর্কে আরও জানুন।

ত্রুটি

যখন CrUX API-এর প্রদত্ত উত্সের জন্য কোনও ডেটা থাকে না, তখন এটি একটি JSON-এনকোড করা ত্রুটি বার্তার সাথে প্রতিক্রিয়া জানায়:

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

এই ত্রুটিটি ডিবাগ করতে, প্রথমে চেক করুন যে অনুরোধ করা মূলটি সর্বজনীনভাবে নেভিগেবল। আপনি আপনার ব্রাউজারের ঠিকানা বারে মূল প্রবেশ করে এবং যেকোনো পুনঃনির্দেশের পরে চূড়ান্ত URL এর সাথে তুলনা করে এটি পরীক্ষা করতে পারেন। সাধারণ সমস্যাগুলির মধ্যে অপ্রয়োজনীয়ভাবে সাবডোমেন যোগ করা বা বাদ দেওয়া এবং ভুল HTTP প্রোটোকল ব্যবহার করা অন্তর্ভুক্ত।

ত্রুটি 
{"origin": "http://www.web.dev"}

এই উত্সটি ভুলভাবে http:// প্রোটোকল এবং www. সাবডোমেন

সফলতা 
{"origin": "https://web.dev"}

এই উত্স সর্বজনীনভাবে নেভিগেবল.

যদি অনুরোধ করা মূলটি ন্যাভিগেবল সংস্করণ হয় , তাহলে এই ত্রুটিটিও ঘটতে পারে যদি মূলটির নমুনার অপর্যাপ্ত সংখ্যক থাকে। ডেটাসেটে অন্তর্ভুক্ত সমস্ত উত্স এবং ইউআরএলে স্বতন্ত্র ব্যবহারকারীদের বেনামী করার জন্য পর্যাপ্ত সংখ্যক নমুনা থাকতে হবে। উপরন্তু, উত্স এবং URLগুলি অবশ্যই সর্বজনীনভাবে সূচীযোগ্য হতে হবে৷ ওয়েবসাইটগুলি কীভাবে ডেটাসেটে অন্তর্ভুক্ত করা হয় সে সম্পর্কে আরও জানতে CrUX পদ্ধতি পড়ুন।

URL ডেটা কোয়েরি করুন

আপনি দেখেছেন কিভাবে একটি মূলের উপর সামগ্রিক ব্যবহারকারীর অভিজ্ঞতার জন্য 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/"}'

এই cURL কমান্ডটি অরিজিন উদাহরণের অনুরূপ, ব্যতীত যে অনুরোধের অংশটি পৃষ্ঠাটি দেখার জন্য নির্দিষ্ট করতে url প্যারামিটার ব্যবহার করে।

JavaScript-এ CrUX API থেকে URL ডেটা জিজ্ঞাসা করতে, অনুরোধের বডিতে url প্যারামিটার ব্যবহার করে CrUXApiUtil.query ফাংশনটিতে কল করুন।

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

এই URL-এর ডেটা CrUX ডেটাসেটে বিদ্যমান থাকলে, API একটি 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": 0.062387522495501155
          }
        ],
        "percentiles": {
          "p75": 1947
        }
      },
      // ...
    }
  }
}

সঠিকভাবে, ফলাফলগুলি দেখায় যে https://web.dev/fast/ 85% "ভাল" LCP অভিজ্ঞতা রয়েছে এবং 1,947 মিলিসেকেন্ডের 75 তম পার্সেন্টাইল রয়েছে, যা উত্স-ব্যাপী বিতরণের তুলনায় কিছুটা ভাল।

ইউআরএল স্বাভাবিককরণ

CrUX API অনুরোধ করা URLগুলিকে পরিচিত URLগুলির তালিকার সাথে আরও ভালভাবে মেলাতে স্বাভাবিক করতে পারে৷ উদাহরণ স্বরূপ, https://web.dev/fast/#measure-performance-in-the-field URL-এর জন্য অনুসন্ধান করলে স্বাভাবিককরণের কারণে https://web.dev/fast/ এর ডেটা পাওয়া যাবে। যখন এটি ঘটবে, একটি urlNormalizationDetails অবজেক্ট প্রতিক্রিয়াতে অন্তর্ভুক্ত করা হবে। 

{
  "record": {
    "key": {
      "url": "https://web.dev/fast/"
    },
    "metrics": { ... }
  },
  "urlNormalizationDetails": {
    "normalizedUrl": "https://web.dev/fast/",
    "originalUrl": "https://web.dev/fast/#measure-performance-in-the-field"
  }
}

CrUX ডকুমেন্টেশনে URL স্বাভাবিককরণ সম্পর্কে আরও জানুন।

ফর্ম ফ্যাক্টর দ্বারা প্রশ্ন

ওয়েবসাইট অপ্টিমাইজেশান, নেটওয়ার্ক অবস্থা এবং ব্যবহারকারীদের ডিভাইসের উপর নির্ভর করে ব্যবহারকারীর অভিজ্ঞতা উল্লেখযোগ্যভাবে পরিবর্তিত হতে পারে। এই পার্থক্যগুলি আরও ভালভাবে বোঝার জন্য, CrUX API-এর formFactor মাত্রা ব্যবহার করে মূল এবং URL পারফরম্যান্সে ড্রিল ডাউন করুন৷

API তিনটি স্পষ্ট ফর্ম ফ্যাক্টর মান সমর্থন করে: DESKTOP , PHONE , এবং TABLET ৷ উত্স বা URL ছাড়াও, শুধুমাত্র সেই ব্যবহারকারীর অভিজ্ঞতার ফলাফলগুলিকে সীমাবদ্ধ করতে অনুরোধের অংশে এই মানগুলির মধ্যে একটি নির্দিষ্ট করুন৷ এই উদাহরণটি দেখায় কিভাবে cURL ব্যবহার করে ফর্ম ফ্যাক্টর দ্বারা API-কে প্রশ্ন করতে হয়। 

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/", "formFactor": "PHONE"}'

জাভাস্ক্রিপ্ট ব্যবহার করে ফর্ম ফ্যাক্টর-নির্দিষ্ট ডেটার জন্য CrUX API জিজ্ঞাসা করতে, অনুরোধের বডিতে url এবং formFactor প্যারামিটার ব্যবহার করে CrUXApiUtil.query ফাংশনটি কল করুন৷ 

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

formFactor প্যারামিটারটি বাদ দেওয়া সমস্ত ফর্ম ফ্যাক্টরের জন্য ডেটা অনুরোধ করার সমতুল্য। 

{
  "record": {
    "key": {
      "url": "https://web.dev/fast/",
      "formFactor": "PHONE"
    },
    "metrics": {
      "largest_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 2500,
            "density": 0.778631284916204
          },
          {
            "start": 2500,
            "end": 4000,
            "density": 0.13943202979515887
          },
          {
            "start": 4000,
            "density": 0.08193668528864119
          }
        ],
        "percentiles": {
          "p75": 2366
        }
      },
    // ...
    }
  }
}

প্রতিক্রিয়ার key ক্ষেত্রটি formFactor অনুরোধ কনফিগারেশনকে প্রতিধ্বনিত করবে তা নিশ্চিত করতে যে শুধুমাত্র ফোন অভিজ্ঞতা অন্তর্ভুক্ত করা হয়েছে।

পূর্ববর্তী বিভাগ থেকে স্মরণ করুন যে এই পৃষ্ঠার 85% ব্যবহারকারীর অভিজ্ঞতা "ভাল" LCP ছিল। ফোন-নির্দিষ্ট অভিজ্ঞতার সাথে তুলনা করুন, যার মধ্যে শুধুমাত্র 78% "ভাল" বলে বিবেচিত হয়। 75তম পার্সেন্টাইল ফোন অভিজ্ঞতার মধ্যেও ধীর, 1,947 মিলিসেকেন্ড থেকে 2,366 মিলিসেকেন্ডে। ফর্ম ফ্যাক্টর দ্বারা বিভাজন ব্যবহারকারীর অভিজ্ঞতায় আরও চরম বৈষম্য হাইলাইট করার সম্ভাবনা রয়েছে।

কোর ওয়েব ভাইটাল কর্মক্ষমতা মূল্যায়ন

কোর ওয়েব ভাইটালস প্রোগ্রাম লক্ষ্যগুলিকে সংজ্ঞায়িত করে যা ব্যবহারকারীর অভিজ্ঞতা বা অভিজ্ঞতার বিতরণকে "ভাল" হিসাবে বিবেচনা করা যেতে পারে কিনা তা নির্ধারণ করতে সহায়তা করে। নিম্নলিখিত উদাহরণে, আমরা CrUX API এবং CrUXApiUtil.query ফাংশন ব্যবহার করি কোর ওয়েব ভাইটাল মেট্রিক্সের (LCP, INP, CLS) একটি ওয়েব পৃষ্ঠার বিতরণ "ভাল" কিনা তা মূল্যায়ন করতে। 

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

function assessCoreWebVitals(response) {
  // See https://web.dev/articles/vitals/#core-web-vitals.
  const CORE_WEB_VITALS = [
    'largest_contentful_paint',
    'interaction_to_next_paint',
    'cumulative_layout_shift'
  ];
  CORE_WEB_VITALS.forEach(metric => {
    const data = response.record.metrics[metric];
    if (!data) {
      console.log('No data for', metric);
      return;
    }
    const p75 = data.percentiles.p75;
    const threshold = data.histogram[0].end;
    // A Core Web Vitals metric passes the assessment if
    // its 75th percentile is under the "good" threshold.
    const passes = p75 < threshold;
    console.log(`The 75th percentile (${p75}) of ${metric} ` +
        `${passes ? 'passes' : 'does not pass'} ` +
        `the Core Web Vitals "good" threshold (${threshold}).`)
  });
}

ফলাফলগুলি দেখায় যে এই পৃষ্ঠাটি তিনটি মেট্রিকের জন্য কোর ওয়েব ভাইটাল মূল্যায়ন পাস করে। 

The 75th percentile (1973) of largest_contentful_paint passes the Core Web Vitals "good" threshold (2500).
The 75th percentile (20) of interaction_to_next_paint passes the Core Web Vitals "good" threshold (200).
The 75th percentile (0.05) of cumulative_layout_shift passes the Core Web Vitals "good" threshold (0.10).

API ফলাফলগুলি নিরীক্ষণ করার জন্য একটি স্বয়ংক্রিয় উপায়ের সাথে মিলিত, বাস্তব-ব্যবহারকারীর অভিজ্ঞতা দ্রুত হয় এবং দ্রুত থাকে তা নিশ্চিত করতে CrUX-এর ডেটা ব্যবহার করা যেতে পারে৷ কোর ওয়েব ভাইটাল এবং কীভাবে সেগুলি পরিমাপ করা যায় সে সম্পর্কে আরও তথ্যের জন্য, কোর ওয়েব ভাইটালগুলি পরিমাপ করতে ওয়েব ভাইটাল এবং টুলগুলি দেখুন।

এরপর কি?

CrUX API-এর প্রারম্ভিক সংস্করণে অন্তর্ভুক্ত বৈশিষ্ট্যগুলি শুধুমাত্র CrUX-এর মাধ্যমে সম্ভব এমন ধরনের অন্তর্দৃষ্টিগুলির পৃষ্ঠকে স্ক্র্যাচ করে। BigQuery-এ CrUX ডেটাসেটের ব্যবহারকারীরা আরও কিছু উন্নত বৈশিষ্ট্যের সাথে পরিচিত হতে পারে যার মধ্যে রয়েছে:

  • অতিরিক্ত মেট্রিক্স
    • first_paint
    • dom_content_loaded
    • onload
    • time_to_first_byte
    • notification_permissions
  • অতিরিক্ত মাত্রা
    • month
    • country
    • effective connection type (ECT)
  • অতিরিক্ত কণিকা
    • বিস্তারিত হিস্টোগ্রাম
    • বেশি শতাংশ

আপনার API কী অর্জন করতে এবং আরও উদাহরণ অ্যাপ্লিকেশন অন্বেষণ করতে অফিসিয়াল CrUX API ডক্স দেখুন। আমরা আশা করি আপনি এটি চেষ্টা করে দেখবেন এবং আমরা আপনার যেকোনো প্রশ্ন বা প্রতিক্রিয়া শুনতে চাই, তাই CrUX আলোচনা ফোরামে আমাদের সাথে যোগাযোগ করুন৷ এবং CrUX API-এর জন্য আমরা যা পরিকল্পনা করেছি তার সবকিছু সম্পর্কে আপ টু ডেট থাকতে, CrUX ঘোষণা ফোরামে সদস্যতা নিন বা @ChromeUXReport- এ Twitter-এ আমাদের অনুসরণ করুন।