Web Vitals

Philip Walton

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

কোর ওয়েব ভাইটাল

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

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

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

এই প্রতিটি মেট্রিকের জন্য, আপনি আপনার বেশিরভাগ ব্যবহারকারীর জন্য প্রস্তাবিত লক্ষ্যে পৌঁছেছেন তা নিশ্চিত করতে, পরিমাপ করার জন্য একটি ভাল থ্রেশহোল্ড হল পৃষ্ঠা লোডের 75 তম শতাংশ , যা মোবাইল এবং ডেস্কটপ ডিভাইস জুড়ে বিভক্ত।

যে টুলগুলি কোর ওয়েব ভাইটাল সম্মতি মূল্যায়ন করে তাদের একটি পৃষ্ঠা অনুগত বিবেচনা করা উচিত যদি এটি এই তিনটি মেট্রিকের প্রতিটির জন্য 75 তম শতাংশে প্রস্তাবিত লক্ষ্য পূরণ করে।

জীবনচক্র

কোর ওয়েব ভাইটালস ট্র্যাকের মেট্রিক্স তিনটি পর্যায় নিয়ে গঠিত একটি জীবনচক্রের মধ্য দিয়ে যায়: পরীক্ষামূলক, মুলতুবি এবং স্থিতিশীল।

প্রতিটি ধাপ ডেভেলপারদের প্রতিটি মেট্রিক সম্পর্কে তাদের কীভাবে চিন্তা করা উচিত তা সংকেত দেওয়ার জন্য ডিজাইন করা হয়েছে:

• পরীক্ষামূলক মেট্রিক্স হল সম্ভাব্য মূল ওয়েব ভাইটাল যা এখনও পরীক্ষা এবং সম্প্রদায়ের প্রতিক্রিয়ার উপর নির্ভর করে উল্লেখযোগ্য পরিবর্তনের মধ্য দিয়ে যেতে পারে।
• মুলতুবি থাকা মেট্রিক্স হল ভবিষ্যত কোর ওয়েব ভাইটাল যা পরীক্ষা এবং প্রতিক্রিয়ার পর্যায় অতিক্রম করেছে এবং স্থিতিশীল হওয়ার জন্য একটি সুনির্দিষ্ট টাইমলাইন রয়েছে।
• স্থিতিশীল মেট্রিক্স হল কোর ওয়েব ভাইটালগুলির বর্তমান সেট যেটিকে Chrome দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতার জন্য অপরিহার্য বলে মনে করে।

কোর ওয়েব ভাইটালগুলি নিম্নলিখিত জীবনচক্র পর্যায়ে রয়েছে:

• LCP : স্থিতিশীল
• FID : স্থিতিশীল
• CLS : স্থিতিশীল
• নেক্সট পেইন্টের সাথে মিথস্ক্রিয়া (INP) : মুলতুবি

INP-এর বিকাশ সম্পর্কে আরও তথ্যের জন্য, নেক্সট পেইন্টে অ্যাডভান্সিং ইন্টারঅ্যাকশন দেখুন।

পরীক্ষামূলক

যখন একটি মেট্রিক প্রাথমিকভাবে বিকশিত হয় এবং বাস্তুতন্ত্রে প্রবেশ করে, তখন এটি একটি পরীক্ষামূলক মেট্রিক হিসাবে বিবেচিত হয়।

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

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

বিচারাধীন

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

স্থিতিশীল

যখন একটি কোর ওয়েব ভাইটাল প্রার্থী মেট্রিক চূড়ান্ত করা হয়, তখন এটি একটি স্থিতিশীল মেট্রিক হয়ে যায়। এটি যখন মেট্রিক একটি কোর ওয়েব ভাইটাল হয়ে উঠতে পারে।

স্থিতিশীল মেট্রিক্স সক্রিয়ভাবে সমর্থিত, এবং বাগ সংশোধন এবং সংজ্ঞা পরিবর্তনের বিষয় হতে পারে। স্থিতিশীল কোর ওয়েব ভাইটাল মেট্রিক্স বছরে একবারের বেশি পরিবর্তন হবে না। কোর ওয়েব ভাইটাল-এ যেকোন পরিবর্তন মেট্রিকের অফিসিয়াল ডকুমেন্টেশনের পাশাপাশি মেট্রিকের চেঞ্জলগে স্পষ্টভাবে জানানো হবে। কোর ওয়েব ভাইটালগুলিও যেকোন মূল্যায়নে অন্তর্ভুক্ত করা হয়।

মূল পয়েন্ট: স্থিতিশীল মেট্রিক্স অগত্যা স্থায়ী হয় না। একটি স্থিতিশীল মেট্রিক অবসর নেওয়া যেতে পারে এবং অন্য একটি মেট্রিক দ্বারা প্রতিস্থাপিত হতে পারে যা সমস্যা ক্ষেত্রটিকে আরও কার্যকরভাবে সম্বোধন করে।

কোর ওয়েব ভাইটাল পরিমাপ করুন এবং রিপোর্ট করুন

Google বিশ্বাস করে যে কোর ওয়েব ভাইটালগুলি সমস্ত ওয়েব অভিজ্ঞতার জন্য গুরুত্বপূর্ণ৷ ফলস্বরূপ, এটি তার সমস্ত জনপ্রিয় সরঞ্জামগুলিতে এই মেট্রিক্সগুলিকে সারফেস করতে প্রতিশ্রুতিবদ্ধ৷ নিম্নলিখিত বিভাগগুলি বিশদ বিবরণ দেয় কোন টুলগুলি কোর ওয়েব ভাইটালগুলিকে সমর্থন করে৷

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

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

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

জাভাস্ক্রিপ্টে মূল ওয়েব ভাইটাল পরিমাপ করুন

প্রতিটি মূল ওয়েব ভাইটাল জাভাস্ক্রিপ্টে স্ট্যান্ডার্ড ওয়েব API ব্যবহার করে পরিমাপ করা যেতে পারে।

সমস্ত কোর ওয়েব ভাইটাল পরিমাপ করার সবচেয়ে সহজ উপায় হল web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা, একটি ছোট, উৎপাদন-প্রস্তুত API র‍্যাপার যা প্রতিটি মেট্রিককে এমনভাবে পরিমাপ করে যা Google টুলগুলি কীভাবে তাদের রিপোর্ট করে তার সাথে সঠিকভাবে মেলে।

web-vitals লাইব্রেরির সাথে, প্রতিটি মেট্রিক পরিমাপ করা একটি একক ফাংশন কল করার মতোই সহজ (সম্পূর্ণ ব্যবহার এবং API বিবরণের জন্য ডকুমেন্টেশন দেখুন):

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 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);

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

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

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

এছাড়াও আপনি ওয়েব ভাইটালস ক্রোম এক্সটেনশন ব্যবহার করে কোনো কোড না লিখে প্রতিটি মূল ওয়েব ভাইটাল সম্পর্কে রিপোর্ট করতে পারেন। এই এক্সটেনশনটি এই প্রতিটি মেট্রিক্স পরিমাপ করতে web-vitals লাইব্রেরি ব্যবহার করে এবং ব্যবহারকারীরা যখন ওয়েব ব্রাউজ করে তখন তাদের কাছে প্রদর্শন করে।

এই এক্সটেনশনটি আপনার নিজের সাইট, আপনার প্রতিযোগীর সাইট এবং বৃহৎ আকারে ওয়েবের পারফরম্যান্স বোঝার জন্য সহায়ক হতে পারে।

বিকাশকারীরা যারা অন্তর্নিহিত ওয়েব API ব্যবহার করে সরাসরি এই মেট্রিকগুলি পরিমাপ করতে পছন্দ করেন তারা পরিবর্তে বাস্তবায়নের বিশদ বিবরণের জন্য এই মেট্রিক গাইডগুলি ব্যবহার করতে পারেন:

• জাভাস্ক্রিপ্টে LCP পরিমাপ করুন
• জাভাস্ক্রিপ্টে FID পরিমাপ করুন
• জাভাস্ক্রিপ্টে CLS পরিমাপ করুন

জনপ্রিয় অ্যানালিটিক্স পরিষেবা বা আপনার নিজস্ব ইন-হাউস অ্যানালিটিক্স টুল ব্যবহার করে এই মেট্রিকগুলি পরিমাপ করার বিষয়ে অতিরিক্ত নির্দেশনার জন্য, ক্ষেত্রের ওয়েব ভাইটালগুলি পরিমাপের জন্য সেরা অনুশীলনগুলি দেখুন৷

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

যদিও সমস্ত মূল ওয়েব ভাইটাল, প্রথম এবং সর্বাগ্রে, ফিল্ড মেট্রিক্স, তাদের মধ্যে অনেকগুলি ল্যাবে পরিমাপযোগ্য।

ল্যাব পরিমাপ উন্নয়নের সময় বৈশিষ্ট্যগুলির কার্যকারিতা পরীক্ষা করার সর্বোত্তম উপায়। এটি হওয়ার আগে পারফরম্যান্স রিগ্রেশন ধরার সর্বোত্তম উপায়।

একটি ল্যাব পরিবেশে কোর ওয়েব ভাইটাল পরিমাপ করতে নিম্নলিখিত সরঞ্জামগুলি ব্যবহার করা যেতে পারে:

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

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

আপনার স্কোর উন্নত করার জন্য সুপারিশ

নিম্নলিখিত নির্দেশিকাগুলি প্রতিটি মূল ওয়েব ভাইটালগুলির জন্য আপনার পৃষ্ঠাগুলিকে কীভাবে অপ্টিমাইজ করতে হয় তার জন্য নির্দিষ্ট সুপারিশগুলি অফার করে:

• LCP অপ্টিমাইজ করুন
• FID অপ্টিমাইজ করুন
• সিএলএস অপ্টিমাইজ করুন

অন্যান্য ওয়েব ভাইটাল

যদিও কোর ওয়েব ভাইটালগুলি একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা বোঝার এবং প্রদান করার জন্য গুরুত্বপূর্ণ মেট্রিক, এছাড়াও অন্যান্য গুরুত্বপূর্ণ মেট্রিক্স রয়েছে।

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

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

একইভাবে, টোটাল ব্লকিং টাইম (TBT) এর মতো একটি মেট্রিক হল সম্ভাব্য ইন্টারঅ্যাক্টিভিটি সমস্যাগুলি ধরা এবং নির্ণয়ের জন্য একটি অত্যাবশ্যক ল্যাব মেট্রিক যা FID এবং INP কে প্রভাবিত করতে পারে। যাইহোক, এটি কোর ওয়েব ভাইটাল সেটের অংশ নয় কারণ এটি ক্ষেত্র-পরিমাপযোগ্য নয় এবং ব্যবহারকারী-কেন্দ্রিক ফলাফল প্রতিফলিত করে না।

ওয়েব ভাইটালগুলিতে পরিবর্তন

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

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

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

সমস্ত ওয়েব ভাইটালের জন্য, পরিবর্তনগুলি এই পাবলিক চেঞ্জলগে নথিভুক্ত করা হয়।