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

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

Core Web Vitals কী?

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

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

এই থ্রেশহোল্ডগুলি বাস্তব ব্যবহারকারীদের ফিল্ড ডেটার উপর ভিত্তি করে, ল্যাব টেস্টের উপর নয়। তাই সঠিকভাবে পরিমাপ করা অত্যন্ত গুরুত্বপূর্ণ।

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

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

ফিল্ড টুলস (রিয়েল ইউজার মনিটরিং)

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

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

• Lighthouse: Chrome DevTools-এ বিল্ট-ইন। ল্যাব মেট্রিক এবং সুযোগ প্রদান করে।
• WebPageTest: ফিল্মস্ট্রিপ এবং ওয়াটারফল চার্ট সহ উন্নত টেস্টিং।
• Chrome DevTools Performance প্যানেল: রানটাইম পারফরম্যান্সে গভীরভাবে অনুসন্ধান।

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

LCP উন্নত করা: মূল কন্টেন্ট দ্রুত লোড করান

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

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

<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Responsive images -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">

INP উন্নত করা: ইন্টারঅ্যাকশন তাৎক্ষণিক অনুভব করান

INP মার্চ ২০২৪-এ First Input Delay (FID) প্রতিস্থাপন করেছে। এটি শুধুমাত্র প্রক্রিয়াকরণের আগের বিলম্ব নয়, বরং ইন্টারঅ্যাকশনের সম্পূর্ণ সময়কাল পরিমাপ করে। INP উন্নত করতে, আপনাকে JavaScript এক্সিকিউশন সময় কমাতে হবে এবং দীর্ঘ টাস্ক এড়াতে হবে।

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

ইন্টারঅ্যাকশন রেকর্ড করতে এবং দীর্ঘ টাস্ক সনাক্ত করতে DevTools-এ Performance প্যানেল ব্যবহার করুন।

CLS উন্নত করা: আপনার লেআউট স্থিতিশীল রাখুন

CLS ঘটে যখন এলিমেন্ট অপ্রত্যাশিতভাবে স্থানান্তরিত হয়। সাধারণ কারণগুলি হল মাত্রা ছাড়া ছবি, বিজ্ঞাপন, এমবেড এবং গতিশীলভাবে ইনজেক্ট করা কন্টেন্ট।

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

<!-- Reserve space with aspect-ratio -->
<img src="#" width="800" height="600" alt="...">

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

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

Core Web Vitals উন্নত করা এককালীন কাজ নয়। ফিক্স ডিপ্লয় করার পরে, রিগ্রেশন না ঘটে তা নিশ্চিত করতে ফিল্ড ডেটা মনিটর করুন। মেট্রিক থ্রেশহোল্ড অতিক্রম করলে আপনার RUM টুলে সতর্কতা সেট আপ করুন। প্রোডাকশনে পৌঁছানোর আগে পারফরম্যান্স রিগ্রেশন ধরতে নিয়মিত CI-তে Lighthouse চালান।

মনে রাখবেন পারফরম্যান্স একটি বৈশিষ্ট্য। Core Web Vitals-কে অগ্রাধিকার দিয়ে, আপনি একটি ভাল অভিজ্ঞতা প্রদান করেন যা ব্যবহারকারীদের নিযুক্ত রাখে এবং আপনার সার্চ র‍্যাঙ্কিং বাড়ায়।

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

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

LCP-এর জন্য, ভাল হল ২.৫ সেকেন্ডের নিচে, উন্নতি প্রয়োজন ২.৫–৪.০ সেকেন্ড, এবং খারাপ ৪.০ সেকেন্ডের উপরে। INP-এর জন্য, ভাল হল ২০০ মিলিসেকেন্ডের নিচে, উন্নতি প্রয়োজন ২০০–৫০০ মিলিসেকেন্ড, এবং খারাপ ৫০০ মিলিসেকেন্ডের উপরে। CLS-এর জন্য, ভাল হল ০.১-এর নিচে, উন্নতি প্রয়োজন ০.১–০.২৫, এবং খারাপ ০.২৫-এর উপরে।

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

CrUX-এ ফিল্ড ডেটা প্রতিদিন আপডেট হয়, তবে এটি ২৮ দিনের রোলিং গড়। আপনার ক্রমাগত মনিটর করা উচিত এবং প্রতিটি উল্লেখযোগ্য কোড পরিবর্তনের পরে ল্যাব টেস্ট চালানো উচিত। প্রাথমিকভাবে রিগ্রেশন ধরতে আপনার CI/CD পাইপলাইনে স্বয়ংক্রিয় Lighthouse রান সেট আপ করুন।

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

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

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