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

Johannes Henkel

Jasmine Yan

Barry Pollard

এই নির্দেশিকাটি Chrome UX রিপোর্ট (CrUX) হিস্ট্রি API এন্ডপয়েন্ট প্রবর্তন করে, যা ওয়েব পারফরম্যান্স ডেটার টাইম সিরিজ প্রদান করে। এই ডেটা সাপ্তাহিক আপডেট হয়, এবং আপনাকে প্রায় 6 মাসের মূল্যের ইতিহাস দেখতে দেয়, যেখানে এক সপ্তাহের মধ্যে 25টি ডেটা পয়েন্ট রয়েছে৷

মূল CrUX API এন্ডপয়েন্ট থেকে প্রতিদিনের আপডেটের সাথে ব্যবহার করা হলে, আপনি এখন দ্রুত সাম্প্রতিক ডেটা এবং আগে যা ঘটেছিল উভয়ই দেখতে পারবেন, এটিকে সময়ের সাথে ওয়েব পৃষ্ঠার পরিবর্তনগুলি দেখার জন্য একটি শক্তিশালী হাতিয়ার করে তোলে৷

এই পৃষ্ঠায় 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 পর্যন্ত একটি নির্দিষ্ট 28-দিনের সংগ্রহ সময়ের জন্য হিস্টোগ্রামের ঘনত্বের মান এবং শতাংশের মান অন্তর্ভুক্ত রয়েছে।

CrUX হিস্ট্রি এপিআইকে জিজ্ঞাসা করুন

ইতিহাসের এন্ডপয়েন্টকে কল করতে, URL-এ queryRecord পরিবর্তন করে curl কমান্ডে 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 }
      }
    ]
  }
}

এই উদাহরণে, সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) মেট্রিকের 0 থেকে 2500 ms বাকেটের 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% LCP মান 2500ms, 5.27 এর চেয়ে ছোট ছিল %-এর মান ছিল 2500ms এবং 4000ms-এর মধ্যে, এবং 2.85%-এর মান এর থেকে বেশি 4000ms

একইভাবে, p75 মানগুলির জন্য একটি টাইম সিরিজ রয়েছে: 14 আগস্ট, 2022 এর জন্য 10 সেপ্টেম্বর, 2022 পর্যন্ত LCP p75 ছিল 1377 । এর মানে হল, এই সংগ্রহের সময়ের জন্য, 75% ব্যবহারকারীর অভিজ্ঞতার একটি LCP ছিল 1377 ms-এর কম, এবং 25% ব্যবহারকারীর অভিজ্ঞতার একটি LCP 1377 ms-এর বেশি ছিল৷

যদিও উদাহরণে শুধুমাত্র 6 টাইম সিরিজ এন্ট্রি এবং কালেকশন পিরিয়ডের তালিকা করা হয়েছে, API থেকে পাওয়া প্রতিক্রিয়া 25 টাইম সিরিজ এন্ট্রি প্রদান করে; যেহেতু এই সংগ্রহের প্রতিটি সময়কালের শেষ তারিখ হল শনিবার যা 7 দিনের ব্যবধানে, এটি 6 মাস কভার করে।

যেকোনো প্রদত্ত প্রতিক্রিয়ায়, হিস্টোগ্রাম বিন ঘনত্বের জন্য এবং p75 মানের জন্য সময় সিরিজের দৈর্ঘ্য কালেকশন collectionPeriods ফিল্ডে অ্যারের দৈর্ঘ্যের সমান হবে: এইগুলির মধ্যে সূচকের উপর ভিত্তি করে এক থেকে এক চিঠিপত্র রয়েছে অ্যারে

পৃষ্ঠা-স্তরের ডেটা জিজ্ঞাসা করুন

মূল-স্তরের ডেটার পাশাপাশি, CrUX History API ঐতিহাসিক পৃষ্ঠা-স্তরের ডেটা অ্যাক্সেসের অনুমতি দেয়। যদিও অরিজিন-লেভেল ডেটা আগে পাওয়া যেত BigQuery-এ CrUX ডেটাসেট ব্যবহার করে (বা CrUX ড্যাশবোর্ড ব্যবহার করে), পৃষ্ঠা-স্তরের ঐতিহাসিক ডেটা তখনই পাওয়া যেত যদি সাইটগুলি নিজেরাই ডেটা সংগ্রহ করে এবং সংরক্ষণ করে। নতুন API এখন সেই ঐতিহাসিক পৃষ্ঠা-স্তরের ডেটা আনলক করে।

পৃষ্ঠা-স্তরের ডেটা একই পদ্ধতিতে জিজ্ঞাসা করা যেতে পারে, কিন্তু পেলোডে 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- এর জন্য ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP)- এর জন্য p75 মানগুলির একটি গ্রাফ রয়েছে:

এই লাইন চার্টে, y-অক্ষের প্রতিটি মান হল p75s টাইম সিরিজের একটি p75 মান এবং x-অক্ষ হল সেই সময়, যা প্রতিটি সংগ্রহের সময়ের জন্য lastDate হিসাবে সেট আপ করা হয়।

এখানে হিস্টোগ্রাম বিন টাইম সিরিজের জন্য একটি গ্রাফ রয়েছে - যা একটি ট্রাই-বিন চার্ট হিসাবে পরিচিত - কারণ এই হিস্টোগ্রামগুলিতে তিনটি বিন রয়েছে৷

প্রতিটি সংগ্রহের সময়কালের জন্য x-অক্ষ lastDate হিসেবে সেট আপ করা হয়েছে। এইবার, যাইহোক, y-অক্ষ হল INP মেট্রিকের জন্য একটি নির্দিষ্ট পরিসরে পৃষ্ঠা লোডের শতাংশ, যা একটি স্ট্যাক করা বার চার্টের মাধ্যমে দেখানো হয়েছে। p75 চার্ট একটি দ্রুত ওভারভিউ প্রদান করে, এবং একটি একক চার্টের মধ্যে, একাধিক মেট্রিক্স যোগ করা, অথবা PHONE এবং DESKTOP উভয়ের জন্য লাইন দেখানো তুলনামূলকভাবে সহজ। ট্রাই-বিন চার্ট প্রতিটি সংগ্রহের সময়কালে পরিমাপ করা মেট্রিক মানের বিতরণের একটি ধারণা দেয়।

উদাহরণস্বরূপ, যদিও p75 চার্ট পরামর্শ দেয় যে https://web.dev-এর পর্যবেক্ষণের সময় প্রায় গ্রহণযোগ্য INP মান ছিল, ট্রাই-বিন চার্ট দেখায় যে পৃষ্ঠা লোডের একটি ছোট ভগ্নাংশের জন্য, INP আসলে দুর্বল ছিল। উভয় চার্টেই, এটি অনুমান করা তুলনামূলকভাবে সহজ যে একটি পারফরম্যান্স রিগ্রেশন ছিল যা অক্টোবরের শেষের দিকে শুরু হয়েছিল এবং নভেম্বরের মাঝামাঝি সময়ে ঠিক করা হয়েছিল।

এই ধরনের চার্ট নিজে তৈরি করতে, আমরা Colab-এর উদাহরণ তৈরি করেছি। একটি Colab, বা 'Colaboratory', আপনাকে আপনার ব্রাউজার থেকে পাইথন লিখতে এবং কার্যকর করতে দেয়। CrUX History API Colab ( উৎস ) API এ কল করতে এবং ডেটা চার্ট করতে পাইথন ব্যবহার করে।

এই Colab আপনাকে p75 চার্ট, ট্রাই-বিন চার্ট তৈরি করতে, ট্যাবুলার আকারে ডেটা পেতে এবং একটি সংক্ষিপ্ত ফর্ম পূরণ করে CrUX API-এর জন্য অনুরোধ এবং প্রতিক্রিয়া জুটি দেখতে দেয়। এটি ব্যবহার করার জন্য আপনাকে একজন প্রোগ্রামার হতে হবে না - তবে আপনি অবশ্যই পাইথন কোডটি দেখতে পারেন এবং এটিকে আশ্চর্যজনক কিছুতে পরিবর্তন করতে পারেন! অনুগ্রহ করে উপভোগ করুন এবং আপনি যা পান তাতে প্রতিক্রিয়া জানাতে দ্বিধা করবেন না!

অবশ্যই আপনি Colab বা Python এর মধ্যে সীমাবদ্ধ নন এবং এই নতুন API কীভাবে ব্যবহার করবেন তার এটি একটি উদাহরণ। একটি JSON-ভিত্তিক, HTTP এন্ডপয়েন্ট হিসাবে API যেকোন প্রযুক্তি থেকে অনুসন্ধানযোগ্য।

উপসংহার

CrUX History API এন্ডপয়েন্ট প্রবর্তনের আগে, সাইটের মালিকরা CrUX থেকে যে ঐতিহাসিক তথ্য পেতে পারে তাতে সীমিত ছিল। BigQuery এবং CrUX ড্যাশবোর্ড ব্যবহার করে মাসিক উৎপত্তি-স্তরের ডেটা উপলব্ধ ছিল, কিন্তু সাপ্তাহিক ডেটা উপলব্ধ ছিল না বা পৃষ্ঠা-স্তরের ঐতিহাসিক ডেটা ছিল না। সাইটের মালিকরা দৈনিক API ব্যবহার করে এই ডেটা নিজেরাই রেকর্ড করতে পারে, কিন্তু প্রায়শই মেট্রিক্সে রিগ্রেশনের পরেই এর প্রয়োজনীয়তা আবিষ্কৃত হয়।

এই CrUX History API-এর প্রবর্তনের আশা হল যে এটি সাইটের মালিকদের তাদের পরিবর্তিত সাইটের মেট্রিক্স সম্পর্কে আরও ভালভাবে বোঝার অনুমতি দেবে এবং সমস্যাগুলির উদ্ভবের জন্য একটি ডায়াগনস্টিক টুল হিসাবে। আপনি যদি নতুন API ব্যবহার করেন, তাহলে Chrome UX রিপোর্ট (আলোচনা) google গ্রুপে প্রতিক্রিয়া স্বাগত জানানো হয়।

স্বীকৃতি

আনস্প্ল্যাশে ডেভ হেরিং -এর হিরো ছবি