Core Web Vitals: পরিমাপ ও উন্নত করার উপায়

আপনার ব্যবহারকারীরা দ্রুত ও প্রতিক্রিয়াশীল পেজ আশা করেন। Google-এর Core Web Vitals (CWV) সেই অভিজ্ঞতাকে পরিমাপ করে: Largest Contentful Paint (LCP) লোডিং পরিমাপ করে, Interaction to Next Paint (INP) ইন্টারঅ্যাক্টিভিটি পরিমাপ করে এবং Cumulative Layout Shift (CLS) ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। খারাপ স্কোর ব্যবহারকারীর সন্তুষ্টি কমায় এবং সার্চ র‍্যাঙ্কিংকে প্রভাবিত করতে পারে। এই গাইডে দেখানো হয়েছে কীভাবে CWV সঠিকভাবে পরিমাপ করবেন এবং ব্যবহারিক পদক্ষেপে সাধারণ সমস্যাগুলো ঠিক করবেন।

Core Web Vitals কী?

Core Web Vitals হলো তিনটি মেট্রিক যা বাস্তব-বিশ্বের ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে:

• LCP: সবচেয়ে বড় কন্টেন্ট এলিমেন্ট (ছবি, টেক্সট ব্লক) রেন্ডার হতে যে সময় লাগে। ভালো: ≤2.5s।
• INP: ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে পরবর্তী পেইন্ট পর্যন্ত সময়। ভালো: ≤200ms।
• CLS: লেআউট শিফট স্কোরের যোগফল। ভালো: ≤0.1।

এই থ্রেশহোল্ডগুলো পেজ লোডের 75তম পার্সেন্টাইলে মূল্যায়ন করা হয়, অর্থাৎ 75% ভিজিট লক্ষ্যমাত্রা পূরণ করা উচিত।

Core Web Vitals কীভাবে পরিমাপ করবেন

আপনার ল্যাব এবং ফিল্ড উভয় ডেটা প্রয়োজন। ল্যাব টুল শর্ত অনুকরণ করে; ফিল্ড ডেটা আসে বাস্তব ব্যবহারকারীদের কাছ থেকে।

ল্যাব টুল

• Chrome DevTools-এ Lighthouse: পারফরম্যান্স, অ্যাক্সেসিবিলিটি এবং SEO-এর জন্য অডিট চালান। এটি ল্যাব CWV স্কোর এবং উন্নতির সুযোগ প্রদান করে।
• WebPageTest: কাস্টম নেটওয়ার্ক শর্ত এবং ডিভাইস এমুলেশনসহ উন্নত পরীক্ষা।

ফিল্ড টুল

• Chrome UX Report (CrUX): বাস্তব-ব্যবহারকারীর মেট্রিকের পাবলিক ডেটাসেট। PageSpeed Insights বা BigQuery-এর মাধ্যমে অ্যাক্সেস করুন।
• web-vitals JavaScript লাইব্রেরি: প্রকৃত ব্যবহারকারীদের কাছ থেকে CWV সংগ্রহ করুন এবং আপনার অ্যানালিটিক্সে পাঠান।

প্রকৃত সমস্যা চিহ্নিত করতে ফিল্ড ডেটা ব্যবহার করুন, তারপর ডিবাগ এবং ফিক্স যাচাই করতে ল্যাব টুল ব্যবহার করুন।

Largest Contentful Paint (LCP) উন্নত করা

LCP প্রায়শই হিরো ইমেজ বা প্রধান শিরোনাম হয়। এই এলিমেন্টগুলো অপটিমাইজ করুন:

1. ছবি অপটিমাইজ করুন: ছবি কম্প্রেস করুন, WebP বা AVIF-এর মতো আধুনিক ফরম্যাট ব্যবহার করুন এবং srcset দিয়ে রেসপন্সিভ সাইজ পরিবেশন করুন।
2. গুরুত্বপূর্ণ রিসোর্স প্রিলোড করুন: LCP ছবি বা ফন্টের জন্য <link rel="preload"> যোগ করুন।
3. সার্ভার রেসপন্স টাইম কমান: ক্যাশিং, CDN এবং দক্ষ ব্যাকএন্ড কোড ব্যবহার করুন।
4. রেন্ডার-ব্লকিং রিসোর্স দূর করুন: নন-ক্রিটিক্যাল CSS/JS ডিফার করুন, ক্রিটিক্যাল CSS ইনলাইন করুন।

উদাহরণ: আপনার LCP ছবি প্রিলোড করুন:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

এছাড়াও গুরুত্ব বোঝাতে <img> ট্যাগে fetchpriority="high" সেট করুন।

Interaction to Next Paint (INP) উন্নত করা

INP ক্লিক, ট্যাপ এবং কীবোর্ড ইনপুটে প্রতিক্রিয়াশীলতা পরিমাপ করে। দীর্ঘ টাস্ক মেইন থ্রেড ব্লক করে। INP উন্নত করতে:

• দীর্ঘ টাস্ক ভাগ করুন: ব্রাউজারকে ইল্ড করতে setTimeout বা requestIdleCallback ব্যবহার করুন।
• ইভেন্ট হ্যান্ডলার অপটিমাইজ করুন: ব্যয়বহুল অপারেশন ডিবাউন্স বা থ্রটল করুন।
• JavaScript কমান: কোড-স্প্লিট, ট্রি-শেক এবং নন-ক্রিটিক্যাল স্ক্রিপ্ট ডিফার করুন।
• ওয়েব ওয়ার্কার ব্যবহার করুন CPU-ইনটেনসিভ কাজের জন্য।

উদাহরণ: মেইন থ্রেডে ইল্ড করুন:

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // Do some work
  await yieldToMain();
  // Continue
}

Cumulative Layout Shift (CLS) উন্নত করা

CLS ঘটে যখন এলিমেন্ট অপ্রত্যাশিতভাবে সরে যায়। সাধারণ কারণ: মাত্রা ছাড়া ছবি, বিজ্ঞাপন, এমবেড এবং ওয়েব ফন্ট।

• ছবি এবং ভিডিওতে width ও height সেট করুন, অথবা CSS aspect-ratio ব্যবহার করুন।
• ডাইনামিক কন্টেন্টের জন্য জায়গা সংরক্ষণ করুন (বিজ্ঞাপন, এমবেড) min-height দিয়ে।
• font-display: swap ব্যবহার করুন এবং শিফট সৃষ্টিকারী অদৃশ্য টেক্সট এড়াতে ফন্ট প্রিলোড করুন।
• বিদ্যমান কন্টেন্টের উপরে কন্টেন্ট সন্নিবেশ এড়িয়ে চলুন যদি না ব্যবহারকারীর ইন্টারঅ্যাকশন দ্বারা ট্রিগার হয়।

উদাহরণ: বিজ্ঞাপনের জন্য জায়গা সংরক্ষণ করুন:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

মেট্রিক এবং টুলের তুলনা

CWV উন্নত করার ব্যবহারিক কর্মপ্রবাহ

1. ফিল্ড ডেটা পরিমাপ করুন PageSpeed Insights বা CrUX দিয়ে খারাপ স্কোরের পেজ চিহ্নিত করুন।
2. সেই পেজগুলোতে Lighthouse চালান নির্দিষ্ট সুযোগ পেতে।
3. প্রভাব অনুযায়ী ফিক্স অগ্রাধিকার দিন: প্রায়শই LCP এবং CLS উন্নত করা সবচেয়ে সহজ।
4. পরিবর্তন প্রয়োগ করুন এবং ল্যাবে পরীক্ষা করুন।
5. ডিপ্লয় এবং মনিটর করুন ফিল্ড ডেটা দিয়ে উন্নতি নিশ্চিত করুন।
6. অবশিষ্ট সমস্যাগুলোতে পুনরাবৃত্তি করুন।

মনে রাখবেন CWV ব্যবহারকারী-কেন্দ্রিক; সর্বদা বাস্তব-ব্যবহারকারীর ডেটা দিয়ে যাচাই করুন।

সাধারণ জিজ্ঞাসা

Core Web Vitals কী এবং কেন গুরুত্বপূর্ণ?

Core Web Vitals হলো তিনটি মেট্রিক (LCP, INP, CLS) যা লোডিং, ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। এগুলো গুরুত্বপূর্ণ কারণ এগুলো বাস্তব ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে এবং Google এগুলোকে র‍্যাঙ্কিং সিগন্যাল হিসেবে ব্যবহার করে।

কত ঘন ঘন Core Web Vitals পরিমাপ করা উচিত?

ফিল্ড ডেটা ক্রমাগত মনিটর করুন এবং বড় পরিবর্তনের পরে ল্যাব টেস্ট চালান। CrUX ডেটার মাসিক পর্যালোচনা একটি ভালো অভ্যাস।

সাইট পুনর্নির্মাণ ছাড়া কি Core Web Vitals উন্নত করা যায়?

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

দ্রুত LCP-এর জন্য ছবি কম্প্রেস করতে চান? গুণমান না হারিয়ে ফাইল সাইজ কমাতে আমাদের ফ্রি Image Compressor ব্যবহার করে দেখুন।