প্রকাশিত: ৭ ফেব্রুয়ারী, ২০২৩, সর্বশেষ আপডেট: ১১ এপ্রিল, ২০২৫
এই নির্দেশিকাটিতে Chrome UX রিপোর্ট (CrUX) ইতিহাস API এন্ডপয়েন্টের সাথে পরিচয় করিয়ে দেওয়া হয়েছে, যা ওয়েব পারফরম্যান্স ডেটার টাইম সিরিজ প্রদান করে। এই ডেটা সাপ্তাহিক আপডেট হয় এবং আপনাকে প্রায় ৬ মাসের ইতিহাস দেখতে দেয়, যেখানে এক সপ্তাহের ব্যবধানে ৪০টি ডেটা পয়েন্ট থাকে।
মূল 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 }
}
}
}
এই স্ন্যাপশটে একটি নির্দিষ্ট ২৮ দিনের সংগ্রহ সময়ের জন্য হিস্টোগ্রাম ঘনত্বের মান এবং শতাংশের মান অন্তর্ভুক্ত রয়েছে, এই ক্ষেত্রে, ২৭ ডিসেম্বর, ২০২২ থেকে ২৩ জানুয়ারী, ২০২৩ পর্যন্ত।
CrUX ইতিহাস API অনুসন্ধান করুন
ইতিহাসের শেষ বিন্দুতে কল করতে, URL-এ queryRecord পরিবর্তন করে curl কমান্ডে queryHistoryRecord করুন। আগের কলের মতো একই CrUX API কী ব্যবহার করলে কাজ হবে। collectionPeriodCount কতগুলি টাইম সিরিজ এন্ট্রি ফেরত পাঠাতে হবে তা নির্দিষ্ট করে; সর্বোচ্চ 40। যদি নির্দিষ্ট না করা থাকে, তাহলে এটি ডিফল্টভাবে 25-এ সেট করা হয়।
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", "collectionPeriodCount": 40}'
একটি প্রতিক্রিয়ার সামগ্রিক আকৃতি একই রকম—কিন্তু আরও অনেক তথ্য থাকে! একটি একক তথ্য বিন্দুর পরিবর্তে, এখন ৭৫তম পার্সেন্টাইল (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 এর উদাহরণে শেষ টাইম সিরিজ এন্ট্রিগুলি ব্যাখ্যা করলে দেখা গেছে যে ১৪ আগস্ট, ২০২২ থেকে ১০ সেপ্টেম্বর, ২০২২ পর্যন্ত, ৯১.৮৭% পৃষ্ঠা লোডের LCP মান ২৫০০ মিলিসেকেন্ডের চেয়ে কম ছিল, ৫.২৭% পৃষ্ঠার মান ২৫০০ মিলিসেকেন্ড থেকে ৪০০০ মিলিসেকেন্ডের মধ্যে ছিল এবং ২.৮৫% পৃষ্ঠার মান ৪০০০ মিলিসেকেন্ডের চেয়ে বেশি ছিল।
একইভাবে, p75 মানের জন্য একটি সময় ক্রম রয়েছে: ১৪ আগস্ট, ২০২২ এর জন্য ১০ সেপ্টেম্বর, ২০২২ পর্যন্ত LCP p75 ছিল 1377 এর অর্থ হল, এই সংগ্রহের সময়কালে, ৭৫% ব্যবহারকারীর অভিজ্ঞতার LCP ১৩৭৭ ms এর কম ছিল এবং ২৫% ব্যবহারকারীর অভিজ্ঞতার LCP ১৩৭৭ ms এর বেশি ছিল।
উদাহরণটিতে শুধুমাত্র ৬টি টাইম সিরিজ এন্ট্রি এবং সংগ্রহের সময়কাল তালিকাভুক্ত করা হয়েছে, তবে API থেকে প্রাপ্ত প্রতিক্রিয়াগুলি ডিফল্টরূপে ২৫টি টাইম সিরিজ এন্ট্রি প্রদান করে এবং সর্বাধিক ৪০টি - যখন অনুরোধে "collectionPeriodCount": 40 উল্লেখ করা থাকে। যেহেতু এই সংগ্রহের সময়কালের প্রতিটির শেষ তারিখ শনিবার যা ৭ দিনের ব্যবধানে, "collectionPeriodCount": 40 সহ এটি ১০ মাস জুড়ে।
যেকোনো প্রদত্ত উত্তরে, হিস্টোগ্রাম বিন ঘনত্ব এবং p75 মানের জন্য সময় সিরিজের দৈর্ঘ্য collectionPeriods ক্ষেত্রের অ্যারের দৈর্ঘ্যের সমান হবে: এই অ্যারেগুলিতে সূচকের উপর ভিত্তি করে এক-থেকে-এক চিঠিপত্র রয়েছে।
পৃষ্ঠা-স্তরের ডেটা কোয়েরি করুন
অরিজিন-লেভেল ডেটার পাশাপাশি, CrUX History API ঐতিহাসিক পৃষ্ঠা-স্তরের ডেটাতে অ্যাক্সেসের অনুমতি দেয়। যদিও BigQuery-তে 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 দ্বারা প্রতিনিধিত্ব করা হবে। পার্থক্যের কারণ হল হিস্টোগ্রাম ঘনত্ব সর্বদা সংখ্যা, যখন শতাংশগুলি সংখ্যা বা স্ট্রিং হতে পারে (CLS স্ট্রিং ব্যবহার করে, এমনকি যদি তারা সংখ্যার মতো দেখায়)।
ডেটা ভিজ্যুয়ালাইজ করুন
ডেটা ভিজ্যুয়ালাইজ করার সবচেয়ে সহজ উপায় হল CrUX Vis, যা বিশেষভাবে CrUX History API এর শক্তি প্রদর্শনের জন্য তৈরি করা হয়েছে। CrUX Vis ডকুমেন্টেশনে আরও পড়ুন।
একই রকম চার্ট নিজে তৈরি করতে, আমরা একটি উদাহরণ Colab তৈরি করেছি। Colab, অথবা 'Colaboratory', আপনাকে আপনার ব্রাউজারের মধ্যে থেকে Python লিখতে এবং চালানোর সুযোগ দেয়। CrUX History API Colab ( source ) API তে কল করতে এবং ডেটা চার্ট করতে Python ব্যবহার করে।
এই Colab আপনাকে একটি সংক্ষিপ্ত ফর্ম পূরণ করে p75 চার্ট, ট্রাই-বিন চার্ট তৈরি করতে, ট্যাবুলার আকারে ডেটা পেতে এবং CrUX API-এর জন্য অনুরোধ এবং প্রতিক্রিয়া জোড়া দেখতে দেয়। এটি ব্যবহার করার জন্য আপনাকে একজন প্রোগ্রামার হতে হবে না—তবে আপনি অবশ্যই Python কোডটি দেখে এটিকে আশ্চর্যজনক কিছুতে পরিবর্তন করতে পারেন! দয়া করে উপভোগ করুন এবং আপনি যা পান তার প্রতিক্রিয়া জানাতে দ্বিধা করবেন না!
অবশ্যই আপনি কেবল Colab বা Python-এর মধ্যেই সীমাবদ্ধ নন এবং এটি এই নতুন API কীভাবে ব্যবহার করবেন তার একটি উদাহরণ মাত্র। JSON-ভিত্তিক, HTTP এন্ডপয়েন্ট হিসেবে API যেকোনো প্রযুক্তি থেকে অনুসন্ধানযোগ্য।
উপসংহার
CrUX ইতিহাস API এন্ডপয়েন্ট প্রবর্তনের আগে, সাইট মালিকরা CrUX থেকে প্রাপ্ত ঐতিহাসিক তথ্যের ক্ষেত্রে সীমাবদ্ধ ছিলেন। BigQuery ব্যবহার করে মাসিক উৎপত্তি-স্তরের ডেটা পাওয়া যেত, কিন্তু সাপ্তাহিক ডেটা বা পৃষ্ঠা-স্তরের ঐতিহাসিক ডেটা পাওয়া যেত না। সাইট মালিকরা দৈনিক API ব্যবহার করে এই ডেটা নিজেরাই রেকর্ড করতে পারতেন, তবে প্রায়শই মেট্রিক্সে রিগ্রেশনের পরেই এর প্রয়োজনীয়তা আবিষ্কৃত হত।
এই CrUX History API চালু করার মাধ্যমে আশা করা যায় যে এটি সাইটের মালিকদের তাদের পরিবর্তিত সাইট মেট্রিক্স সম্পর্কে আরও ভালোভাবে বুঝতে সাহায্য করবে এবং সমস্যা দেখা দিলে ডায়াগনস্টিক টুল হিসেবে কাজ করবে। আপনি যদি নতুন API ব্যবহার করেন, তাহলে Chrome UX Report (Discussions) google গ্রুপে আপনার মতামত স্বাগত জানানো হবে।
স্বীকৃতি
আনস্প্ল্যাশে ডেভ হেরিং -এর হিরো ছবি