ওয়েব-ভাইটাল লাইব্রেরি দিয়ে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল পরিমাপ করুন

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

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

Google সুপারিশ করে যে আপনি কোর ওয়েব ভাইটালগুলি পরিমাপ করুন এবং সেগুলি মোবাইল এবং ডেস্কটপ ডিভাইসগুলিতে ভাগ করা পৃষ্ঠা লোডের 75 তম শতাংশের মধ্যে পড়ে৷

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

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

পূর্বশর্ত

আপনি কি করবেন

  • একটি ওয়েব পৃষ্ঠায় web-vitals লাইব্রেরি যোগ করুন।
  • গুগল ক্রোম ডেভেলপার টুলে ওয়েব পেজের মূল ওয়েব ভাইটাল পরিমাপ করুন।
  • ঐচ্ছিক: Google Analytics-এ ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটাল রিপোর্ট করুন।

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

  • আপনার পছন্দের একটি পাঠ্য সম্পাদক, যেমন সাবলাইম টেক্সট বা ভিজ্যুয়াল স্টুডিও কোড
  • একটি Chromium-ভিত্তিক ওয়েব ব্রাউজার, যেমন Google Chrome বা Microsoft Edge (আপনার কেন একটি Chromium-ভিত্তিক ওয়েব ব্রাউজার প্রয়োজন সে সম্পর্কে আরও তথ্যের জন্য, ব্রাউজার সমর্থন দেখুন।)

2. একটি ওয়েব পৃষ্ঠায় ওয়েব-ভাইটাল লাইব্রেরি যোগ করুন

  1. আপনার টেক্সট এডিটরে, একটি web-vitals-test.html ফাইল তৈরি করুন এবং তারপর ফাইলটিতে এই HTML কোডটি লিখুন:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

এই কোডটি ওয়েব পৃষ্ঠা তৈরি করে যা আপনি এই কোডল্যাবের জন্য ব্যবহার করেন।

  1. HTML কোডের <body> এলিমেন্টে দ্বিতীয় <p> এলিমেন্টের পরে, এই মডিউল স্ক্রিপ্টটি লিখুন এবং তারপর ফাইলটি সংরক্ষণ করুন:

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

এই মডিউল স্ক্রিপ্ট একটি বিষয়বস্তু বিতরণ নেটওয়ার্ক থেকে web-vitals লাইব্রেরি লোড করে। এখন আপনার ফাইলটি এই কোড স্নিপেটের মত দেখাচ্ছে:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

সমস্ত আধুনিক ব্রাউজার মডিউল স্ক্রিপ্ট সমর্থন করে, যেগুলি কোডের জন্য উপযুক্ত যা শুধুমাত্র নতুন API ব্যবহার করে, যেমন কোর ওয়েব ভাইটাল পরিমাপের জন্য প্রয়োজনীয়। যে ব্রাউজারগুলি মডিউল সমর্থন করে না বা কোর ওয়েব ভাইটালস API গুলি এই স্ক্রিপ্টটি লোড করার চেষ্টা করবে না৷

3. গুগল ক্রোম ডেভেলপার টুলে ওয়েব পেজের মূল ওয়েব ভাইটাল পরিমাপ করুন

  1. আপনার ওয়েব ব্রাউজারে, সংরক্ষিত ফাইলটি খুলুন।
  2. ওয়েব পৃষ্ঠায় ডান-ক্লিক করুন এবং তারপর ডায়ালগে পরিদর্শনে ক্লিক করুন।
  3. গুগল ক্রোম ডেভেলপার টুলস প্যানে, কনসোল ট্যাবে ক্লিক করুন এবং তারপরে কনসোল সেটিংস নির্বাচন করুন 6a9a7d8992edcd2c.png > লগ সংরক্ষণ করুন । এই সেটিং নিশ্চিত করে যে আপনি যখন ওয়েব পৃষ্ঠা রিফ্রেশ করেন তখন লগগুলি বজায় থাকে৷

74044d63a2f32916.png

  1. নেটওয়ার্ক ট্যাবে ক্লিক করুন এবং তারপরে ক্লিক করুন c5262a3662ee288c.png থ্রোটলিং ড্রপ-ডাউন মেনুর প্রসারিত তীর এবং স্লো 3G নির্বাচন করুন। এই সেটিংটি একটি ধীর নেটওয়ার্ক সংযোগ অনুকরণ করে৷

থ্রটলিং ড্রপ-ডাউন মেনুতে নির্বাচিত ধীর 3G সেটিং সহ নেটওয়ার্ক ট্যাব।

  1. কনসোল ট্যাবে ফিরে যান এবং তারপরে ওয়েব পৃষ্ঠার যে কোনও জায়গায় ক্লিক করুন৷ LCP এবং FID মেট্রিক্স কনসোল ট্যাবে প্রিন্ট করে।

LCP এবং FID মেট্রিক্স প্রিন্ট করার পরে কনসোল ট্যাব।

  1. ওয়েব পেজ রিফ্রেশ করুন. কনসোল ট্যাবে CLS মেট্রিক প্রিন্ট করে।

CLS মেট্রিক প্রিন্টের পরে কনসোল ট্যাব।

  1. নেটওয়ার্ক ট্যাবে ফিরে যান এবং তারপরে ক্লিক করুন c5262a3662ee288c.png থ্রটলিং ড্রপ-ডাউন মেনুর প্রসারিত তীর এবং দ্রুত 3G নির্বাচন করুন। এই সেটিংটি একটি দ্রুত নেটওয়ার্ক সংযোগ অনুকরণ করে৷
  2. কনসোল ট্যাবে ফিরে যান, এবং তারপরে ওয়েব পৃষ্ঠার যে কোনও জায়গায় ক্লিক করুন৷ এলসিপি এবং এফআইডি মেট্রিক্স আবার কনসোল ট্যাবে মুদ্রণ করে, তবে সেগুলি আগের থেকে উন্নত হয়েছে৷

LCP এবং FID মেট্রিক্স আবার প্রিন্ট করার পরে কনসোল ট্যাব।

  1. ওয়েব পেজ রিফ্রেশ করুন. CLS মেট্রিক আবার কনসোল ট্যাবে প্রিন্ট করে, কিন্তু এটি আগের থেকে উন্নত হয়েছে।

CLS মেট্রিক আবার প্রিন্ট করার পরে কনসোল ট্যাব।

4. ঐচ্ছিক: ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটালগুলি Google Analytics-এ রিপোর্ট করুন৷

  • মডিউল স্ক্রিপ্টের আমদানি বিবৃতির পরে web-vitals-test.html ফাইলটিতে, এই sendToGoogleAnalytics() ফাংশনটি প্রবেশ করান এবং তারপর ফাইলটি সংরক্ষণ করুন:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

এই কোডটি Google Analytics-এ কোর ওয়েব ভাইটাল পাঠায়, যেখানে আপনি সেগুলিকে টপ ইভেন্ট রিপোর্টে দেখতে পারেন:

Google Analytics-এ শীর্ষ ইভেন্ট রিপোর্ট

এখন আপনার ফাইলটি এই কোড স্নিপেটের মত দেখাচ্ছে:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. অভিনন্দন

অভিনন্দন! আপনি web-vitals ভাইটাল লাইব্রেরির সাথে একটি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটালগুলি পরিমাপ এবং রিপোর্ট করতে শিখেছেন৷

আরও জানুন