Core Web Vitals: পরিমাপ ও উন্নত করার উপায়
কেন Core Web Vitals আপনার সাইটের জন্য গুরুত্বপূর্ণ
আপনি সম্ভবত রিপোর্ট দেখেছেন যে আপনার সাইট ধীর, কিন্তু কোথা থেকে শুরু করবেন বুঝতে পারছেন না। Core Web Vitals হলো Google-এর মেট্রিক্স যা বাস্তব ব্যবহারকারীর অভিজ্ঞতা পরিমাপ করে: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), এবং Cumulative Layout Shift (CLS)। এগুলো সার্চ র্যাঙ্কিংকে প্রভাবিত করে এবং আরও গুরুত্বপূর্ণভাবে, ব্যবহারকারীরা আপনার সাইটকে কীভাবে অনুভব করে তা নির্ধারণ করে। ধীর LCP দর্শকদের হতাশ করে, উচ্চ INP পেজকে অপ্রতিক্রিয়াশীল করে তোলে, এবং খারাপ CLS দুর্ঘটনাজনিত ক্লিকের কারণ হয়। এই গাইডটি দেখায় কীভাবে এই মেট্রিক্সগুলো পরিমাপ করবেন এবং ব্যবহারিক পদক্ষেপের মাধ্যমে উন্নত করবেন।
তিনটি Core Web Vitals বোঝা
অপ্টিমাইজ করার আগে জেনে নিন প্রতিটি মেট্রিক্স কী পরিমাপ করে এবং এর থ্রেশহোল্ড কী।
| মেট্রিক্স | যা পরিমাপ করে | ভালো | উন্নতি প্রয়োজন | খারাপ |
|---|---|---|---|---|
| LCP | সবচেয়ে বড় কন্টেন্ট এলিমেন্ট (ছবি, টেক্সট ব্লক) রেন্ডার হতে যে সময় লাগে | ≤ ২.৫ সেকেন্ড | ২.৫–৪.০ সেকেন্ড | > ৪.০ সেকেন্ড |
| INP | ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে পরবর্তী পেইন্ট পর্যন্ত সময় | ≤ ২০০ মি.সে. | ২০০–৫০০ মি.সে. | > ৫০০ মি.সে. |
| CLS | অপ্রত্যাশিত ভিজ্যুয়াল মুভের জন্য লেআউট শিফট স্কোরের সমষ্টি | ≤ ০.১ | ০.১–০.২৫ | > ০.২৫ |
এই থ্রেশহোল্ডগুলো ফিল্ড ডেটা (বাস্তব ব্যবহারকারী) এর উপর ভিত্তি করে, ল্যাব টেস্টের উপর নয়। অন্তত ৭৫% পেজ লোডের জন্য "ভালো" রেঞ্জ লক্ষ্য করুন।
Core Web Vitals কীভাবে পরিমাপ করবেন
আপনার ল্যাব এবং ফিল্ড উভয় ডেটা প্রয়োজন। ল্যাব ডেটা ডিবাগ করতে সাহায্য করে; ফিল্ড ডেটা বাস্তব ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে।
ল্যাব টুলস
- Chrome DevTools-এ Lighthouse: পারফরম্যান্স স্কোর এবং নির্দিষ্ট সুযোগের জন্য অডিট চালান।
- WebPageTest: ফিল্মস্ট্রিপ এবং ওয়াটারফল চার্ট সহ উন্নত টেস্টিং।
- Chrome UX Report (CrUX): বাস্তব ব্যবহারকারীদের ফিল্ড ডেটা, PageSpeed Insights বা CrUX API-এর মাধ্যমে অ্যাক্সেসযোগ্য।
ফিল্ড টুলস
- PageSpeed Insights: একটি URL-এর জন্য ল্যাব এবং ফিল্ড উভয় ডেটা দেখায়।
- Google Search Console: Core Web Vitals রিপোর্ট 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);
এটি আপনাকে উন্নতিগুলো ট্র্যাক করার জন্য ফিল্ড ডেটার একটি ধারাবাহিক স্ট্রিম দেয়।
Largest Contentful Paint (LCP) উন্নত করা
LCP প্রায়ই সবচেয়ে বড় চ্যালেঞ্জ। সবচেয়ে বড় এলিমেন্ট সাধারণত একটি হিরো ইমেজ বা বড় টেক্সট ব্লক। এর লোডিং পাথ অপ্টিমাইজ করুন।
- LCP এলিমেন্ট চিহ্নিত করুন Lighthouse বা DevTools পারফরম্যান্স প্যানেল ব্যবহার করে।
- এর লোডিংকে অগ্রাধিকার দিন: ইমেজে
fetchpriority="high"ব্যবহার করুন বা<link rel="preload">দিয়ে প্রিলোড করুন। - ইমেজ অপ্টিমাইজ করুন: কম্প্রেস করুন, আধুনিক ফরম্যাট (WebP/AVIF) ব্যবহার করুন, এবং
srcsetদিয়ে রেসপন্সিভ সাইজ পরিবেশন করুন। - সার্ভার রেসপন্স টাইম কমান: ক্যাশিং, CDN ব্যবহার করুন এবং ব্যাকএন্ড কোয়েরি অপ্টিমাইজ করুন।
- রেন্ডার-ব্লকিং রিসোর্স দূর করুন: ক্রিটিক্যাল CSS ইনলাইন করুন, নন-ক্রিটিক্যাল JS ডেফার করুন।
উদাহরণ: হিরো ইমেজ প্রিলোড করুন এবং fetch priority সেট করুন:
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" alt="Hero" width="1200" height="600" fetchpriority="high">
লেআউট শিফট এড়াতে সর্বদা width এবং height সেট করুন।
Interaction to Next Paint (INP) উন্নত করা
INP প্রতিক্রিয়াশীলতা পরিমাপ করে। দীর্ঘ টাস্ক মেইন থ্রেড ব্লক করে, ভিজ্যুয়াল ফিডব্যাক বিলম্বিত করে। INP উন্নত করতে:
- দীর্ঘ টাস্ক ভাগ করুন: ব্রাউজারকে ইল্ড করতে
setTimeoutবাscheduler.yieldব্যবহার করুন। - ইভেন্ট হ্যান্ডলার অপ্টিমাইজ করুন: ইনপুট ডিবাউন্স করুন, ভারী সিনক্রোনাস কাজ এড়িয়ে চলুন।
- JavaScript কমান: কোড-স্প্লিট, ট্রি-শেক এবং নন-ক্রিটিক্যাল স্ক্রিপ্ট ডেফার করুন।
- CPU-ইনটেনসিভ কাজের জন্য web workers ব্যবহার করুন।
- বড় DOM আপডেট এড়িয়ে চলুন: DOM পরিবর্তনগুলো ব্যাচ করুন এবং requestAnimationFrame ব্যবহার করুন।
উদাহরণ: দীর্ঘ লুপের সময় মেইন থ্রেডে ইল্ড করুন:
async function processItems(items) {
for (let i = 0; i < items.length; i++) {
// do work
if (i % 50 === 0) {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
}
এটি ভারী প্রসেসিংয়ের সময় পেজকে প্রতিক্রিয়াশীল রাখে।
Cumulative Layout Shift (CLS) উন্নত করা
CLS তখন ঘটে যখন এলিমেন্টগুলো অপ্রত্যাশিতভাবে সরে যায়। সাধারণ কারণ: মাত্রা ছাড়া ছবি, বিজ্ঞাপন, এমবেড এবং ওয়েব ফন্ট।
- ছবি এবং ভিডিওতে সর্বদা width এবং height অন্তর্ভুক্ত করুন।
- ডাইনামিক কন্টেন্ট (বিজ্ঞাপন, এমবেড) এর জন্য জায়গা সংরক্ষণ করুন CSS
min-heightবা aspect-ratio বক্স দিয়ে। font-display: swapব্যবহার করুন এবং অদৃশ্য টেক্সট ও লেআউট শিফট এড়াতে ফন্ট প্রিলোড করুন।- বিদ্যমান কন্টেন্টের উপরে কন্টেন্ট সন্নিবেশ করা এড়িয়ে চলুন যদি না এটি ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় হয়।
উদাহরণ: জায়গা সংরক্ষণ করতে aspect-ratio ব্যবহার করুন:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
এটি ভিডিও লোড হওয়ার সময় শিফট প্রতিরোধ করে।
মনিটর এবং পুনরাবৃত্তি করুন
পারফরম্যান্স একবারের সমাধান নয়। বাস্তব ব্যবহারকারীর মেট্রিক্স দিয়ে ধারাবাহিক মনিটরিং সেট আপ করুন। সময়ের সাথে LCP, INP এবং CLS ট্র্যাক করতে ড্যাশবোর্ড ব্যবহার করুন। প্রতিটি পরিবর্তনের পরে, ল্যাব টুল দিয়ে যাচাই করুন এবং কয়েক দিন পরে ফিল্ড ডেটা পরীক্ষা করুন। যে সংশোধনগুলো সবচেয়ে বেশি ব্যবহারকারীকে প্রভাবিত করে সেগুলোকে অগ্রাধিকার দিন।
সচরাচর জিজ্ঞাসা
Core Web Vitals-এর বর্তমান থ্রেশহোল্ড কী?
LCP: ভালো ≤২.৫সে., উন্নতি প্রয়োজন ২.৫–৪.০সে., খারাপ >৪.০সে.। INP: ভালো ≤২০০মি.সে., উন্নতি প্রয়োজন ২০০–৫০০মি.সে., খারাপ >৫০০মি.সে.। CLS: ভালো ≤০.১, উন্নতি প্রয়োজন ০.১–০.২৫, খারাপ >০.২৫।
কত ঘন ঘন Core Web Vitals পরিমাপ করা উচিত?
ফিল্ড ডেটা ধারাবাহিকভাবে মনিটর করুন এবং প্রতিটি উল্লেখযোগ্য পরিবর্তনের পরে ল্যাব টেস্ট চালান। ট্রেন্ডের জন্য সাপ্তাহিকভাবে Search Console চেক করুন।
আমার সাইট পুনর্নির্মাণ ছাড়া কি Core Web Vitals উন্নত করা সম্ভব?
হ্যাঁ। ইমেজ অপ্টিমাইজেশন, প্রিলোডিং এবং CSS সমন্বয়ের মতো অনেক উন্নতি সম্পূর্ণ পুনর্নির্মাণ ছাড়াই ধীরে ধীরে প্রয়োগ করা যায়।
LCP উন্নত করতে দ্রুত ছবি কম্প্রেস করতে চান? গুণমান না হারিয়ে ফাইল সাইজ কমাতে আমাদের ফ্রি ইমেজ কম্প্রেসর ব্যবহার করুন।