Web Vitals

Philip Walton

প্রকাশিত: মে 4, 2020

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

ওভারভিউ

Web Vitals হল Google-এর একটি উদ্যোগ যা ওয়েবে একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য প্রয়োজনীয় গুণমানের সংকেতের জন্য একীভূত নির্দেশিকা প্রদান করে।

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

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

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

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

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

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

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

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

জীবনচক্র

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

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

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

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

• LCP : স্থিতিশীল
• CLS : স্থিতিশীল
• INP : স্থিতিশীল

পরীক্ষামূলক

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

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

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

মুলতুবি

যখন Chrome টিম নির্ধারণ করে যে একটি পরীক্ষামূলক মেট্রিক যথেষ্ট প্রতিক্রিয়া পেয়েছে এবং এর কার্যকারিতা প্রমাণ করেছে, তখন এটি একটি মুলতুবি মেট্রিক হয়ে যায়। উদাহরণস্বরূপ, 2023 সালে INP পরীক্ষামূলক থেকে মুলতুবি অবস্থায় উন্নীত হয়েছিল অবশেষে FID অবসর নেওয়ার অভিপ্রায়ে।

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

স্থিতিশীল

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

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

কোর ওয়েব ভাইটাল পরিমাপ এবং রিপোর্ট করার সরঞ্জাম

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

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

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

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

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

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

সমস্ত কোর ওয়েব ভাইটাল পরিমাপ করার সবচেয়ে সহজ উপায় হল ওয়েব-ভাইটালস জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা, অন্তর্নিহিত ওয়েব APIগুলির চারপাশে একটি ছোট, উৎপাদন-প্রস্তুত মোড়ক যা প্রতিটি মেট্রিককে এমনভাবে পরিমাপ করে যা সঠিকভাবে মেলে যে কীভাবে তারা রিপোর্ট করেছে আগে তালিকাভুক্ত গুগল টুল.

ওয়েব-ভাইটাল লাইব্রেরির সাহায্যে, প্রতিটি মেট্রিক পরিমাপ একটি একক ফাংশন কল করে করা যেতে পারে। সম্পূর্ণ ব্যবহার এবং API বিবরণের জন্য ডকুমেন্টেশন দেখুন।

import {onCLS, onINP, 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);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

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

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

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

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

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

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

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

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

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

যদিও ল্যাব পরিমাপ মহান অভিজ্ঞতা প্রদানের একটি অপরিহার্য অংশ, এটি ক্ষেত্রের পরিমাপের বিকল্প নয়।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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