PageSpeed Insights API এবং Chrome UX (CrUX) Report API দিয়ে কোর ওয়েব ভাইটাল পরিমাপ করুন

1. আপনি শুরু করার আগে

এই কোডল্যাবে, আপনি পেজস্পিড ইনসাইটস এপিআই এবং ক্রুএক্স এপিআই দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল কীভাবে পরিমাপ করবেন তা শিখবেন।

উভয় APIই অভিন্ন কোর ওয়েব ভাইটাল ডেটা প্রদান করে, কিন্তু প্রতিটি API স্বতন্ত্র সুবিধা প্রদান করে। ক্ষেত্র থেকে CrUX ডেটা ছাড়াও, PageSpeed Insights API এছাড়াও Lighthouse থেকে ডেটা সরবরাহ করে, যা Google-এর স্বয়ংক্রিয় এবং ওপেন সোর্স টুল যা ওয়েব পৃষ্ঠাগুলিকে অডিট করে এবং কীভাবে সেগুলিকে উন্নত করতে হয় তা সুপারিশ করে৷ CrUX API Lighthouse ডেটা প্রদান করে না, তাই এটি দ্রুত কার্যকর করে।

Google আপনাকে মোবাইল এবং ডেস্কটপ ডিভাইস জুড়ে Core Web Vitals পরিমাপ করার পরামর্শ দেয়। মূল ওয়েব ভাইটালগুলি এই তিনটি মেট্রিক্স অন্তর্ভুক্ত করে, যা সমস্ত ওয়েব পৃষ্ঠাগুলিতে প্রযোজ্য এবং আপনাকে ব্যবহারকারীর অভিজ্ঞতার সমালোচনামূলক অন্তর্দৃষ্টি প্রদান করে:

• সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)। লোড কর্মক্ষমতা পরিমাপ করে এবং পৃষ্ঠাটি লোড হতে শুরু করার 2.5 সেকেন্ডের মধ্যে হওয়া উচিত।
• প্রথম ইনপুট বিলম্ব (FID)। ইন্টারঅ্যাক্টিভিটি পরিমাপ করে এবং 100 মিলিসেকেন্ডের মধ্যে হওয়া উচিত।
• Cumulative Layout Shift (CLS)। চাক্ষুষ স্থিতিশীলতা পরিমাপ করে এবং 0.1 এর মধ্যে হওয়া উচিত।

পূর্বশর্ত

• ওয়েব ভাইটাল নিবন্ধ
• কমান্ড লাইনের প্রাথমিক জ্ঞান
• কোর ওয়েব ভাইটাল মেট্রিক্স থ্রেশহোল্ড নিবন্ধ সংজ্ঞায়িত করা

আপনি কি শিখবেন

• PageSpeed Insights API দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল পরিমাপ করুন৷
• CrUX API দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল পরিমাপ করুন।

আপনি কি প্রয়োজন হবে

• একটি Google অ্যাকাউন্ট
• একটি কমান্ড লাইন অ্যাক্সেস
• আপনার পছন্দের একটি পাঠ্য সম্পাদক
• আপনার পছন্দের একটি ওয়েব ব্রাউজার
• আপনার পছন্দের একটি URL (এই কোডল্যাবটি https://developers.google.com ব্যবহার করে।)

2. PageSpeed Insights API দিয়ে কোর ওয়েব ভাইটাল পরিমাপ করুন

1. আপনার যদি একটি URL এর ডেস্কটপ সংস্করণের জন্য কর্মক্ষমতা ডেটার প্রয়োজন হয়, তাহলে PageSpeed Insights API থেকে ডেটার জন্য অনুরোধ করুন এবং এটি একটি response.txt ফাইলে সংরক্ষণ করুন:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

আপনার URL দিয়ে YOUR_URL স্থানধারক প্রতিস্থাপন করুন।

API স্ট্রিং এর শেষে, লক্ষ্য করুন যে strategy ক্যোয়ারী প্যারামিটারটি একটি desktop মানতে সেট করা হয়েছে, যা ডেস্কটপ ডেটার জন্য অনুরোধ নির্দিষ্ট করে।

2. আপনার যদি একটি URL এর মোবাইল সংস্করণের জন্য কর্মক্ষমতা ডেটার প্রয়োজন হয়, তাহলে PageSpeed Insights API থেকে ডেটার জন্য অনুরোধ করুন এবং এটি একটি response.txt ফাইলে সংরক্ষণ করুন:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

আপনার URL দিয়ে YOUR_URL স্থানধারক প্রতিস্থাপন করুন।

API স্ট্রিং এর শেষে, লক্ষ্য করুন যে strategy ক্যোয়ারী প্যারামিটার একটি mobile মান সেট করা হয়েছে, যা মোবাইল ডেটার জন্য অনুরোধ নির্দিষ্ট করে।

3. আপনার পাঠ্য সম্পাদকে, 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 প্রপার্টির বিষয়বস্তু খালি থাকলে, ইউআরএলে যথেষ্ট পারফরম্যান্স ডেটা উপলব্ধ থাকে না। এই সমস্যাটি সাধারণত দেখা যায় যখন আপনি কম-ট্রাফিক ওয়েব পৃষ্ঠাগুলি পরীক্ষা করেন।

4. 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 কী পান

1. Google ক্লাউড কনসোলে , Chrome UX অনুসন্ধান করুন এবং তারপরে ড্রপ-ডাউন মেনুতে Chrome UX প্রতিবেদন API নির্বাচন করুন৷
2. Chrome UX Report API পৃষ্ঠায়, Enable এ ক্লিক করুন এবং তারপর Enable বোতামটি একটি পরিচালনা বোতামে পরিবর্তন করার জন্য অপেক্ষা করুন এবং পরিচালনা নির্বাচন করুন।
3. নেভিগেশন মেনুতে, শংসাপত্রে ক্লিক করুন এবং তারপরে শংসাপত্র তৈরি করুন > API কী নির্বাচন করুন এবং API কীটি অনুলিপি করুন।

একটি অনুরোধ করুন

1. আপনার কমান্ড লাইন থেকে, 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 স্থানধারক প্রতিস্থাপন করুন।

সতর্কতা: এই কমান্ডটি উইন্ডোজের জন্য macOS, Linux এবং Git BASH-এ প্রযোজ্য। যদি আপনার মেশিন একটি ভিন্ন অপারেটিং সিস্টেম বা কমান্ড লাইন চালায়, তাহলে আপনাকে কমান্ডটি সামান্য পরিবর্তন করতে হবে। উদাহরণস্বরূপ, আপনি যদি উইন্ডোজে কমান্ড শেল ব্যবহার করেন তবে আপনাকে একক উদ্ধৃতিগুলির পরিবর্তে প্যারামিটারগুলির চারপাশে ডবল কোট ব্যবহার করতে হবে। অভ্যন্তরীণ উদ্ধৃতিগুলি এড়াতে আপনাকে বিদ্যমান দ্বিগুণ উদ্ধৃতিগুলির আগে একটি স্ল্যাশ স্থাপন করতে হবে।

2. আপনার পাঠ্য সম্পাদকে, 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. অভিনন্দন

অভিনন্দন! আপনি PageSpeed Insights API এবং CrUX API দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল পরিমাপ করেছেন৷

আরও জানুন

• PageSpeed Insights API দিয়ে শুরু করুন
• CrUX API ব্যবহার করে
• ওয়েব ভাইটাল