Core Web Vitals সহজ ভাষায়: LCP, INP ও CLS — Online Shop-এর জন্য

Search Console খুলে "Core Web Vitals" report-এ লাল রঙের "Poor URLs" দেখেছেন, অথবা developer বলছেন "আপনার LCP খারাপ, CLS ঠিক করতে হবে" — কিন্তু এগুলোর মানে কী, আর আপনার বিক্রির সাথে সম্পর্ক কোথায়, পরিষ্কার নয়? এই লেখায় তিনটা metric — LCP, INP ও CLS — সহজ ভাষায় বুঝবেন, কোন সংখ্যা ভালো, কোথায় মাপবেন, আর online shop-এ প্রতিটা খারাপ হওয়ার সাধারণ কারণ ও সমাধান।

Core Web Vitals কী

Core Web Vitals হলো Google-এর নির্ধারিত তিনটা মাপকাঠি, যা দিয়ে বোঝা যায় একজন আসল ব্যবহারকারী page-এ কেমন অভিজ্ঞতা পাচ্ছেন। প্রশ্ন তিনটা:

• Page-এর মূল জিনিস কত দ্রুত দেখা গেল? → LCP
• Tap/click করলে page কত দ্রুত সাড়া দিল? → INP
• Page লোডের সময় জিনিসপত্র লাফালাফি করল কিনা? → CLS

২০২৪ সালের মার্চে INP (Interaction to Next Paint) পুরনো FID (First Input Delay)-এর জায়গা নিয়েছে। কোনো পুরনো গাইডে FID দেখলে বুঝবেন সেটা হালনাগাদ নয়।

তিনটা metric ও তাদের সীমা

Google এগুলো মাপে আসল ব্যবহারকারীদের ৭৫তম percentile ধরে — অর্থাৎ আপনার অন্তত ৭৫% visit-এ অভিজ্ঞতা "ভালো" সীমার মধ্যে থাকলে সেই metric pass। তাই দ্রুত WiFi-তে আপনার নিজের phone-এ দ্রুত খুললেই হবে না; গ্রামের ধীর mobile data-র customer-ও হিসাবে আছেন।

কেন এটা আপনার ব্যবসার জন্য জরুরি

Core Web Vitals Google-এর page experience মূল্যায়নের অংশ, এবং Google ranking-এ এগুলো বিবেচনা করে। তবে সৎভাবে বললে, এটা relevance ও content-এর চেয়ে বড় factor নয় — CWV pass করলেই ranking-এ উঠে যাবেন, এমন নয়।

আসল গুরুত্ব ব্যবসায়িক। Facebook Ads-এর visitor product page-এ এসে ছবি না দেখেই ফিরে গেলে (খারাপ LCP), "Add to Cart" চাপার পর কিছু না ঘটায় বারবার চাপলে (খারাপ INP), বা "Order Now" চাপতে গিয়ে ভুলে banner-এ চাপ পড়লে (খারাপ CLS) — প্রতিটা ক্ষেত্রেই অর্ডার হারানোর ঝুঁকি। Click আসে কিন্তু বিক্রি হয় না এমন পরিস্থিতিতে speed-ও একটা কারণ হতে পারে, যা বিস্তারিত আছে Facebook Ads-এ click আসে কিন্তু sale হয় না লেখায়।

LCP: মূল জিনিস কত দ্রুত দেখা যায়

Product page-এ LCP element সাধারণত main product ছবি, home page-এ hero banner, blog-এ প্রথম বড় heading বা ছবি।

খারাপ LCP-এর সাধারণ কারণ

• ধীর server response (দুর্বল hosting, cache নেই)
• ভারী, বড় মাপের ছবি
• Main ছবিতে ভুল করে lazy loading
• Render আটকে রাখা CSS/JS ও font
• JavaScript slider, যা JS লোড হওয়ার পরেই ছবি দেখায়

সমাধান

ছবি resize ও WebP-তে optimize করুন, LCP ছবিতে lazy loading না দিয়ে fetchpriority="high" দিন (বিস্তারিত lazy loading গাইডে), page cache চালু করুন, আর সম্ভব হলে slider-এর বদলে static banner ব্যবহার করুন।

INP: tap করলে কত দ্রুত সাড়া

INP মাপে page-এ থাকাকালীন ব্যবহারকারীর click, tap ও keyboard input-এর পর পরবর্তী দৃশ্যমান পরিবর্তন আসতে কত সময় লাগে — পুরো visit জুড়ে, শুধু প্রথম click নয়। Size বাছাই, color বদলানো, "Add to Cart", mobile menu খোলা, checkout form পূরণ — সবই এর আওতায়।

খারাপ INP-এর সাধারণ কারণ

• অনেক third-party script (Pixel, GTM tag, chat widget, popup) main thread ব্যস্ত রাখে
• ভারী theme/page builder-এর JavaScript
• Variation বদলালে পুরো page-এর বড় অংশ নতুন করে তৈরি হওয়া
• কম শক্তির Android phone — বাংলাদেশে খুবই সাধারণ

সমাধান

অপ্রয়োজনীয় script সরান, duplicate tracking বন্ধ করুন, chat widget-এর মতো জিনিস পরে লোড করুন। Custom site-এ developer লম্বা JavaScript কাজ ছোট ভাগে ভাগ করতে পারেন এবং click-এর পর প্রথমে দৃশ্যমান feedback (যেমন button-এ loading চিহ্ন) দেখিয়ে ভারী কাজ পরে করতে পারেন।

CLS: page লাফায় কিনা

ধরুন customer "Order Now" চাপতে যাচ্ছেন, ঠিক তখন উপরে একটা banner লোড হয়ে button নিচে সরে গেল — তিনি চাপলেন অন্য কিছুতে। এটাই layout shift।

খারাপ CLS-এর সাধারণ কারণ

• ছবিতে width/height না থাকা
• পরে লোড হওয়া banner, notice bar, cookie/offer popup যা content ঠেলে দেয়
• Font বদলানোর সময় text-এর মাপ বদলে যাওয়া
• Ad বা embed-এর জন্য জায়গা না রাখা

সমাধান

প্রতিটা ছবি ও video-তে width/height বা CSS aspect-ratio দিন, notice bar বা offer banner-এর জন্য আগেই জায়গা রাখুন, আর নতুন content উপরে না ঢুকিয়ে overlay বা নির্দিষ্ট জায়গায় দেখান।

কোথায় মাপবেন

• Google Search Console → Core Web Vitals report: পুরো site-এর আসল ব্যবহারকারীর data, একই ধরনের URL group করে দেখায়। Search Console for online shops গাইডে report পড়ার নিয়ম আছে।
• PageSpeed Insights: নির্দিষ্ট URL-এর field data (যথেষ্ট visitor থাকলে) ও lab test, সাথে কী ঠিক করতে হবে তার তালিকা।
• Chrome DevTools (Lighthouse ও Performance panel): developer-এর জন্য বিস্তারিত বিশ্লেষণ।

মনে রাখবেন, lab test-এ INP মাপা যায় না, কারণ সেখানে কেউ আসলে click করে না — lab-এ এর কাছাকাছি সূচক হিসেবে Total Blocking Time (TBT) দেখানো হয়। নতুন বা কম traffic-এর site-এ field data না থাকলে এই lab সূচকগুলো দিয়েই কাজ শুরু করুন।

ধাপে ধাপে: Core Web Vitals ঠিক করার পরিকল্পনা

1. 1
   Search Console → Core Web Vitals report খুলুন, mobile অংশ আগে দেখুন।
2. 2
   কোন metric (LCP, INP না CLS) সমস্যা, আর কোন ধরনের URL group (product, category, home) প্রভাবিত — লিখে রাখুন।
3. 3
   প্রতিটা group থেকে একটা নমুনা URL PageSpeed Insights-এ test করে প্রধান কারণ খুঁজুন।
4. 4
   সবচেয়ে বেশি traffic পাওয়া page type (সাধারণত product page) দিয়ে শুরু করুন।
5. 5
   LCP হলে: ছবি, cache, lazy loading ও server response ঠিক করুন।
6. 6
   INP হলে: third-party script ও ভারী JavaScript কমান।
7. 7
   CLS হলে: ছবির মাপ, banner/notice bar ও font ঠিক করুন।
8. 8
   পরিবর্তন live করার পর Search Console-এ Validate fix চাপুন এবং ৪ সপ্তাহ পর্যন্ত অপেক্ষা করে ফলাফল দেখুন।

সাধারণ ভুলগুলো

পরবর্তী পদক্ষেপ

আজ Search Console-এর Core Web Vitals report খুলে দেখুন কোন metric-এ আপনার সমস্যা, আর কোন page type-এ। সমস্যা একটা হলে সেটাতেই মনোযোগ দিন — তিনটাই একসাথে ঠিক করার দরকার নেই। পুরো speed উন্নতির কাজ অগ্রাধিকার অনুযায়ী সাজানো আছে PageSpeed optimization for online shops গাইডে।