Core Web Vitals: ওয়েব পারফরম্যান্স পরিমাপ ও উন্নতি
আপনার ব্যবহারকারীরা অধৈর্য। আপনার সাইট লোড হতে যদি কয়েক সেকেন্ডের বেশি সময় লাগে, তারা চলে যায়। সার্চ ইঞ্জিনগুলোও লক্ষ্য করে: Core Web Vitals হলো র্যাঙ্কিং সিগন্যাল। কিন্তু এগুলো উন্নত করা মেট্রিক এবং টুলসের একটি গোলকধাঁধার মতো মনে হয়। এই গাইড সেই বিভ্রান্তি দূর করবে। আপনি জানতে পারবেন প্রতিটি মেট্রিকের অর্থ কী, কীভাবে সঠিকভাবে পরিমাপ করবেন এবং উন্নত করার সুনির্দিষ্ট পদক্ষেপ।
Core Web Vitals কী?
Core Web Vitals হলো তিনটি মেট্রিক যা বাস্তব-জগতের ব্যবহারকারীর অভিজ্ঞতা পরিমাপ করে:
- Largest Contentful Paint (LCP): মূল কন্টেন্ট লোড হতে কত সময় লাগে। লক্ষ্য: ২.৫ সেকেন্ডের কম।
- Interaction to Next Paint (INP): পেজ ব্যবহারকারীর ইনপুটে কত দ্রুত সাড়া দেয়। লক্ষ্য: ২০০ মিলিসেকেন্ডের কম।
- Cumulative Layout Shift (CLS): লোডিংয়ের সময় লেআউট কতটা লাফালাফি করে। লক্ষ্য: ০.১-এর কম।
এই মেট্রিকগুলো বাস্তব ব্যবহারকারীর সেশন (ফিল্ড ডেটা) এবং সিন্থেটিক টেস্ট (ল্যাব ডেটা) থেকে পরিমাপ করা হয়। র্যাঙ্কিংয়ের জন্য ফিল্ড ডেটাই গুরুত্বপূর্ণ।
Core Web Vitals কীভাবে পরিমাপ করবেন
আপনার ল্যাব এবং ফিল্ড উভয় ডেটাই প্রয়োজন। ল্যাব ডেটা ডিবাগ করতে সাহায্য করে; ফিল্ড ডেটা প্রকৃত ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে।
ল্যাব টুলস
- Chrome DevTools-এ Lighthouse: স্কোর এবং সুযোগ পেতে একটি অডিট চালান।
- PageSpeed Insights: একটি URL-এর জন্য ল্যাব এবং ফিল্ড ডেটা একত্রিত করে।
- WebPageTest: উন্নত ওয়াটারফল বিশ্লেষণ।
ফিল্ড টুলস
- Chrome User Experience Report (CrUX): Chrome থেকে বাস্তব-ব্যবহারকারীর ডেটা, PageSpeed Insights বা BigQuery-এর মাধ্যমে পাওয়া যায়।
- 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);
এটি আপনাকে বাস্তব-ব্যবহারকারীর মেট্রিকের একটি ধারাবাহিক স্ট্রিম দেয়।
LCP উন্নত করা
LCP সাধারণত সবচেয়ে বড় ছবি, ভিডিও বা টেক্সটের ব্লক। এটি উন্নত করতে, ক্রিটিক্যাল পাথে মনোযোগ দিন।
- ছবি অপটিমাইজ করুন: ছবি কমপ্রেস করুন, WebP বা AVIF-এর মতো আধুনিক ফরম্যাট ব্যবহার করুন এবং স্পষ্ট width ও height সেট করুন। Image Compressor-এর মতো টুলস দৃশ্যমান গুণমান হ্রাস না করে ফাইল সাইজ কমাতে সাহায্য করতে পারে।
- LCP রিসোর্স প্রিলোড করুন: হিরো ইমেজ বা ফন্টের জন্য
<link rel="preload">যোগ করুন। - সার্ভার রেসপন্স টাইম কমান: একটি CDN ব্যবহার করুন, ক্যাশিং সক্রিয় করুন এবং ব্যাকএন্ড কোয়েরি অপটিমাইজ করুন।
- রেন্ডার-ব্লকিং রিসোর্স দূর করুন: ক্রিটিক্যাল CSS ইনলাইন করুন, নন-ক্রিটিক্যাল JavaScript ডিফার করুন।
- রেসপন্সিভ ইমেজ ব্যবহার করুন:
srcsetদিয়ে উপযুক্ত আকারের ছবি সার্ভ করুন।
LCP ইমেজ প্রিলোড করার উদাহরণ:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
INP উন্নত করা
INP রেসপন্সিভনেস পরিমাপ করে। দীর্ঘ টাস্ক মেইন থ্রেড ব্লক করে, ভিজ্যুয়াল ফিডব্যাক বিলম্বিত করে।
- দীর্ঘ টাস্ক ভাগ করুন: মেইন থ্রেডকে ইল্ড করতে
setTimeoutবাrequestIdleCallbackব্যবহার করুন। - ইভেন্ট হ্যান্ডলার অপটিমাইজ করুন: ব্যয়বহুল হ্যান্ডলার ডিবাউন্স বা থ্রটল করুন।
- JavaScript কমান: অব্যবহৃত কোড সরান, কোড-স্প্লিট করুন এবং নন-ক্রিটিক্যাল মডিউল লেজি-লোড করুন।
- ভারী গণনার জন্য web workers ব্যবহার করুন।
- বড় DOM সাইজ এড়িয়ে চলুন: DOM ১,৫০০ নোডের নিচে রাখুন।
মেইন থ্রেডকে ইল্ড করার উদাহরণ:
async function yieldToMain() {
if ('scheduler' in window && 'yield' in scheduler) {
await scheduler.yield();
} else {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
CLS উন্নত করা
CLS তখন ঘটে যখন উপাদান অপ্রত্যাশিতভাবে সরে যায়। সাধারণ কারণ: মাত্রা ছাড়া ছবি, বিজ্ঞাপন, এমবেড এবং গতিশীলভাবে ইনজেক্ট করা কন্টেন্ট।
- ছবি ও ভিডিওতে সবসময় width এবং height সেট করুন।
- CSS
aspect-ratioবা নির্দিষ্ট কন্টেইনার ব্যবহার করে বিজ্ঞাপন এবং এমবেডের জন্য জায়গা সংরক্ষণ করুন। - ব্যবহারকারীর ইন্টারঅ্যাকশন দ্বারা ট্রিগার না হলে বিদ্যমান কন্টেন্টের উপরে কন্টেন্ট ঢোকানো এড়িয়ে চলুন।
- ফন্ট সোয়াপ শিফট এড়াতে
font-display: optionalব্যবহার করুন, অথবা ফন্ট প্রিলোড করুন। - লেআউট ট্রিগার করে এমন প্রপার্টির পরিবর্তে
transformঅ্যানিমেশন প্রয়োগ করুন।
একটি ছবির জন্য জায়গা সংরক্ষণের উদাহরণ:
<img src="#" width="800" height="600" alt="...">
টুলস এবং ওয়ার্কফ্লো
আপনার ডেভেলপমেন্ট ওয়ার্কফ্লোতে পারফরম্যান্স চেক ইন্টিগ্রেট করুন:
- রিগ্রেশন ধরতে CI-তে Lighthouse চালান।
- ফিল্ড ডেটা মনিটর করতে এবং অ্যালার্ট সেটআপ করতে
web-vitalsব্যবহার করুন। - ধীর এন্ডপয়েন্ট চিহ্নিত করতে সার্ভার লগ বিশ্লেষণ করুন। Nginx Log Analyzer ধীর রিকোয়েস্ট এবং ত্রুটি খুঁজে পেতে সাহায্য করতে পারে।
- বাস্তব ডিভাইস এবং থ্রটল করা নেটওয়ার্কে পরীক্ষা করুন।
মেট্রিক এবং লক্ষ্যের তুলনা
| মেট্রিক | এটি কী পরিমাপ করে | ভালো লক্ষ্য |
|---|---|---|
| LCP | লোডিং পারফরম্যান্স | < ২.৫ সেকেন্ড |
| INP | রেসপন্সিভনেস | < ২০০ মিলিসেকেন্ড |
| CLS | ভিজ্যুয়াল স্ট্যাবিলিটি | < ০.১ |
সাধারণ প্রশ্নোত্তর
Core Web Vitals কী?
Core Web Vitals হলো তিনটি মেট্রিক—LCP, INP এবং CLS—যা লোডিং, ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল স্ট্যাবিলিটি পরিমাপ করে। Google এগুলো র্যাঙ্কিং সিগন্যাল হিসেবে ব্যবহার করে।
কীভাবে Core Web Vitals পরিমাপ করব?
ডিবাগিংয়ের জন্য Lighthouse-এর মতো ল্যাব টুলস এবং বাস্তব-ব্যবহারকারীর ডেটার জন্য web-vitals লাইব্রেরি বা CrUX-এর মতো ফিল্ড টুলস ব্যবহার করুন। উভয়ই গুরুত্বপূর্ণ।
ভালো LCP স্কোর কী?
ভালো LCP ২.৫ সেকেন্ডের কম। ৪ সেকেন্ডের উপরে খারাপ। ছবি অপটিমাইজ করুন, ক্রিটিক্যাল রিসোর্স প্রিলোড করুন এবং সার্ভার রেসপন্স টাইম কমান।
আপনার সাইট দ্রুত করতে প্রস্তুত? তাৎক্ষণিকভাবে LCP উন্নত করতে আমাদের বিনামূল্যের Image Compressor দিয়ে আপনার ছবি কমপ্রেস করে শুরু করুন।