কোর ওয়েব ভাইটালস: ওয়েব পারফরম্যান্স পরিমাপ ও উন্নতি

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

এই গাইডটি দেখায় কিভাবে CWV সঠিকভাবে পরিমাপ করবেন এবং সবচেয়ে সাধারণ সমস্যাগুলো ঠিক করবেন। কোনো বাড়তি কথা নয়, শুধু কার্যকর পদক্ষেপ।

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

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

• LCP লোডিং পারফরম্যান্স পরিমাপ করে। এটি চিহ্নিত করে কখন সবচেয়ে বড় কন্টেন্ট এলিমেন্ট (ছবি, ভিডিও, টেক্সট ব্লক) দৃশ্যমান হয়। লক্ষ্য ≤ ২.৫ সেকেন্ড।
• INP প্রতিক্রিয়াশীলতা পরিমাপ করে। এটি সমস্ত ইন্টারঅ্যাকশনের (ক্লিক, ট্যাপ, কী প্রেস) লেটেন্সি রেকর্ড করে এবং একটি উচ্চ-পার্সেন্টাইল মান রিপোর্ট করে। লক্ষ্য ≤ ২০০ মিলিসেকেন্ড।
• CLS ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। এটি অপ্রত্যাশিত লেআউট শিফট গণনা করে। লক্ষ্য ≤ ০.১।

এই থ্রেশহোল্ডগুলো Chrome User Experience Report (CrUX) থেকে বাস্তব-ব্যবহারকারীর ডেটার উপর ভিত্তি করে। এগুলো পূরণ করলে ব্যবহারকারীর সন্তুষ্টি বাড়ে এবং সার্চ র‍্যাঙ্কিং উন্নত হতে পারে।

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

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

ল্যাব টুল

• Lighthouse (Chrome DevTools বা CI-তে) ডায়াগনস্টিকস সহ একটি স্ন্যাপশট দেয়।
• PageSpeed Insights একটি URL-এর জন্য ল্যাব এবং ফিল্ড ডেটা একত্রিত করে।
• Web Vitals Extension ব্রাউজ করার সময় Chrome কনসোলে CWV লগ করে।

ফিল্ড টুল

• Chrome UX Report (CrUX) লক্ষ লক্ষ সাইটের জন্য সমষ্টিগত বাস্তব-ব্যবহারকারীর ডেটা দেখায়।
• web-vitals JavaScript লাইব্রেরি আপনাকে আপনার নিজের ব্যবহারকারীদের থেকে CWV সংগ্রহ করে অ্যানালিটিক্সে পাঠাতে দেয়।
• Search Console CrUX-এর উপর ভিত্তি করে আপনার সাইটের CWV স্ট্যাটাস রিপোর্ট করে।

সমস্যাযুক্ত পেজ চিহ্নিত করতে ফিল্ড ডেটা দিয়ে শুরু করুন, তারপর ডিবাগ করতে ল্যাব টুল ব্যবহার করুন।

LCP উন্নত করা

LCP সাধারণত কয়েকটি লক্ষ্যযুক্ত সংশোধনের মাধ্যমে উন্নত করা সবচেয়ে সহজ।

1. ছবি অপ্টিমাইজ করুন। আধুনিক ফরম্যাট (WebP, AVIF) ব্যবহার করুন, দৃশ্যমান গুণমান হার না করে কম্প্রেস করুন, এবং স্পষ্ট width/height সেট করুন। Image Compressor এর মতো টুল ফাইল সাইজ কমাতে সাহায্য করতে পারে।
2. LCP ছবি প্রিলোড করুন। হেডে <link rel="preload" as="image" href="#"> যোগ করুন।
3. রেন্ডার-ব্লকিং রিসোর্স দূর করুন। ক্রিটিক্যাল CSS ইনলাইন করুন, নন-ক্রিটিক্যাল CSS/JS ডিফার করুন, এবং হেডে সিনক্রোনাস স্ক্রিপ্ট এড়িয়ে চলুন।
4. CDN ব্যবহার করুন। লেটেন্সি কমাতে ব্যবহারকারীর কাছাকাছি অবস্থান থেকে অ্যাসেট পরিবেশন করুন।
5. টেক্সট কম্প্রেশন সক্রিয় করুন। HTML, CSS, JS-এর জন্য Brotli বা gzip।

একটি LCP ছবি প্রিলোড করার উদাহরণ:

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

INP উন্নত করা

INP পরিমাপ করে আপনার পেজ কত দ্রুত ব্যবহারকারীর ইনপুটে সাড়া দেয়। দীর্ঘ টাস্ক মেইন থ্রেড ব্লক করে এবং ইন্টারঅ্যাকশন বিলম্বিত করে।

1. দীর্ঘ টাস্ক ভাগ করুন। মেইন থ্রেডে ইল্ড করতে setTimeout বা requestIdleCallback ব্যবহার করুন।
2. ইভেন্ট হ্যান্ডলার অপ্টিমাইজ করুন। স্ক্রল এবং রিসাইজের মতো উচ্চ-ফ্রিকোয়েন্সি ইভেন্ট ডিবাউন্স বা থ্রটল করুন।
3. JavaScript কমান। কোড-স্প্লিট, ট্রি-শেক, এবং নন-ক্রিটিক্যাল স্ক্রিপ্ট লেজি-লোড করুন।
4. ভারী গণনার জন্য web workers ব্যবহার করুন।
5. বড় DOM সাইজ এড়িয়ে চলুন। সম্ভব হলে DOM ১৫০০ নোডের নিচে রাখুন।

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

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

CLS উন্নত করা

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

1. ছবি এবং ভিডিওতে সর্বদা width এবং height সেট করুন। এটি ব্রাউজারকে জায়গা সংরক্ষণ করতে দেয়।
2. বিজ্ঞাপন এবং এমবেডের জন্য জায়গা সংরক্ষণ করুন। CSS aspect-ratio বা নির্দিষ্ট কন্টেইনার ব্যবহার করুন।
3. বিদ্যমান কন্টেন্টের উপরে কন্টেন্ট সন্নিবেশ করা এড়িয়ে চলুন যদি না ব্যবহারকারীর ইন্টারঅ্যাকশন দ্বারা ট্রিগার হয়।
4. font-display: swap ব্যবহার করুন এবং অদৃশ্য টেক্সট শিফট এড়াতে ফন্ট প্রিলোড করুন।
5. অ্যানিমেশনে সতর্ক থাকুন। লেআউট ট্রিগার করে এমন প্রপার্টির পরিবর্তে transform এবং opacity ব্যবহার করুন।

মনিটরিং এবং ধারাবাহিক উন্নতি

পারফরম্যান্স এককালীন সমাধান নয়। রিগ্রেশন ধরতে মনিটরিং সেট আপ করুন।

• আপনার অ্যানালিটিক্সে CWV পাঠাতে web-vitals লাইব্রেরি ব্যবহার করুন:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

• মেট্রিক থ্রেশহোল্ড ছাড়িয়ে গেলে সতর্কতা সেট আপ করুন।
• প্রতিটি পুল রিকোয়েস্টের জন্য CI-তে Lighthouse চালান।
• প্রবণতা ট্র্যাক করতে মাসিক CrUX ডেটা পর্যালোচনা করুন।

কোর ওয়েব ভাইটালসের তুলনা

সাধারণ প্রশ্নোত্তর

কোর ওয়েব ভাইটালসের বর্তমান থ্রেশহোল্ড কী?

LCP: ভালো ≤ ২.৫ সেকেন্ড, উন্নতি প্রয়োজন ≤ ৪.০ সেকেন্ড, খারাপ > ৪.০ সেকেন্ড। INP: ভালো ≤ ২০০ মিলিসেকেন্ড, উন্নতি প্রয়োজন ≤ ৫০০ মিলিসেকেন্ড, খারাপ > ৫০০ মিলিসেকেন্ড। CLS: ভালো ≤ ০.১, উন্নতি প্রয়োজন ≤ ০.২৫, খারাপ > ০.২৫।

কত ঘন ঘন কোর ওয়েব ভাইটালস চেক করা উচিত?

অ্যানালিটিক্সের মাধ্যমে ফিল্ড ডেটা ক্রমাগত মনিটর করুন। মাসিক CrUX এবং Search Console পর্যালোচনা করুন। প্রতিটি উল্লেখযোগ্য কোড পরিবর্তনে ল্যাব টেস্ট (Lighthouse) চালান।

একজন ডেভেলপার ছাড়া কি কোর ওয়েব ভাইটালস উন্নত করা সম্ভব?

ছবি কম্প্রেস করা বা ক্যাশিং সক্রিয় করার মতো কিছু সমাধান প্লাগইন বা হোস্টিং সেটিংসের মাধ্যমে করা যায়। কিন্তু গভীর অপ্টিমাইজেশন (কোড স্প্লিটিং, JS কমানো) সাধারণত ডেভেলপারের সম্পৃক্ততা প্রয়োজন।

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