Core Web Vitals: পরিমাপ ও উন্নতি

আপনি একটি আধুনিক ওয়েব অ্যাপ তৈরি করেছেন, কিন্তু ব্যবহারকারীরা অভিযোগ করছেন যে এটি ধীরগতির। সার্চ র‍্যাঙ্কিং কমছে, এবং আপনি নিশ্চিত নন কেন। এর কারণ হতে পারে দুর্বল Core Web Vitals—ব্যবহারকারীর অভিজ্ঞতার জন্য Google-এর মেট্রিক্স। এই গাইডে, আপনি জানতে পারবেন এগুলো কী, কীভাবে পরিমাপ করবেন, এবং সবচেয়ে গুরুত্বপূর্ণভাবে, কীভাবে কার্যকর ধাপে উন্নতি করবেন।

Core Web Vitals কী?

Core Web Vitals হল কিছু নির্দিষ্ট মেট্রিক্স যা Google একটি ওয়েবপেজের ব্যবহারকারীর অভিজ্ঞতা মূল্যায়ন করতে ব্যবহার করে। এগুলো লোডিং, ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল স্থিতিশীলতার উপর ফোকাস করে:

• Largest Contentful Paint (LCP): লোডিং পারফরম্যান্স পরিমাপ করে। সবচেয়ে বড় কন্টেন্ট এলিমেন্ট (যেমন, হিরো ইমেজ, হেডিং) দৃশ্যমান হতে যে সময় লাগে। ভালো: ≤ 2.5 সেকেন্ড।
• First Input Delay (FID): ইন্টারঅ্যাক্টিভিটি পরিমাপ করে। ব্যবহারকারী প্রথম ইন্টারঅ্যাক্ট করার সময় (যেমন, একটি বাটনে ক্লিক) থেকে ব্রাউজার সাড়া দিতে পারে যে সময়। ভালো: ≤ 100 মিলিসেকেন্ড।
• Cumulative Layout Shift (CLS): ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। লোডিংয়ের সময় অপ্রত্যাশিত লেআউট পরিবর্তন পরিমাপ করে। ভালো: ≤ 0.1।

এই মেট্রিক্সগুলি Google-এর পেজ এক্সপেরিয়েন্স সিগন্যালের অংশ এবং সার্চ র‍্যাঙ্কিংকে প্রভাবিত করতে পারে। কিন্তু আরও গুরুত্বপূর্ণভাবে, তারা প্রকৃত ব্যবহারকারীর সন্তুষ্টি প্রতিফলিত করে।

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

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

ল্যাব টুলস

• Lighthouse: Chrome DevTools-এ অন্তর্ভুক্ত। স্কোর এবং সুযোগ পেতে একটি অডিট চালান।
• PageSpeed Insights: একটি URL-এর জন্য ল্যাব এবং ফিল্ড ডেটা একত্রিত করে।
• WebPageTest: কাস্টম লোকেশন এবং ডিভাইস সহ উন্নত পরীক্ষা।

ফিল্ড টুলস

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

web-vitals লাইব্রেরি ব্যবহার করে মেট্রিক্স লগ করার উপায় এখানে:

import {getLCP, getFID, getCLS} from 'web-vitals';

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

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

LCP উন্নত করা

LCP প্রায়ই সবচেয়ে চ্যালেঞ্জিং মেট্রিক। এই ক্ষেত্রগুলিতে ফোকাস করুন:

1. ইমেজ অপটিমাইজ করুন: ইমেজ কমপ্রেস করুন, WebP বা AVIF-এর মতো আধুনিক ফরম্যাট ব্যবহার করুন, এবং srcset দিয়ে রেসপন্সিভ ইমেজ পরিবেশন করুন। অফস্ক্রিন ইমেজ লেজি-লোড করুন।
2. গুরুত্বপূর্ণ রিসোর্স প্রিলোড করুন: হিরো ইমেজ, ফন্ট এবং মূল CSS-এর জন্য <link rel="preload"> ব্যবহার করুন।
3. সার্ভার রেসপন্স টাইম কমান: একটি CDN ব্যবহার করুন, ক্যাশিং সক্রিয় করুন এবং ব্যাকএন্ড কোড অপটিমাইজ করুন।
4. রেন্ডার-ব্লকিং রিসোর্স দূর করুন: গুরুত্বপূর্ণ CSS ইনলাইন করুন, অ-গুরুত্বপূর্ণ JS ডিফার করুন এবং বড় CSS ফাইল এড়িয়ে চলুন।
5. CDN ব্যবহার করুন: ব্যবহারকারীদের কাছাকাছি এজ লোকেশন থেকে অ্যাসেট পরিবেশন করুন।

FID উন্নত করা

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

1. দীর্ঘ কাজ ভাগ করুন: মেইন থ্রেডে ইল্ড করতে setTimeout বা requestIdleCallback ব্যবহার করুন।
2. JavaScript অপটিমাইজ করুন: কোড-স্প্লিট, ট্রি-শেক এবং অ-গুরুত্বপূর্ণ স্ক্রিপ্ট ডিফার করুন।
3. ওয়েব ওয়ার্কার ব্যবহার করুন: ভারী গণনা মেইন থ্রেড থেকে সরান।
4. থার্ড-পার্টি প্রভাব কমান: থার্ড-পার্টি স্ক্রিপ্ট অডিট এবং সীমিত করুন।

CLS উন্নত করা

CLS লোডের সময় এলিমেন্ট স্থানান্তরের কারণে হয়। এটি প্রতিরোধ করুন:

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

Core Web Vitals মেট্রিক্সের তুলনা

Core Web Vitals উন্নত করার ব্যবহারিক কর্মপ্রবাহ

এই ধাপে ধাপে প্রক্রিয়া অনুসরণ করুন:

1. পরিমাপ করুন: ল্যাব এবং ফিল্ড উভয় ডেটার জন্য বেসলাইন পেতে PageSpeed Insights ব্যবহার করুন।
2. সমস্যা চিহ্নিত করুন: Lighthouse-এ সুযোগ এবং ডায়াগনস্টিকস দেখুন।
3. অগ্রাধিকার দিন: প্রথমে সবচেয়ে খারাপ স্কোরের মেট্রিকে ফোকাস করুন।
4. ফিক্স প্রয়োগ করুন: উপরে তালিকাভুক্ত অপটিমাইজেশন প্রয়োগ করুন।
5. পরীক্ষা করুন: Lighthouse পুনরায় চালান এবং ডেপ্লয়মেন্টের পরে ফিল্ড ডেটা পরীক্ষা করুন।
6. মনিটর করুন: web-vitals লাইব্রেরি দিয়ে রিয়েল-ইউজার মনিটরিং সেট আপ করুন এবং সময়ের সাথে ট্র্যাক করুন।

সাধারণ জিজ্ঞাসা

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

LCP-এর জন্য, ভালো ≤ 2.5s, উন্নতি প্রয়োজন ≤ 4s, খারাপ > 4s। FID-এর জন্য, ভালো ≤ 100ms, উন্নতি প্রয়োজন ≤ 300ms, খারাপ > 300ms। CLS-এর জন্য, ভালো ≤ 0.1, উন্নতি প্রয়োজন ≤ 0.25, খারাপ > 0.25।

কত ঘন ঘন Core Web Vitals পরিমাপ করা উচিত?

ফিল্ড ডেটা ক্রমাগত মনিটর করুন এবং উল্লেখযোগ্য পরিবর্তনের পরে ল্যাব পরীক্ষা চালান। Google মাসিকভাবে CrUX ডেটা আপডেট করে, তাই নিয়মিত Search Console চেক করুন।

একজন ডেভেলপার ছাড়া Core Web Vitals উন্নত করা যায়?

ইমেজ কম্প্রেশনের মতো কিছু ফিক্স টুল দিয়ে করা যায়, কিন্তু অনেকের জন্য কোড পরিবর্তন প্রয়োজন। আপনি যদি WordPress-এর মতো CMS-এ থাকেন তবে একটি পারফরম্যান্স অপটিমাইজেশন প্লাগইন ব্যবহার করার কথা বিবেচনা করুন।

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