Core Web Vitals: পরিমাপ ও উন্নত করুন SEO-এর জন্য

কেন Core Web Vitals আপনার ওয়েবসাইটের জন্য গুরুত্বপূর্ণ

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

এই গাইডে, আপনি শিখবেন প্রতিটি মেট্রিকের অর্থ কী, কীভাবে সঠিকভাবে পরিমাপ করবেন, এবং ধাপে ধাপে উন্নতি যা আপনি আজই বাস্তবায়ন করতে পারেন।

Core Web Vitals কী?

Core Web Vitals হল তিনটি নির্দিষ্ট মেট্রিক যা লোডিং, ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল স্থিতিশীলতা ক্যাপচার করে:

• Largest Contentful Paint (LCP): লোডিং পারফরম্যান্স পরিমাপ করে। এটি সেই সময় চিহ্নিত করে যখন সবচেয়ে বড় কন্টেন্ট এলিমেন্ট (ছবি, টেক্সট ব্লক, ভিডিও) দৃশ্যমান হয়। একটি ভাল LCP হল ২.৫ সেকেন্ড বা কম।
• Interaction to Next Paint (INP): প্রতিক্রিয়াশীলতা পরিমাপ করে। এটি সমস্ত ইন্টারঅ্যাকশনের লেটেন্সি (ক্লিক, ট্যাপ, কী প্রেস) রেকর্ড করে এবং একটি একক মান রিপোর্ট করে। ভাল INP হল ২০০ মিলিসেকেন্ড বা কম। INP মার্চ ২০২৪-এ First Input Delay (FID) প্রতিস্থাপন করেছে।
• Cumulative Layout Shift (CLS): ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। এটি পেজ লোডের সময় অপ্রত্যাশিত লেআউট শিফট পরিমাপ করে। একটি ভাল CLS হল ০.১ বা কম।

এই মেট্রিক্সগুলি ফিল্ড-ভিত্তিক, অর্থাৎ তারা বাস্তব ব্যবহারকারীর ডেটা থেকে আসে, ল্যাব পরীক্ষা থেকে নয়। এজন্যই Chrome User Experience Report (CrUX) এবং PageSpeed Insights এর মতো টুলগুলি এগুলি ব্যবহার করে।

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

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

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

• PageSpeed Insights: একটি URL লিখুন ল্যাব এবং ফিল্ড উভয় ডেটা দেখতে। ফিল্ড সেকশন CrUX থেকে টানে।
• Search Console: Core Web Vitals রিপোর্ট URL-গুলিকে স্ট্যাটাস অনুসারে গ্রুপ করে (Poor, Needs Improvement, Good)।
• Chrome UX Report (CrUX): BigQuery বা CrUX API-এর মাধ্যমে কাঁচা ডেটা অ্যাক্সেস করুন।
• web-vitals JavaScript লাইব্রেরি: এই হালকা স্ক্রিপ্টটি আপনার সাইটে যোগ করুন বাস্তব ব্যবহারকারীদের থেকে মেট্রিক সংগ্রহ করতে এবং আপনার অ্যানালিটিক্সে পাঠাতে।

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

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

দ্রুত শুরু করতে, PageSpeed Insights ব্যবহার করুন। এটি একটি রিপোর্টে ল্যাব এবং ফিল্ড ডেটা একত্রিত করে।

ধাপে ধাপে: LCP উন্নত করুন

LCP প্রায়ই এই ধাপগুলির সাথে উন্নত করা সবচেয়ে সহজ:

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

ধাপে ধাপে: INP উন্নত করুন

INP প্রতিক্রিয়াশীলতা পরিমাপ করে। উচ্চ INP প্রায়ই দীর্ঘ JavaScript টাস্ক থেকে আসে।

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

ধাপে ধাপে: CLS উন্নত করুন

CLS ভিজ্যুয়াল স্থিতিশীলতা সম্পর্কে। এই কৌশলগুলি দিয়ে অপ্রত্যাশিত শিফট প্রতিরোধ করুন:

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

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

মনিটরিং এবং ক্রমাগত উন্নতি

পারফরম্যান্স এক-বারের সমাধান নয়। সময়ের সাথে Core Web Vitals ট্র্যাক করতে রিয়েল-ইউজার মনিটরিং (RUM) সেট আপ করুন। আপনার অ্যানালিটিক্স প্ল্যাটফর্মে মেট্রিক পাঠাতে web-vitals লাইব্রেরি ব্যবহার করুন। রিগ্রেশনের জন্য সতর্কতা সেট করুন। উৎপাদনে পৌঁছানোর আগে সমস্যা ধরতে আপনার CI/CD পাইপলাইনে নিয়মিত Lighthouse দিয়ে অডিট করুন।

FAQ

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

LCP-এর জন্য, ভাল ≤ 2.5s, উন্নতি প্রয়োজন ≤ 4.0s, এবং খারাপ > 4.0s। INP-এর জন্য, ভাল ≤ 200ms, উন্নতি প্রয়োজন ≤ 500ms, এবং খারাপ > 500ms। CLS-এর জন্য, ভাল ≤ 0.1, উন্নতি প্রয়োজন ≤ 0.25, এবং খারাপ > 0.25।

আমি কত ঘন ঘন Core Web Vitals পরিমাপ করব?

বাস্তব ব্যবহারকারীর ডেটা দিয়ে ক্রমাগত মনিটর করুন। উল্লেখযোগ্য কোড পরিবর্তনের পরে এবং অন্তত মাসিক ল্যাব পরীক্ষা চালান। Search Console-এ ফিল্ড ডেটা প্রতিদিন আপডেট হয়, কিন্তু এটি ২৮ দিনের রোলিং উইন্ডো প্রতিফলিত করে।

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

ছবি কমপ্রেসন এবং ক্যাশিংয়ের মতো কিছু সমাধান প্লাগইন বা টুল দিয়ে করা যায়। তবে, JavaScript হ্রাস এবং সার্ভার টিউনিংয়ের মতো গভীর অপ্টিমাইজেশনের জন্য প্রায়ই ডেভেলপার জড়িত থাকা প্রয়োজন।

আপনার সাইট দ্রুত করতে প্রস্তুত? আপনার LCP-কে দ্রুত বুস্ট দিতে আমাদের ফ্রি Image Compressor দিয়ে আপনার ছবি কমপ্রেস করা শুরু করুন।