PageSpeed Optimization: Online Shop দ্রুত করার ব্যবহারিক গাইড

PageSpeed Insights-এ আপনার shop-এর mobile score লাল দেখে চিন্তিত? অথবা কেউ বলেছেন "score ৯০-এর উপরে না নিলে Google-এ আসবেন না"? এই গাইডে দেখবেন score আসলে কী মাপে, কোন সংখ্যাটা বেশি গুরুত্বপূর্ণ, আর একটা online shop-এ কোন কাজগুলো সবচেয়ে বেশি ফল দেয় — WordPress/WooCommerce ও Laravel দুই ধরনের site-এর জন্য, অগ্রাধিকার অনুযায়ী সাজানো।

PageSpeed Insights-এর দুটো অংশ বুঝুন

PageSpeed Insights (PSI) Google-এর free tool — pagespeed.web.dev-এ URL দিলেই report পাবেন। এখানে দুই ধরনের তথ্য থাকে, আর এই পার্থক্য না বুঝলে ভুল সিদ্ধান্ত নেওয়া হয়:

ছোট বা নতুন site-এ পর্যাপ্ত visitor না থাকলে field data দেখাবে না — তখন lab data দিয়েই কাজ চালাতে হবে। মনে রাখবেন, lab test একটা ধীর mobile network ও মাঝারি phone simulate করে, তাই mobile score সাধারণত desktop-এর চেয়ে কম আসে — এটা স্বাভাবিক।

Score কি ranking factor?

০–১০০ score নিজে সরাসরি ranking factor নয়। Google search-এ page experience-এর অংশ হিসেবে দেখে আসল ব্যবহারকারীদের Core Web Vitals। আর এগুলোও relevance ও content-এর চেয়ে বড় কিছু নয় — দ্রুত কিন্তু দুর্বল content-এর page ভালো content-এর ধীর page-কে সবসময় হারায় না। তবে ব্যবসার দিক থেকে speed-এর গুরুত্ব অনেক: ad-এর click-এর টাকা দিয়ে আনা visitor page খোলার আগেই চলে গেলে সেটা সরাসরি ক্ষতি।

Online shop ধীর হওয়ার সাধারণ কারণ

• দুর্বল hosting / ধীর server response (TTFB): সস্তা shared hosting-এ অনেক site একসাথে থাকে; WooCommerce-এর মতো ভারী site-এ এটা বড় বাধা।
• ভারী ছবি: phone থেকে তোলা কয়েক MB-এর ছবি সরাসরি upload।
• Third-party script: Meta Pixel, Google Tag Manager, TikTok Pixel, live chat, Messenger widget, heatmap tool — প্রতিটা আলাদা ভার।
• Theme/page builder ও plugin-এর ভিড়: ৪০–৫০টা plugin, যার অনেকগুলো প্রতিটা page-এ CSS/JS লোড করে।
• Font: Bangla ও English মিলিয়ে একাধিক font family, প্রতিটার অনেক weight।
• Slider ও animation: home page-এ ৫–৬ slide-এর বড় slider।
• Cache নেই: প্রতিটা visit-এ server নতুন করে page তৈরি করে।

অগ্রাধিকার অনুযায়ী কাজের তালিকা

সব পরামর্শ একসাথে করতে গেলে site ভাঙার ঝুঁকি থাকে। প্রভাব বেশি আর ঝুঁকি কম — এমন কাজ দিয়ে শুরু করুন:

১. ছবি

বেশিরভাগ shop-এ সবচেয়ে সহজ জয় এখানেই। ছবি সঠিক মাপে resize করে WebP-তে convert করার পূর্ণ পদ্ধতি পাবেন WebP image optimization গাইডে। আর প্রথম screen-এর বড় ছবি lazy না করা, বাকিগুলো lazy করা — এর নিয়ম আছে lazy loading লেখায়।

২. Cache

Page cache থাকলে server প্রতিবার PHP ও database চালিয়ে page বানায় না, আগের তৈরি HTML দিয়ে দেয়। LiteSpeed server-এ LiteSpeed Cache, অন্য server-এ WP Rocket বা W3 Total Cache-এর মতো plugin ব্যবহার হয়। WooCommerce-এ cart, checkout ও my-account page cache থেকে বাদ রাখতে হয় — ভালো cache plugin এটা নিজেই করে, তবু একবার যাচাই করুন।

৩. Script ও plugin-এর ভার কমানো

একটা তালিকা বানান: কোন script/plugin কী কাজ করে, আর গত ৩ মাসে আপনি সেটার data আসলে ব্যবহার করেছেন কিনা। Heatmap tool চালু করে কখনো দেখেননি? সরিয়ে দিন। Meta Pixel আর GTM-এর মাধ্যমে একই Pixel দুবার লোড হচ্ছে? একটা রাখুন। Chat widget প্রথমেই লোড না করে user interaction-এর পরে লোড করা যায় কিনা developer-কে জিজ্ঞেস করুন।

৪. Font

Bangla font-এর file অনেক সময় বড় হয়। একটা Bangla ও একটা English family, আর ২–৩টা weight (regular, bold) সাধারণত যথেষ্ট। Font নিজের server-এ রাখুন (self-host), WOFF2 format ব্যবহার করুন, আর CSS-এ font-display: swap দিন যাতে font আসার আগেই text দেখা যায়।

ধাপে ধাপে: WordPress/WooCommerce

1. 1
   পুরো site-এর backup নিন; সম্ভব হলে staging copy-তে আগে পরীক্ষা করুন।
2. 2
   PSI-তে home, একটা category ও একটা product page test করুন (mobile) — score, LCP ও প্রধান পরামর্শ একটা sheet-এ লিখুন।
3. 3
   ছবি optimize করুন (resize + WebP) এবং LCP ছবিতে lazy loading নেই তা নিশ্চিত করুন।
4. 4
   একটা cache plugin চালু করুন; cart/checkout/my-account বাদ আছে কিনা দেখুন।
5. 5
   Plugin তালিকা পর্যালোচনা করে অপ্রয়োজনীয়গুলো deactivate ও delete করুন।
6. 6
   Tracking script-এর duplicate সরান (যেমন একই Pixel দুবার)।
7. 7
   Font family ও weight কমান, self-host করুন।
8. 8
   Hosting panel থেকে PHP version সমর্থিত সর্বশেষ stable version-এ নিন (আগে plugin compatibility দেখে)।
9. 9
   প্রতিটা বড় পরিবর্তনের পর cache clear করে test করুন এবং একটা test order দিয়ে checkout যাচাই করুন।

Custom site (Laravel)-এর জন্য

Laravel site-এ নিয়ন্ত্রণ বেশি, তাই সঠিকভাবে বানালে খুব দ্রুত হতে পারে। Developer-এর সাথে এই তালিকা মিলিয়ে নিন:

• Production cache: php artisan config:cache, route:cache, view:cache; server-এ OPcache চালু।
• Database: N+1 query এড়াতে eager loading (with()), দরকারি column-এ index, ভারী query-র ফল Redis বা file cache-এ রাখা।
• Queue: order confirmation SMS/email, courier API call-এর মতো কাজ queue-তে পাঠান, যাতে checkout-এর response দেরি না হয়।
• Frontend build: Vite দিয়ে minified CSS/JS, অপ্রয়োজনীয় library বাদ; বড় jQuery plugin-এর বদলে হালকা বিকল্প।
• ছবি: upload-এর সময় resize + WebP, একাধিক size।
• HTTP: gzip/brotli compression, static file-এ দীর্ঘ cache header, CDN।

WooCommerce নাকি custom Laravel — কোনটা আপনার ব্যবসার জন্য ঠিক, speed সহ বিভিন্ন দিক থেকে তুলনা পাবেন WooCommerce vs Laravel for eCommerce in Bangladesh লেখায়।

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

এখন কী করবেন

আজ আপনার ৩টা গুরুত্বপূর্ণ URL-এর PSI ফলাফল একটা sheet-এ লিখে রাখুন — এটাই আপনার baseline। তারপর উপরের অগ্রাধিকার তালিকা থেকে এক এক করে কাজ করুন, প্রতিটার পর আবার মাপুন। Site এখনো ধীর থাকলে এবং কারণ বুঝতে না পারলে ধীর e-commerce website: কারণ ও সমাধান লেখায় সমস্যা নির্ণয়ের পুরো checklist পাবেন।