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

কোর ওয়েব ভাইটালস কেন গুরুত্বপূর্ণ

আপনি একটি দ্রুত ওয়েবসাইট তৈরি করেছেন, কিন্তু ব্যবহারকারীরা এখনও ধীর লোডিং বা জটিল ইন্টারঅ্যাকশনের অভিযোগ করেন। আপনার কোর ওয়েব ভাইটালস (CWV) স্কোর খারাপ হলে সার্চ ইঞ্জিনও আপনাকে নিচের দিকে র‍্যাংক করতে পারে। CWV হলো কিছু মেট্রিক যা গুগল ব্যবহারকারীর অভিজ্ঞতা পরিমাপ করতে ব্যবহার করে: Largest Contentful Paint (LCP), First Input Delay (FID), এবং Cumulative Layout Shift (CLS)। ২০২১ সালে গুগল এই মেট্রিকগুলোকে র‍্যাংকিং ফ্যাক্টর করেছে, তাই এগুলো উপেক্ষা করলে আপনার SEO এবং ব্যবহারকারী ধরে রাখা ক্ষতিগ্রস্ত হতে পারে।

এই গাইডে প্রতিটি মেট্রিক কীভাবে পরিমাপ করবেন, সাধারণ সমস্যাগুলো চিহ্নিত করবেন এবং ব্যবহারিক সমাধান প্রয়োগ করবেন তা ব্যাখ্যা করা হয়েছে। আমরা আজই নিতে পারেন এমন কার্যকর পদক্ষেপগুলোতে মনোযোগ দেব, প্রতিটি এজ কেসে ঢুকব না।

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

অপ্টিমাইজ করার আগে জানুন প্রতিটি মেট্রিক কী পরিমাপ করে এবং এর থ্রেশহোল্ড কত।

দ্রষ্টব্য: ২০২৪ সালের মার্চে FID-এর পরিবর্তে Interaction to Next Paint (INP) আসছে, তবে অপ্টিমাইজেশনের নীতিগুলো একই রকম। আমরা এখানে FID-তে মনোযোগ দেব কারণ এটি এখনও ব্যাপকভাবে উল্লেখ করা হয়।

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

আপনার ল্যাব এবং ফিল্ড উভয় ডেটা প্রয়োজন। ল্যাব ডেটা (সিন্থেটিক) ডিবাগ করতে সাহায্য করে; ফিল্ড ডেটা (প্রকৃত ব্যবহারকারী) প্রকৃত পারফরম্যান্স দেখায়।

ল্যাব টুলস

• Lighthouse (Chrome DevTools-এ): পারফরম্যান্স, অ্যাক্সেসিবিলিটি এবং SEO-এর জন্য অডিট চালান। এটি LCP, CLS এবং TBT (FID-এর প্রক্সি) রিপোর্ট করে।
• WebPageTest: ফিল্মস্ট্রিপ এবং ওয়াটারফল চার্ট সহ উন্নত টেস্টিং।
• PageSpeed Insights: ল্যাব এবং ফিল্ড ডেটা (যদি পাওয়া যায়) একত্রিত করে।

ফিল্ড টুলস

• Chrome User Experience Report (CrUX): প্রকৃত-ব্যবহারকারীর মেট্রিকের পাবলিক ডেটাসেট। PageSpeed Insights বা BigQuery-এর মাধ্যমে অ্যাক্সেস করুন।
• web-vitals JavaScript লাইব্রেরি: আপনার অ্যানালিটিক্সে প্রকৃত-ব্যবহারকারীর মেট্রিক সংগ্রহ করুন।
• Search Console Core Web Vitals রিপোর্ট: সমস্যা থাকা URL গ্রুপ দেখায়।

দ্রুত ওভারভিউ পেতে PageSpeed Insights দিয়ে শুরু করুন, তারপর বিস্তারিত ডায়াগনস্টিকের জন্য Lighthouse ব্যবহার করুন।

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

LCP প্রায়ই ধীর সার্ভার প্রতিক্রিয়া, রেন্ডার-ব্লকিং রিসোর্স বা অপ্টিমাইজ되지 않은 ছবির কারণে খারাপ হয়। এই ধাপগুলো অনুসরণ করুন:

1. সার্ভার প্রতিক্রিয়া সময় অপ্টিমাইজ করুন: ক্যাশিং, CDN এবং দক্ষ ব্যাকএন্ড কোড ব্যবহার করুন। Time to First Byte (TTFB) ০.৮ সেকেন্ডের নিচে রাখার লক্ষ্য রাখুন।
2. রেন্ডার-ব্লকিং রিসোর্স দূর করুন: ক্রিটিক্যাল CSS ইনলাইন করুন, নন-ক্রিটিক্যাল CSS এবং JavaScript ডিফার করুন। স্ক্রিপ্টের জন্য async বা defer ব্যবহার করুন।
3. ছবি অপ্টিমাইজ করুন: ছবি কম্প্রেস করুন, আধুনিক ফরম্যাট (WebP, AVIF) ব্যবহার করুন এবং srcset দিয়ে রেসপন্সিভ ছবি প্রয়োগ করুন। LCP ছবির জন্য <link rel="preload"> দিয়ে প্রিলোড করুন।
4. CDN ব্যবহার করুন: এজ লোকেশন থেকে স্ট্যাটিক অ্যাসেট পরিবেশন করুন।
5. অ্যাসেট ক্যাশ করুন: স্ট্যাটিক রিসোর্সের জন্য দীর্ঘ ক্যাশ লাইফটাইম সেট করুন।

উদাহরণ: LCP ছবি প্রিলোড করুন এবং লেআউট শিফট এড়াতে স্পষ্ট মাত্রা সেট করুন।

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">

First Input Delay (FID) উন্নত করা

FID প্রতিক্রিয়াশীলতা পরিমাপ করে। দীর্ঘ JavaScript টাস্ক মেইন থ্রেড ব্লক করে, ইন্টারঅ্যাকশন বিলম্বিত করে। FID উন্নত করতে:

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

Lighthouse-এর মতো টুল দীর্ঘ টাস্ক চিহ্নিত করে। সেগুলো সনাক্ত করতে Chrome DevTools-এর Performance প্যানেল ব্যবহার করুন।

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

CLS ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। যখন এলিমেন্ট অপ্রত্যাশিতভাবে অবস্থান পরিবর্তন করে তখন লেআউট শিফট ঘটে। সাধারণ কারণ ও সমাধান:

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

DevTools-এ Layout Instability API দিয়ে পরীক্ষা করুন অথবা ফিল্ডে CLS লগ করতে web-vitals লাইব্রেরি ব্যবহার করুন।

নিরবচ্ছিন্ন পর্যবেক্ষণের ব্যবহারিক ওয়ার্কফ্লো

অপ্টিমাইজেশন এককালীন কাজ নয়। মনিটরিং সেট আপ করুন:

1. আপনার সাইটে web-vitals লাইব্রেরি ইনস্ট্রুমেন্ট করুন এবং আপনার অ্যানালিটিক্স প্ল্যাটফর্মে মেট্রিক পাঠান।
2. মেট্রিক থ্রেশহোল্ড ছাড়িয়ে গেলে সতর্কতা সেট আপ করুন।
3. রিগ্রেশন ধরতে নিয়মিত CI/CD-তে Lighthouse চালান।
4. ফিল্ড ডেটা ট্রেন্ড মনিটর করতে Search Console ব্যবহার করুন।

মনে রাখবেন, র‍্যাংকিংয়ের জন্য ফিল্ড ডেটাই গুরুত্বপূর্ণ। ল্যাব ডেটা ডিবাগ করতে সাহায্য করে, তবে সর্বদা প্রকৃত ব্যবহারকারীর সাথে যাচাই করুন।

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

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

২০২৩ অনুযায়ী, থ্রেশহোল্ড হলো: LCP ভালো ≤২.৫ সেকেন্ড, উন্নতি প্রয়োজন ২.৫–৪.০ সেকেন্ড, খারাপ >৪.০ সেকেন্ড; FID ভালো ≤১০০ মিলিসেকেন্ড, উন্নতি প্রয়োজন ১০০–৩০০ মিলিসেকেন্ড, খারাপ >৩০০ মিলিসেকেন্ড; CLS ভালো ≤০.১, উন্নতি প্রয়োজন ০.১–০.২৫, খারাপ >০.২৫। লক্ষ্য করুন, ২০২৪ সালে FID-এর পরিবর্তে INP আসছে।

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

অ্যানালিটিক্সের মাধ্যমে ফিল্ড ডেটা নিরবচ্ছিন্নভাবে মনিটর করুন, এবং প্রতিটি ডিপ্লয়মেন্টে বা অন্তত সাপ্তাহিক ল্যাব টেস্ট (যেমন Lighthouse) চালান। বড় পরিবর্তন হলে নতুন অডিট চালানো উচিত।

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

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

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