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 হল একগুচ্ছ বাস্তব-বিশ্বের মেট্রিক্স যা ব্যবহারকারীর অভিজ্ঞতা প্রতিফলিত করে। এগুলি Google-এর পেজ এক্সপেরিয়েন্স সিগন্যালের অংশ এবং র‍্যাঙ্কিংয়ে ব্যবহৃত হয়। প্রতিটি মেট্রিকের একটি "ভালো" থ্রেশহোল্ড রয়েছে:

• LCP: ≤ 2.5 সেকেন্ড হওয়া উচিত।
• INP: ≤ 200 মিলিসেকেন্ড হওয়া উচিত।
• CLS: ≤ 0.1 হওয়া উচিত।

এই থ্রেশহোল্ডগুলি পেজ লোডের 75তম পার্সেন্টাইলে পরিমাপ করা হয়, অর্থাৎ 75% ভিজিট লক্ষ্যমাত্রা পূরণ করা উচিত।

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

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

ফিল্ড ডেটা (বাস্তব ব্যবহারকারী)

• Chrome User Experience Report (CrUX): আপনার অরিজিনের জন্য সমষ্টিগত বাস্তব-ব্যবহারকারী ডেটা প্রদান করে। PageSpeed Insights বা CrUX ড্যাশবোর্ডের মাধ্যমে অ্যাক্সেস করুন।
• web-vitals JavaScript লাইব্রেরি: আপনার সাইটে এই লাইটওয়েট স্ক্রিপ্ট যোগ করুন যাতে মেট্রিক্স আপনার অ্যানালিটিক্সে পাঠানো যায়।

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);

ল্যাব ডেটা (সিন্থেটিক)

• Lighthouse: Chrome DevTools-এ অন্তর্নির্মিত, এটি পারফরম্যান্স অডিট করে এবং স্কোর দেয়।
• WebPageTest: নেটওয়ার্ক থ্রটলিং সহ গভীর বিশ্লেষণের জন্য।

দ্রুত পুনরাবৃত্তির জন্য ল্যাব ডেটা ব্যবহার করুন, তবে সর্বদা ফিল্ড ডেটা দিয়ে যাচাই করুন।

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

LCP পরিমাপ করে কখন সবচেয়ে বড় কন্টেন্ট এলিমেন্ট (সাধারণত একটি হিরো ইমেজ বা শিরোনাম) দৃশ্যমান হয়। এটি উন্নত করতে:

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

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

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

INP আপনার পেজের ব্যবহারকারীর ইন্টারঅ্যাকশনে প্রতিক্রিয়াশীলতা পরিমাপ করে। উচ্চ INP মানে ব্রাউজার ব্যস্ত এবং দ্রুত সাড়া দিতে পারে না। এটি উন্নত করতে:

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

এছাড়াও, নিশ্চিত করুন যে আপনি থার্ড-পার্টি স্ক্রিপ্ট দিয়ে মেইন থ্রেড ব্লক করছেন না। নিয়মিত তাদের অডিট করুন।

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

CLS অপ্রত্যাশিত লেআউট শিফট পরিমাপ করে। এটি কম রাখতে:

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

টুল এবং ওয়ার্কফ্লো

CWV ক্রমাগত পর্যবেক্ষণ এবং উন্নত করার একটি সহজ ওয়ার্কফ্লো এখানে:

মনে রাখবেন যে উন্নতিগুলি সময়ের সাথে বাস্তব-ব্যবহারকারী ডেটা দিয়ে যাচাই করা উচিত।

সাধারণ প্রশ্ন

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

LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1, পেজ লোডের 75তম পার্সেন্টাইলে পরিমাপ করা হয়।

কত ঘন ঘন Core Web Vitals পরীক্ষা করা উচিত?

ফিল্ড ডেটা ক্রমাগত পর্যবেক্ষণ করুন এবং বড় পরিবর্তনের পরে ল্যাব অডিট চালান। মাসিক পর্যালোচনা একটি ভালো অভ্যাস।

আমি কি আমার সাইট পুনরায় ডিজাইন না করে Core Web Vitals উন্নত করতে পারি?

হ্যাঁ। ইমেজ অপটিমাইজেশন, স্ক্রিপ্ট ডিফার করা এবং সাইজ অ্যাট্রিবিউট সেট করার মতো অনেক উন্নতি ন্যূনতম কোড পরিবর্তনের মাধ্যমে করা যায়।

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