এই কোডল্যাব সম্পর্কে
1. তুমি শুরু করার আগে
এই কোডল্যাবে, আপনি পেজস্পিড ইনসাইটস (পিএসআই) এপিআই এবং ক্রোম ইউএক্স রিপোর্ট (সিআরইউএক্স) এপিআই দিয়ে কীভাবে একটি ওয়েব পেজের মূল ওয়েব ভাইটাল পরিমাপ করবেন তা শিখবেন।
উভয় APIই অভিন্ন কোর ওয়েব ভাইটাল ডেটা প্রদান করে, কিন্তু প্রতিটি API স্বতন্ত্র সুবিধা প্রদান করে। ক্ষেত্র থেকে CrUX ডেটা ছাড়াও, PSI API Lighthouse থেকে ডেটাও সরবরাহ করে, যা Google-এর স্বয়ংক্রিয় এবং ওপেন সোর্স টুল যা ওয়েব পৃষ্ঠাগুলিকে অডিট করে এবং কীভাবে সেগুলিকে উন্নত করতে হয় তা সুপারিশ করে৷ CrUX API Lighthouse ডেটা প্রদান করে না, তাই এটি দ্রুত কার্যকর করে।
Google আপনাকে মোবাইল এবং ডেস্কটপ ডিভাইস জুড়ে Core Web Vitals পরিমাপ করার পরামর্শ দেয়। মূল ওয়েব ভাইটালগুলিতে এই তিনটি মেট্রিক্স অন্তর্ভুক্ত রয়েছে, যা সমস্ত ওয়েব পৃষ্ঠাগুলিতে প্রযোজ্য এবং আপনাকে ব্যবহারকারীর অভিজ্ঞতার সমালোচনামূলক অন্তর্দৃষ্টি প্রদান করে:
- সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)। লোড কর্মক্ষমতা পরিমাপ করে এবং পৃষ্ঠাটি লোড হতে শুরু করার 2.5 সেকেন্ডের মধ্যে হওয়া উচিত।
- প্রথম ইনপুট বিলম্ব (FID)। ইন্টারঅ্যাক্টিভিটি পরিমাপ করে এবং 100 মিলিসেকেন্ডের মধ্যে হওয়া উচিত।
- Cumulative Layout Shift (CLS)। চাক্ষুষ স্থিতিশীলতা পরিমাপ করে এবং 0.1 এর মধ্যে হওয়া উচিত।
পূর্বশর্ত
- ওয়েব ভাইটাল নিবন্ধ ।
- মূল ওয়েব ভাইটাল মেট্রিক্স থ্রেশহোল্ড নিবন্ধ সংজ্ঞায়িত করা ।
- কমান্ড লাইন কিভাবে ব্যবহার করতে হয় তার প্রাথমিক জ্ঞান।
আপনি কি করবেন
- PSI API দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল পরিমাপ করুন।
- CrUX API দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল পরিমাপ করুন।
আপনি কি প্রয়োজন হবে
- একটি Google অ্যাকাউন্ট
- একটি কমান্ড লাইন অ্যাক্সেস
- আপনার পছন্দের একটি পাঠ্য সম্পাদক
- আপনার পছন্দের একটি ওয়েব ব্রাউজার
- আপনার পছন্দের একটি URL (এই কোডল্যাবটি https://developers.google.com ব্যবহার করে।)
2. PSI API দিয়ে কোর ওয়েব ভাইটাল পরিমাপ করুন
- আপনার যদি একটি URL এর ডেস্কটপ সংস্করণের জন্য কর্মক্ষমতা ডেটার প্রয়োজন হয়, তাহলে PageSpeed Insights API থেকে ডেটা অনুরোধ করতে এই
curlকমান্ডটি চালান এবং এটি একটিresponse.txtফাইলে সংরক্ষণ করুন:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
আপনার URL দিয়ে YOUR_URL স্থানধারক প্রতিস্থাপন করুন।
- আপনার যদি একটি URL এর মোবাইল সংস্করণের জন্য কর্মক্ষমতা ডেটার প্রয়োজন হয়, পূর্ববর্তী ধাপে প্রদত্ত কমান্ডে API স্ট্রিং-এর শেষে একটি
mobileমান হিসাবেstrategyক্যোয়ারী প্যারামিটার সেট করুন:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
আপনার URL দিয়ে YOUR_URL স্থানধারক প্রতিস্থাপন করুন।
- আপনার পাঠ্য সম্পাদকে,
response.txtফাইলটি খুলুন এবং তারপরেloadingExperienceবৈশিষ্ট্যটি খুঁজুন:
response.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
loadingExperience প্রপার্টি API অনুরোধে নির্দেশিত URL এবং ডিভাইসের প্রকারের উপর ভিত্তি করে প্রতিটি কোর ওয়েব ভাইটালের জন্য এই তথ্য রিপোর্ট করে:
-
percentileপ্রপার্টি প্রতিটি মেট্রিকের জন্য 75 তম পার্সেন্টাইল নির্দেশ করে। -
distributionsপ্রপার্টি নির্দেশ করে যে পৃষ্ঠা দর্শনের শতকরা শতাংশ যা প্রতিটি মেট্রিকের জন্য ভাল , উন্নতির প্রয়োজন বা খারাপ অভিজ্ঞতা ছিল। -
categoryবৈশিষ্ট্য প্রতিটি মেট্রিকের কর্মক্ষমতা ধীর, গড় বা দ্রুত হিসাবে শ্রেণীবদ্ধ করে।
loadingExperience প্রপার্টির বিষয়বস্তু খালি থাকলে, ইউআরএলে পর্যাপ্ত পারফরম্যান্স ডেটা উপলব্ধ থাকে না। এই সমস্যাটি সাধারণত দেখা যায় যখন আপনি কম-ট্রাফিক ওয়েব পৃষ্ঠাগুলি পরীক্ষা করেন।
-
originLoadingExperienceসম্পত্তি খুঁজুন:
response.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
originLoadingExperience প্রপার্টি শুধুমাত্র URL-এর পরিবর্তে সমগ্র উৎসের জন্য একত্রিত অভিজ্ঞতার রিপোর্ট করে। এটি পূর্ববর্তী ধাপে ব্যাখ্যা করা প্রতিটি কোর ওয়েব ভাইটালের জন্য একই তথ্য প্রদান করে।
3. CrUX API দিয়ে কোর ওয়েব ভাইটাল পরিমাপ করুন
একটি API কী পান
- Google ক্লাউড কনসোলে ,
Chrome UXঅনুসন্ধান করুন এবং তারপরে ড্রপ-ডাউন মেনুতে Chrome UX প্রতিবেদন API নির্বাচন করুন৷ - Chrome UX Report API পৃষ্ঠায়, Enable এ ক্লিক করুন এবং তারপর Enable বোতামটি একটি Manage বাটনে পরিবর্তন করার জন্য অপেক্ষা করুন এবং Manage নির্বাচন করুন।
- নেভিগেশন মেনুতে, শংসাপত্রে ক্লিক করুন এবং তারপরে শংসাপত্র তৈরি করুন > API কী নির্বাচন করুন এবং API কীটি অনুলিপি করুন।
একটি অনুরোধ করুন
- আপনার কমান্ড লাইন থেকে, CrUX API থেকে আপনার URL এর জন্য কর্মক্ষমতা ডেটার অনুরোধ করুন এবং এটি একটি
response.txtফাইলে সংরক্ষণ করুন:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
আপনার API কী দিয়ে YOUR_API_KEY স্থানধারক প্রতিস্থাপন করুন এবং তারপরে আপনার URL দিয়ে YOUR_URL স্থানধারক প্রতিস্থাপন করুন।
- আপনার পাঠ্য সম্পাদকে,
response.txtফাইলটি খুলুন:
response.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
CrUX API প্রতিক্রিয়া প্রতিটি মূল ওয়েব ভাইটালের জন্য এই তথ্য প্রদান করে:
-
histogramপ্রপার্টি এমন ব্যবহারকারীদের শতাংশ নির্দেশ করে যাদের একটি প্রদত্ত মেট্রিকের জন্য ধীর, গড় বা দ্রুত অভিজ্ঞতা ছিল। -
percentilesসম্পত্তি একটি প্রদত্ত মেট্রিকের জন্য 75 তম পার্সেন্টাইল পর্যবেক্ষণ নির্দেশ করে।
আপনি যদি একটি ত্রুটির বার্তা দেখতে পান যা বলে যে ডেটা পাওয়া যায়নি, প্রদত্ত URL এর জন্য পর্যাপ্ত কর্মক্ষমতা ডেটা উপলব্ধ নেই৷ এই সমস্যাটি সাধারণত দেখা যায় যখন আপনি কম-ট্রাফিক ওয়েব পৃষ্ঠাগুলি পরীক্ষা করেন।
4. অভিনন্দন
অভিনন্দন! আপনি PSI API এবং CrUX API দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল পরিমাপ করেছেন৷