Core Web Vitals: ওয়েব পারফরম্যান্স পরিমাপ ও উন্নতি

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

Core Web Vitals কী?

Core Web Vitals হলো তিনটি মেট্রিক যা ব্যবহারকারীর অভিজ্ঞতার মূল দিকগুলো পরিমাপ করে:

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

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

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

সমস্যা নির্ণয়ের জন্য আপনার ফিল্ড এবং ল্যাব উভয় ডেটা প্রয়োজন।

ফিল্ড ডেটা (রিয়েল ইউজার মনিটরিং)

ফিল্ড ডেটা ডিভাইস এবং নেটওয়ার্ক জুড়ে প্রকৃত ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে। এই উৎসগুলো ব্যবহার করুন:

• Chrome User Experience Report (CrUX): লক্ষ লক্ষ সাইটের প্রকৃত-ব্যবহারকারীর মেট্রিকের পাবলিক ডেটাসেট। PageSpeed Insights বা CrUX API-এর মাধ্যমে অ্যাক্সেস করুন।
• Google Search Console: Core Web Vitals রিপোর্ট CrUX ডেটার ভিত্তিতে URL গ্রুপ দেখায় যেগুলোতে মনোযোগ প্রয়োজন।
• Web Vitals JavaScript লাইব্রেরি: আপনার সাইটে 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: Chrome DevTools-এ বিল্ট-ইন, CLI হিসেবে উপলব্ধ, এবং PageSpeed Insights-এ ইন্টিগ্রেটেড। এটি ল্যাব মেট্রিক এবং সুযোগ রিপোর্ট করে।
• WebPageTest: কাস্টম নেটওয়ার্ক শর্ত এবং ফিল্মস্ট্রিপ সহ উন্নত টেস্টিং।
• Chrome DevTools Performance প্যানেল: রানটাইম পারফরম্যান্স রেকর্ড এবং বিশ্লেষণ করুন, যার মধ্যে INP-কে প্রভাবিত করে এমন লং টাস্ক অন্তর্ভুক্ত।

সেরা অনুশীলন: সমাধান চিহ্নিত করতে ল্যাব ডেটা ব্যবহার করুন, এবং প্রভাব যাচাই করতে ফিল্ড ডেটা।

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

LCP সাধারণত হিরো ইমেজ বা একটি বড় টেক্সট ব্লক দ্বারা প্রভাবিত হয়। এগুলো অপ্টিমাইজ করুন:

1. LCP রিসোর্স অপ্টিমাইজ করুন: ছবি কম্প্রেস করুন (WebP/AVIF ব্যবহার করুন), srcset দিয়ে রেসপন্সিভ সাইজ পরিবেশন করুন, এবং LCP ইমেজ গুরুত্বপূর্ণ হলে প্রিলোড করুন।
2. রেন্ডার-ব্লকিং রিসোর্স দূর করুন: ক্রিটিক্যাল CSS ইনলাইন করুন, নন-ক্রিটিক্যাল CSS এবং JavaScript ডিফার করুন।
3. সার্ভার রেসপন্স টাইম (TTFB) উন্নত করুন: CDN ব্যবহার করুন, ক্যাশিং সক্রিয় করুন, এবং ব্যাকএন্ড কোয়েরি অপ্টিমাইজ করুন।
4. ক্লায়েন্ট-সাইড রেন্ডারিং কম করুন: SPA-এর জন্য, প্রাথমিক ভিউয়ের জন্য সার্ভার-সাইড রেন্ডারিং (SSR) বা স্ট্যাটিক জেনারেশন বিবেচনা করুন।

উদাহরণ: LCP ইমেজ প্রিলোড করুন:

<link rel="preload" as="image" href="/hero.avif" imagesrcset="/hero-480.avif 480w, /hero-800.avif 800w" imagesizes="(max-width: 600px) 480px, 800px">

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

INP একটি ব্যবহারকারীর ইন্টারঅ্যাকশন এবং পরবর্তী পেইন্টের মধ্যে বিলম্ব পরিমাপ করে। লং টাস্ক এবং ভারী JavaScript সাধারণত দায়ী।

1. লং টাস্ক ভাগ করুন: মেইন থ্রেডে ইল্ড করতে setTimeout, requestIdleCallback, বা scheduler API ব্যবহার করুন।
2. ইভেন্ট হ্যান্ডলার অপ্টিমাইজ করুন: ব্যয়বহুল হ্যান্ডলার ডিবাউন্স বা থ্রটল করুন; লেআউট থ্র্যাশিং এড়িয়ে চলুন।
3. JavaScript এক্সিকিউশন টাইম কম করুন: কোড-স্প্লিট, ট্রি-শেক, এবং নন-ক্রিটিক্যাল স্ক্রিপ্ট ডিফার করুন।
4. CPU-ইনটেনসিভ কাজের জন্য ওয়েব ওয়ার্কার ব্যবহার করুন।

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

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

async function handleClick() {
  // ... কিছু কাজ করুন
  await yieldToMain();
  // ... চালিয়ে যান
}

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

CLS ঘটে যখন এলিমেন্টগুলো অপ্রত্যাশিতভাবে শিফট করে। এটি প্রতিরোধ করুন:

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

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

<div>
  <!-- বিজ্ঞাপন এখানে লোড হয় -->
</div>

ধারাবাহিক উন্নতির জন্য টুল এবং ওয়ার্কফ্লো

পারফরম্যান্স এককালীন সমাধান নয়। পরিমাপকে আপনার ওয়ার্কফ্লোতে একীভূত করুন:

• বাজেট সেট করুন: পুল রিকোয়েস্টে থ্রেশহোল্ড প্রয়োগ করতে Lighthouse CI ব্যবহার করুন।
• ফিল্ড ডেটা মনিটর করুন: CrUX বা আপনার নিজের RUM দিয়ে ড্যাশবোর্ড সেট আপ করুন।
• সমাধানকে অগ্রাধিকার দিন: 'ভাল' থ্রেশহোল্ডের সাথে সবচেয়ে বড় ব্যবধান থাকা মেট্রিকে ফোকাস করুন।
• প্রকৃত ডিভাইসে পরীক্ষা করুন: সমস্যা ধরতে মিড-টিয়ার মোবাইল ডিভাইস এমুলেট করুন।

দ্রুত পরীক্ষার জন্য, আপনার পেজ PageSpeed Insights-এর মাধ্যমে চালান; এটি ল্যাব এবং ফিল্ড ডেটা একত্রিত করে।

সচরাচর জিজ্ঞাসা

Core Web Vitals-এর বর্তমান থ্রেশহোল্ড কী?

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

CrUX ডেটা কত ঘন ঘন আপডেট হয়?

CrUX ডেটা প্রতিদিন আপডেট হয়, তবে ডেটাসেটটি একটি চলমান ২৮ দিনের উইন্ডো প্রতিফলিত করে। Search Console পর্যায়ক্রমে আপডেট হয়।

আমি কি আমার ডিজাইন পরিবর্তন না করেই Core Web Vitals উন্নত করতে পারি?

হ্যাঁ। অনেক উন্নতি প্রযুক্তিগত: ছবি অপ্টিমাইজ করা, স্ক্রিপ্ট ডিফার করা, ডাইনামিক কন্টেন্টের জন্য জায়গা সংরক্ষণ করা, এবং মেইন-থ্রেড কাজ কমানো।

আপনার সাইটের পারফরম্যান্স বিশ্লেষণ করতে প্রস্তুত? TTFB এবং LCP-কে প্রভাবিত করে এমন ধীর সার্ভার প্রতিক্রিয়া চিহ্নিত করতে আমাদের Nginx লগ বিশ্লেষক ব্যবহার করুন।