ক্ষেত্রের ওয়েব ভাইটাল পরিমাপের জন্য সর্বোত্তম অনুশীলন

আপনার বর্তমান অ্যানালিটিক্স টুল দিয়ে কিভাবে ওয়েব ভাইটাল পরিমাপ করবেন।

ফিলিপ ওয়ালটন

আপনার পৃষ্ঠাগুলির বাস্তব-বিশ্বের কর্মক্ষমতা পরিমাপ করার এবং রিপোর্ট করার ক্ষমতা থাকা সময়ের সাথে নির্ণয় এবং কর্মক্ষমতা উন্নত করার জন্য গুরুত্বপূর্ণ। ফিল্ড ডেটা ছাড়া, আপনি আপনার সাইটে যে পরিবর্তনগুলি করছেন তা আসলে তাদের পছন্দসই ফলাফল অর্জন করছে কিনা তা নিশ্চিতভাবে জানা অসম্ভব।

অনেক জনপ্রিয় রিয়েল ইউজার মনিটরিং (RUM) অ্যানালিটিক্স প্রোভাইডার ইতিমধ্যেই তাদের টুলে কোর ওয়েব ভাইটাল মেট্রিক্স সমর্থন করে (সেসাথে অন্যান্য অনেক ওয়েব ভাইটাল )। আপনি যদি বর্তমানে এই RUM অ্যানালিটিক্স টুলগুলির মধ্যে একটি ব্যবহার করেন, তাহলে আপনার সাইটের পৃষ্ঠাগুলি প্রস্তাবিত কোর ওয়েব ভাইটাল থ্রেশহোল্ডগুলি কতটা ভালভাবে পূরণ করে এবং ভবিষ্যতে রিগ্রেশন প্রতিরোধ করে তা মূল্যায়ন করতে আপনি দুর্দান্ত আকারে আছেন৷

যদিও আমরা কোর ওয়েব ভাইটাল মেট্রিক্স সমর্থন করে এমন একটি অ্যানালিটিক্স টুল ব্যবহার করার পরামর্শ দিই, আপনি বর্তমানে যে অ্যানালিটিক্স টুলটি ব্যবহার করছেন সেটি যদি সেগুলিকে সমর্থন না করে, তাহলে আপনাকে পরিবর্তন করার প্রয়োজন নেই৷ প্রায় সমস্ত অ্যানালিটিক্স টুল কাস্টম মেট্রিক্স বা ইভেন্টগুলিকে সংজ্ঞায়িত এবং পরিমাপ করার একটি উপায় অফার করে, যার অর্থ হল আপনি সম্ভবত আপনার বর্তমান অ্যানালিটিক্স প্রদানকারীকে ব্যবহার করতে পারেন কোর ওয়েব ভাইটাল মেট্রিক্স পরিমাপ করতে এবং সেগুলিকে আপনার বিদ্যমান অ্যানালিটিক্স রিপোর্ট এবং ড্যাশবোর্ডে যুক্ত করতে৷

এই নির্দেশিকাটি তৃতীয়-পক্ষ বা ইন-হাউস অ্যানালিটিক্স টুলের সাহায্যে কোর ওয়েব ভাইটাল মেট্রিক্স (বা যেকোনো কাস্টম মেট্রিক্স) পরিমাপের সর্বোত্তম অনুশীলন নিয়ে আলোচনা করে। এটি তাদের পরিষেবাতে কোর ওয়েব ভাইটাল সমর্থন যোগ করতে ইচ্ছুক বিশ্লেষণ বিক্রেতাদের জন্য একটি নির্দেশিকা হিসাবেও কাজ করতে পারে।

কাস্টম মেট্রিক্স বা ঘটনা ব্যবহার করুন

উপরে উল্লিখিত হিসাবে, বেশিরভাগ বিশ্লেষণ সরঞ্জাম আপনাকে কাস্টম ডেটা পরিমাপ করতে দেয়। যদি আপনার অ্যানালিটিক্স টুল এটিকে সমর্থন করে, তাহলে আপনি এই মেকানিজম ব্যবহার করে প্রতিটি কোর ওয়েব ভাইটাল মেট্রিক্স পরিমাপ করতে সক্ষম হবেন।

একটি বিশ্লেষণ টুলে কাস্টম মেট্রিক্স বা ইভেন্টগুলি পরিমাপ করা সাধারণত একটি তিন-পদক্ষেপ প্রক্রিয়া:

1. আপনার টুলের অ্যাডমিনে (যদি প্রয়োজন হয়) কাস্টম মেট্রিক সংজ্ঞায়িত করুন বা নিবন্ধন করুন । (দ্রষ্টব্য: সমস্ত বিশ্লেষণ প্রদানকারীর কাস্টম মেট্রিক্সকে সময়ের আগে সংজ্ঞায়িত করার প্রয়োজন হয় না।)
2. আপনার ফ্রন্টএন্ড জাভাস্ক্রিপ্ট কোডে মেট্রিকের মান গণনা করুন।
3. আপনার অ্যানালিটিক্স ব্যাকএন্ডে মেট্রিক মানটি পাঠান, নিশ্চিত করুন যে নাম বা আইডি ধাপ 1 এ সংজ্ঞায়িত করা হয়েছে (আবার প্রয়োজন হলে) ।

ধাপ 1 এবং 3 এর জন্য, আপনি নির্দেশাবলীর জন্য আপনার বিশ্লেষণ টুলের ডকুমেন্টেশন উল্লেখ করতে পারেন। ধাপ 2-এর জন্য আপনি প্রতিটি কোর ওয়েব ভাইটাল মেট্রিক্সের মান গণনা করতে ওয়েব-ভাইটাল জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে পারেন।

নিম্নলিখিত কোড নমুনা দেখায় যে কোডে এই মেট্রিক্সগুলি ট্র্যাক করা এবং একটি বিশ্লেষণ পরিষেবাতে পাঠানো কতটা সহজ।

import {onCLS, onFID, onLCP} from 'web-vitals';

function sendToAnalytics({name, value, id}) {
  const body = JSON.stringify({name, value, id});
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

গড় এড়িয়ে চলুন

এটি একটি গড় গণনা করে একটি পারফরম্যান্স মেট্রিকের জন্য মানগুলির একটি পরিসর যোগ করার জন্য লোভনীয়। গড়গুলি প্রথম নজরে সুবিধাজনক বলে মনে হয়, কারণ সেগুলি প্রচুর পরিমাণে ডেটার একটি পরিপাটি সারাংশ, কিন্তু পৃষ্ঠার কার্যকারিতা ব্যাখ্যা করার জন্য আপনার তাদের উপর নির্ভর করার তাগিদকে প্রতিরোধ করা উচিত৷

গড় সমস্যাযুক্ত কারণ তারা কোনো একক ব্যবহারকারীর অধিবেশন প্রতিনিধিত্ব করে না। ডিস্ট্রিবিউশনের যেকোনও সীমার বহিরাগতরা বিভ্রান্তিকর উপায়ে গড়কে তির্যক হতে পারে।

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

যখনই সম্ভব, গড়ের পরিবর্তে শতাংশের উপর নির্ভর করুন। একটি প্রদত্ত পারফরম্যান্স মেট্রিকের জন্য একটি ডিস্ট্রিবিউশন জুড়ে শতকরা আপনার ওয়েবসাইটের জন্য ব্যবহারকারীর অভিজ্ঞতার সম্পূর্ণ পরিসীমা আরও ভালভাবে বর্ণনা করে। এটি আপনাকে প্রকৃত অভিজ্ঞতার উপসেটগুলিতে ফোকাস করতে দেয়, যা আপনাকে একটি একক মূল্যের চেয়ে বেশি অন্তর্দৃষ্টি দেবে।

আপনি একটি বিতরণ রিপোর্ট করতে পারেন নিশ্চিত করুন

একবার আপনি প্রতিটি Core Web Vitals মেট্রিক্সের জন্য মানগুলি গণনা করার পরে এবং একটি কাস্টম মেট্রিক বা ইভেন্ট ব্যবহার করে সেগুলিকে আপনার বিশ্লেষণ পরিষেবাতে পাঠালে, পরবর্তী পদক্ষেপটি হল সংগ্রহ করা মানগুলি প্রদর্শন করে একটি প্রতিবেদন বা ড্যাশবোর্ড তৈরি করা৷

আপনি প্রস্তাবিত Core Web Vitals থ্রেশহোল্ডগুলি পূরণ করছেন তা নিশ্চিত করতে, 75 তম পার্সেন্টাইলে প্রতিটি মেট্রিকের মান প্রদর্শন করার জন্য আপনার রিপোর্টের প্রয়োজন হবে৷

যদি আপনার অ্যানালিটিক্স টুল একটি অন্তর্নির্মিত বৈশিষ্ট্য হিসাবে কোয়ান্টাইল রিপোর্টিং অফার না করে, তবে আপনি সম্ভবত একটি প্রতিবেদন তৈরি করে ম্যানুয়ালি এই ডেটা পেতে পারেন যা ক্রমবর্ধমান ক্রমে সাজানো প্রতিটি মেট্রিক মান তালিকা করে। একবার এই রিপোর্ট তৈরি হয়ে গেলে, সেই রিপোর্টের সমস্ত মানের সম্পূর্ণ, সাজানো তালিকার 75% ফলাফল সেই মেট্রিকের জন্য 75 তম পার্সেন্টাইল হবে—এবং আপনি আপনার ডেটা যেভাবে ভাগ করুন না কেন এটিই হবে ( ডিভাইসের ধরন, সংযোগের ধরন, দেশ, ইত্যাদি দ্বারা)।

যদি আপনার অ্যানালিটিক টুল আপনাকে ডিফল্টভাবে মেট্রিক-লেভেল রিপোর্টিং গ্রানুলারিটি না দেয়, তাহলে আপনার অ্যানালিটিক্স টুল কাস্টম মাত্রা সমর্থন করলে আপনি সম্ভবত একই ফলাফল পেতে পারেন। আপনি ট্র্যাক করা প্রতিটি পৃথক মেট্রিক দৃষ্টান্তের জন্য একটি অনন্য, কাস্টম মাত্রা মান সেট করে, আপনি যদি রিপোর্ট কনফিগারেশনে কাস্টম মাত্রা অন্তর্ভুক্ত করেন তবে আপনি পৃথক মেট্রিক দৃষ্টান্ত দ্বারা বিভক্ত একটি প্রতিবেদন তৈরি করতে সক্ষম হবেন। যেহেতু প্রতিটি উদাহরণের একটি অনন্য মাত্রা মান থাকবে, তাই কোনো গ্রুপিং ঘটবে না।

ওয়েব ভাইটালস রিপোর্ট এই কৌশলটির একটি উদাহরণ যা Google Analytics ব্যবহার করে। প্রতিবেদনের কোডটি ওপেন সোর্স , তাই বিকাশকারীরা এই বিভাগে বর্ণিত কৌশলগুলির একটি উদাহরণ হিসাবে এটি উল্লেখ করতে পারেন।

সঠিক সময়ে আপনার ডেটা পাঠান

পৃষ্ঠাটি লোড হওয়া শেষ হয়ে গেলে কিছু কার্যক্ষমতার মেট্রিক গণনা করা যেতে পারে, যখন অন্যরা (সিএলএসের মতো) পৃষ্ঠার সমগ্র জীবনকাল বিবেচনা করে—এবং পৃষ্ঠাটি আনলোড করা শুরু হলেই তা চূড়ান্ত।

এটি সমস্যাযুক্ত হতে পারে, যেহেতু beforeunload এবং unload ইভেন্ট উভয়ই নির্ভরযোগ্য নয় (বিশেষ করে মোবাইলে) এবং তাদের ব্যবহারের সুপারিশ করা হয় না (যেহেতু তারা একটি পৃষ্ঠাকে ব্যাক-ফরওয়ার্ড ক্যাশের জন্য যোগ্য হতে বাধা দিতে পারে)।

একটি পৃষ্ঠার পুরো জীবনকাল ট্র্যাক করে এমন মেট্রিকগুলির জন্য, visibilitychange ইভেন্টের সময় মেট্রিকের বর্তমান মান যাই হোক না কেন, যখনই পৃষ্ঠার দৃশ্যমানতার অবস্থা hidden অবস্থায় পরিবর্তিত হয় তখন পাঠানো ভাল। এর কারণ হল—একবার পৃষ্ঠার দৃশ্যমানতার অবস্থা hidden অবস্থায় পরিবর্তিত হলে—সেই পৃষ্ঠার কোনো স্ক্রিপ্ট আবার চালানোর জন্য কোনো গ্যারান্টি নেই। এটি বিশেষ করে মোবাইল অপারেটিং সিস্টেমের ক্ষেত্রে সত্য যেখানে ব্রাউজার অ্যাপটি নিজেই কোনো পৃষ্ঠা কলব্যাক ছাড়াই বন্ধ করা যেতে পারে।

নোট করুন যে মোবাইল অপারেটিং সিস্টেমগুলি সাধারণত ট্যাব স্যুইচ করার সময়, অ্যাপ স্যুইচ করার সময় বা ব্রাউজার অ্যাপটি নিজেই বন্ধ করার সময় visibilitychange ইভেন্টটি ফায়ার করে। একটি ট্যাব বন্ধ করার সময় বা একটি নতুন পৃষ্ঠায় নেভিগেট করার সময় তারা visibilitychange ইভেন্টটিকেও ফায়ার করে। এটি visibilitychange ইভেন্টটিকে unload বা beforeunload ইভেন্টের চেয়ে অনেক বেশি নির্ভরযোগ্য করে তোলে।

সময়ের সাথে সাথে কর্মক্ষমতা নিরীক্ষণ করুন

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

আপনার পরিবর্তন সংস্করণ

পরিবর্তনগুলি ট্র্যাক করার জন্য একটি নিষ্পাপ (এবং শেষ পর্যন্ত অবিশ্বস্ত) পদ্ধতি হল উত্পাদনে পরিবর্তনগুলি স্থাপন করা এবং তারপরে ধরে নেওয়া যে স্থাপনার তারিখের পরে প্রাপ্ত সমস্ত মেট্রিকগুলি নতুন সাইটের সাথে মিলে যায় এবং স্থাপনার তারিখের আগে প্রাপ্ত সমস্ত মেট্রিকগুলি পুরানো সাইটের সাথে মিলে যায়৷ যাইহোক, যেকোন সংখ্যক কারণ (HTTP, পরিষেবা কর্মী, বা CDN স্তরে ক্যাশিং সহ) এটিকে কাজ করা থেকে বাধা দিতে পারে।

একটি আরও ভাল পদ্ধতি হল প্রতিটি স্থাপন করা পরিবর্তনের জন্য একটি অনন্য সংস্করণ তৈরি করা এবং তারপর আপনার বিশ্লেষণ টুলে সেই সংস্করণটি ট্র্যাক করা। বেশিরভাগ বিশ্লেষণ সরঞ্জাম একটি সংস্করণ সেট করতে সমর্থন করে। যদি আপনার না হয়, আপনি একটি কাস্টম মাত্রা তৈরি করতে পারেন এবং সেই মাত্রাটি আপনার স্থাপন করা সংস্করণে সেট করতে পারেন।

পরীক্ষা চালান

আপনি একই সময়ে একাধিক সংস্করণ (বা পরীক্ষা) ট্র্যাক করে সংস্করণকে আরও এক ধাপ এগিয়ে নিতে পারেন।

যদি আপনার অ্যানালিটিক্স টুল আপনাকে পরীক্ষা গোষ্ঠী সংজ্ঞায়িত করতে দেয়, তাহলে সেই বৈশিষ্ট্যটি ব্যবহার করুন। অন্যথায়, আপনার প্রতিটি মেট্রিক মান আপনার প্রতিবেদনে একটি নির্দিষ্ট পরীক্ষা গোষ্ঠীর সাথে যুক্ত হতে পারে তা নিশ্চিত করতে আপনি কাস্টম মাত্রা ব্যবহার করতে পারেন।

আপনার বিশ্লেষণে পরীক্ষা-নিরীক্ষার মাধ্যমে, আপনি আপনার ব্যবহারকারীদের একটি উপসেটে একটি পরীক্ষামূলক পরিবর্তন রোল আউট করতে পারেন এবং সেই পরিবর্তনের কর্মক্ষমতাকে নিয়ন্ত্রণ গোষ্ঠীর ব্যবহারকারীদের কর্মক্ষমতার সাথে তুলনা করতে পারেন। একবার আপনি আত্মবিশ্বাসী হন যে একটি পরিবর্তন প্রকৃতপক্ষে কর্মক্ষমতা উন্নত করে, আপনি এটি সমস্ত ব্যবহারকারীর কাছে রোল আউট করতে পারেন।

পরিমাপ কর্মক্ষমতা প্রভাবিত না নিশ্চিত করুন

বাস্তব ব্যবহারকারীদের কর্মক্ষমতা পরিমাপ করার সময়, এটা খুবই গুরুত্বপূর্ণ যে আপনি যে কোনো পারফরম্যান্স পরিমাপ কোড চালাচ্ছেন তা আপনার পৃষ্ঠার কর্মক্ষমতাকে নেতিবাচকভাবে প্রভাবিত করে না। যদি এটি হয়ে থাকে, তাহলে আপনার কার্যক্ষমতা কীভাবে আপনার ব্যবসাকে প্রভাবিত করে সে সম্পর্কে আপনি যে কোনো সিদ্ধান্তে আঁকতে চেষ্টা করেন তা অবিশ্বস্ত হবে, কারণ আপনি কখনই জানতে পারবেন না যে বিশ্লেষণ কোডের উপস্থিতি সবচেয়ে বেশি নেতিবাচক প্রভাব ফেলছে কিনা।

আপনার উত্পাদন সাইটে RUM বিশ্লেষণ কোড স্থাপন করার সময় সর্বদা এই নীতিগুলি অনুসরণ করুন:

আপনার বিশ্লেষণ বিলম্বিত

অ্যানালিটিক্স কোড সর্বদা একটি অ্যাসিঙ্ক্রোনাস, নন-ব্লকিং উপায়ে লোড করা উচিত এবং সাধারণত এটি শেষ লোড হওয়া উচিত। আপনি যদি আপনার অ্যানালিটিক্স কোড ব্লকিং উপায়ে লোড করেন, তাহলে এটি LCP-কে নেতিবাচকভাবে প্রভাবিত করতে পারে।

কোর ওয়েব ভাইটাল মেট্রিক্স পরিমাপ করার জন্য ব্যবহৃত সমস্ত API বিশেষভাবে অ্যাসিঙ্ক্রোনাস এবং বিলম্বিত স্ক্রিপ্ট লোডিং ( buffered পতাকার মাধ্যমে) সমর্থন করার জন্য ডিজাইন করা হয়েছিল, তাই আপনার স্ক্রিপ্টগুলি তাড়াতাড়ি লোড করার জন্য তাড়াহুড়ো করার দরকার নেই।

ইভেন্টে আপনি একটি মেট্রিক পরিমাপ করছেন যা পৃষ্ঠা লোডের টাইমলাইনে পরে গণনা করা যাবে না, আপনার কেবলমাত্র সেই কোডটি ইনলাইন করা উচিত যা আপনার নথির <head> এ প্রথম দিকে চলতে হবে (তাই এটি একটি রেন্ডার-ব্লকিং অনুরোধ নয়) এবং বাকি পিছিয়ে দিন। আপনার সমস্ত বিশ্লেষণ তাড়াতাড়ি লোড করবেন না কারণ শুধুমাত্র একটি একক মেট্রিকের জন্য এটি প্রয়োজন৷

দীর্ঘ কাজ তৈরি করবেন না

অ্যানালিটিক্স কোড প্রায়শই ব্যবহারকারীর ইনপুটের প্রতিক্রিয়া হিসাবে চলে, কিন্তু যদি আপনার বিশ্লেষণ কোড প্রচুর পরিমাণে DOM পরিমাপ পরিচালনা করে বা অন্যান্য প্রসেসর-নিবিড় API ব্যবহার করে তাহলে বিশ্লেষণ কোড নিজেই দুর্বল ইনপুট প্রতিক্রিয়া সৃষ্টি করতে পারে। উপরন্তু, যদি আপনার অ্যানালিটিক্স কোড ধারণকারী জাভাস্ক্রিপ্ট ফাইলটি বড় হয়, তাহলে সেই ফাইলটি কার্যকর করা মূল থ্রেডটিকে ব্লক করতে পারে এবং নেতিবাচকভাবে ফার্স্ট ইনপুট বিলম্ব (FID) বা ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) কে প্রভাবিত করতে পারে।

নন-ব্লকিং API ব্যবহার করুন

sendBeacon() এবং requestIdleCallback() এর মতো APIগুলি বিশেষভাবে অ-সমালোচনামূলক কাজগুলিকে এমনভাবে চালানোর জন্য ডিজাইন করা হয়েছে যা ব্যবহারকারী-সমালোচনামূলক কাজগুলিকে ব্লক করে না।

এই APIগুলি একটি RUM বিশ্লেষণ লাইব্রেরিতে ব্যবহার করার জন্য দুর্দান্ত সরঞ্জাম।

সাধারণভাবে, সমস্ত অ্যানালিটিক্স বীকন sendBeacon() API (যদি পাওয়া যায়) ব্যবহার করে পাঠানো উচিত এবং নিষ্ক্রিয় সময়ের মধ্যে সমস্ত প্যাসিভ অ্যানালিটিক্স পরিমাপ কোড চালানো উচিত।

আপনার যা প্রয়োজন তার চেয়ে বেশি ট্র্যাক করবেন না

ব্রাউজারটি প্রচুর কর্মক্ষমতা ডেটা প্রকাশ করে, কিন্তু শুধুমাত্র ডেটা উপলব্ধ হওয়ার অর্থ এই নয় যে আপনি এটি রেকর্ড করুন এবং আপনার বিশ্লেষণ সার্ভারে পাঠান।

উদাহরণস্বরূপ, রিসোর্স টাইমিং API আপনার পৃষ্ঠায় লোড হওয়া প্রতিটি একক সংস্থানের জন্য বিশদ সময় ডেটা সরবরাহ করে। যাইহোক, এটি অসম্ভাব্য যে সেই সমস্ত ডেটা অগত্যা বা রিসোর্স লোড কর্মক্ষমতা উন্নত করতে কার্যকর হবে।

সংক্ষেপে, শুধুমাত্র ডেটা ট্র্যাক করবেন না কারণ এটি সেখানে আছে, নিশ্চিত করুন যে ডেটা ট্র্যাক করার সংস্থানগুলি ব্যবহার করার আগে ব্যবহার করা হবে।