ওয়েবসাইট স্পিড অপটিমাইজেশন মাস্টার করার সম্পূর্ণ রোডম্যাপ — জিরো থেকে প্রো

রাত সাড়ে এগারোটা। চট্টগ্রামের একটা ছোট পোশাকের ব্র্যান্ড ফেসবুকে ছয় হাজার টাকার অ্যাড চালিয়েছে। ইনসাইটস বলছে ১,৪০০ জন লিংকে ক্লিক করেছে। অথচ সারা দিনে অর্ডার এসেছে মাত্র তিনটা। মালিক ধরে নিলেন প্রোডাক্ট ফটোগ্রাফি দুর্বল, নাকি দামটাই বেশি। আসল ঘটনা হলো — তাঁর সাইটটা মোবাইল ডেটায় খুলতে নিচ্ছিল প্রায় ৯ সেকেন্ড, আর বেশিরভাগ মানুষ ৩ সেকেন্ড পার হওয়ার আগেই ব্যাক বাটনে চাপ দিয়ে দিচ্ছিল। অর্থাৎ টাকাটা খরচ হয়েছে ঠিকই, ভিজিটর সাইট পর্যন্ত পৌঁছেছেও — শুধু সাইটটা তাদের ধরে রাখতে পারেনি।

এই দৃশ্যটা আমরা বছরে অসংখ্যবার দেখি। আর প্রতিবারই দেখি, ওয়েবসাইট স্পিড অপটিমাইজেশনকে সবাই ভাবে প্রজেক্টের শেষে করার একটা ফিনিশিং টাচ — যেন রঙের কাজ শেষে একটু পলিশ। বাস্তবে এটা ডেভেলপমেন্টের মতোই একটা কাঠামোগত কাজ, যার একটা নির্দিষ্ট ক্রম আছে। ক্রমটা উল্টে গেলে পরিশ্রম যায়, টাকা যায়, ফল আসে না। নিচের রোডম্যাপটা সেই ক্রমটাই — ছয়টা ধাপ, যেগুলো একটার পর একটা করলেই ফলাফল চোখে পড়ে।

আগে রোগ নির্ণয়, তারপর ওষুধ

প্রথম ভুলটাই হয় এখানে। কেউ সমস্যা না বুঝে সরাসরি একটা ক্যাশ প্লাগইন কিনে বসিয়ে দেন, তারপর স্কোর না বাড়লে হতাশ হন। তার আগে দুটো জিনিস মাপুন। এক, ল্যাব ডেটা — PageSpeed Insights বা WebPageTest দিয়ে নিয়ন্ত্রিত পরিবেশে টেস্ট। দুই, ফিল্ড ডেটা — অর্থাৎ আপনার আসল ভিজিটরদের ফোনে সাইটটা আসলে কেমন চলছে, যেটা Search Console-এর Core Web Vitals রিপোর্টে গত ২৮ দিনের হিসাব হিসেবে দেখা যায়।

টেস্ট করার সময় ল্যাপটপের ব্রডব্যান্ডে বসে টেস্ট করবেন না। Chrome DevTools খুলে Network ট্যাবে থ্রটলিং “Slow 4G” করে দিন, আর Performance ট্যাবে CPU 4x slowdown চালু করুন। কারণ আপনার কাস্টমারের হাতে যে বারো-চৌদ্দ হাজার টাকার ফোনটা আছে, সেটা আপনার ল্যাপটপ নয়। এই একটা সেটিং বদলালেই বোঝা যায়, সাইটটা আসলে কত ভারী।

যে চারটা সংখ্যা নোট করে রাখবেন, বাকি পুরো কাজটা এদেরকে ঘিরেই আবর্তিত হবে:

• LCP (সবচেয়ে বড় কনটেন্টটা কখন দেখা যায়) — লক্ষ্য ২.৫ সেকেন্ডের নিচে
• INP (ক্লিক বা ট্যাপের পর সাইট কত দ্রুত সাড়া দেয়) — লক্ষ্য ২০০ মিলিসেকেন্ডের নিচে
• CLS (লেআউট লাফায় কি না) — লক্ষ্য ০.১-এর নিচে
• TTFB (সার্ভার প্রথম বাইট পাঠাতে কত সময় নেয়) — লক্ষ্য ৬০০ মিলিসেকেন্ডের নিচে

সমস্যা আসলে জমে কোথায়

শত শত বাংলাদেশি সাইট ঘেঁটে দেখা যায়, ভারী হওয়ার কারণগুলো ঘুরেফিরে একই কয়েকটা। হোস্টিং বসে আছে আমেরিকার কোনো ডেটাসেন্টারে, ফলে ঢাকা থেকে প্রতিটা রিকোয়েস্টে বাড়তি ২০০-৩০০ মিলিসেকেন্ড শুধু যাওয়া-আসাতেই চলে যাচ্ছে। প্রোডাক্টের ছবি ফটোগ্রাফারের ক্যামেরা থেকে সরাসরি আপলোড হয়েছে — একেকটা ৪ মেগাবাইট। থিমের সঙ্গে ফ্রি বান্ডেল হিসেবে এসেছে দুটো স্লাইডার আর একটা পেজ বিল্ডার, যার একটাও ব্যবহার হচ্ছে না অথচ প্রতিটা পেজে লোড হচ্ছে।

এর সঙ্গে যোগ হয় তৃতীয় পক্ষের স্ক্রিপ্ট — ফেসবুক পিক্সেল, দুটো আলাদা চ্যাট উইজেট, গুগল ট্যাগ ম্যানেজার, একটা রিভিউ অ্যাপ। প্রত্যেকটা নিজের মতো করে জাভাস্ক্রিপ্ট টেনে আনে, আর মোবাইলের দুর্বল প্রসেসরে সেগুলো চালাতে গিয়ে মেইন থ্রেড আটকে যায়। ফলে পেজ দেখা গেলেও ট্যাপ করলে কিছু হয় না — ইউজার বিরক্ত হয়ে বেরিয়ে যান।

ধাপ ১ — সার্ভার আর TTFB (প্রথম সপ্তাহ)

সবচেয়ে উপরের ধাপ থেকেই শুরু করুন, কারণ সার্ভার যদি প্রথম বাইট পাঠাতেই ১.২ সেকেন্ড নেয়, তাহলে ছবি কমপ্রেস করে আপনি বড়জোর ৩০০ মিলিসেকেন্ড বাঁচাবেন — মূল ক্ষতটা থেকেই যাবে। ঢাকা থেকে সিঙ্গাপুর বা মুম্বাইয়ের ডেটাসেন্টারে লেটেন্সি সাধারণত ৬০-৯০ মিলিসেকেন্ড, যেখানে আমেরিকার ইস্ট কোস্টে সেটা ২৫০ মিলিসেকেন্ড ছাড়ায়। ট্রাফিক যদি মূলত দেশের ভেতর থেকে আসে, সার্ভার কাছে আনুন।

একই সঙ্গে PHP ভার্সন ৮.১ বা তার ওপরে তুলুন, LiteSpeed সার্ভার হলে LSCache চালু করুন, আর ডাইনামিক সাইটে Redis অবজেক্ট ক্যাশ যোগ করুন। বছরে ১,৫০০ টাকার শেয়ার্ড হোস্টিংয়ে বসে ৯৫ স্কোর আশা করা আর ৫০ সিসির স্কুটি নিয়ে হাইওয়েতে রেস দিতে চাওয়া — দুটো একই জিনিস। মোটামুটি ভালো একটা হোস্টিং প্ল্যানের জন্য বছরে ৬,০০০ থেকে ১২,০০০ টাকা ধরে রাখুন; এটাই সবচেয়ে বেশি রিটার্ন দেওয়া খরচ।

ধাপ ২ — ছবি (প্রথম থেকে দ্বিতীয় সপ্তাহ)

বেশিরভাগ বাংলাদেশি ই-কমার্স সাইটে মোট পেজ ওজনের ৭০ শতাংশের বেশি শুধু ছবি। ৪.২ মেগাবাইটের একটা JPEG ঠিকভাবে রিসাইজ ও WebP-তে রূপান্তর করলে ১৮০ কিলোবাইটে নেমে আসে, অথচ চোখে পার্থক্য ধরা পড়ে না। নিয়মটা সহজ — ছবিটা স্ক্রিনে যত পিক্সেল চওড়া দেখাবে, তার চেয়ে বড় ফাইল আপলোড করবেন না। হোমপেজের ব্যানারের জন্য ১৬০০ পিক্সেল, প্রোডাক্ট থাম্বনেইলের জন্য ৮০০ পিক্সেলই যথেষ্ট।

Squoosh দিয়ে হাতে করতে পারেন, বা ShortPixel/Imagify বসিয়ে অটোমেট করতে পারেন। তবে একটা ফাঁদ থেকে সাবধান: অনেকে সব ছবিতে লেজি লোড চালু করে দেন, ফলে হোমপেজের সবচেয়ে বড় ব্যানার ছবিটাও দেরিতে লোড হয় এবং LCP উল্টো খারাপ হয়। ফোল্ডের ওপরের প্রধান ছবিটায় লেজি লোড বন্ধ রাখুন, বরং তাতে fetchpriority="high" দিন।

ধাপ ৩ — প্লাগইন আর স্ক্রিপ্টের ওজন কমানো (দ্বিতীয় থেকে তৃতীয় সপ্তাহ)

Query Monitor প্লাগইনটা বসিয়ে দেখুন কোন প্লাগইন কত কোয়েরি আর কত সময় খাচ্ছে। এরপর ব্রাউজারের Coverage ট্যাব খুলে দেখুন — একটা পেজে যত CSS ও JS লোড হচ্ছে, তার কত শতাংশ আসলে ব্যবহারই হচ্ছে না। সাধারণ ওয়ার্ডপ্রেস সাইটে এই অব্যবহৃত অংশ ৬০ শতাংশের ওপরে থাকে।

কনট্যাক্ট ফর্মের CSS কেন প্রোডাক্ট পেজে লোড হবে? স্লাইডারের স্ক্রিপ্ট কেন ব্লগ পোস্টে যাবে? Perfmatters বা LiteSpeed-এর অ্যাসেট ম্যানেজার দিয়ে পেজভিত্তিক আনলোড করুন। চ্যাট উইজেট বা রিভিউ অ্যাপের মতো তৃতীয় পক্ষের স্ক্রিপ্টগুলোকে ইউজার ইন্টার‌্যাকশনের আগ পর্যন্ত আটকে রাখুন — সাইট লোডের সঙ্গে সঙ্গে ওগুলোর লোড হওয়ার কোনো দরকার নেই।

ধাপ ৪ — বাংলা ফন্টের হিসাব (এই ধাপটা প্রায় সবাই ভুলে যান)

এটা এমন একটা সমস্যা, যেটা বিদেশি কোনো টিউটোরিয়ালে পাবেন না। Hind Siliguri বা Noto Sans Bengali-র মতো বাংলা ফন্টে গ্লিফের সংখ্যা অনেক, তাই ফাইলগুলোও ভারী। অনেকে গুগল ফন্ট থেকে পাঁচ-ছয়টা ওয়েট একসঙ্গে টেনে আনেন — সব মিলিয়ে ৫০০-৬০০ কিলোবাইট, যা লোড না হওয়া পর্যন্ত টেক্সট দেখাই যায় না।

সমাধান তিনটা। ফন্ট নিজের সার্ভারে হোস্ট করুন (তাতে বাড়তি DNS লুকআপ ও কানেকশন বাঁচে), woff2 ফরম্যাটে বাংলা ইউনিকোড রেঞ্জে সাবসেট করুন, আর যে দুটো ওয়েট সত্যিই ব্যবহার করছেন (সাধারণত ৪০০ আর ৬০০) শুধু সেগুলোই রাখুন। সঙ্গে font-display: swap দিন, আর প্রধান ফন্ট ফাইলটা preload করুন। ৬০০ কিলোবাইট এভাবে ৯০ কিলোবাইটে নেমে আসে।

ধাপ ৫ — ক্যাশিং ও CDN (তৃতীয় থেকে চতুর্থ সপ্তাহ)

এতক্ষণে সাইট হালকা হয়েছে, এখন ক্যাশ বসালে সেটা সত্যিই কাজে দেবে। পেজ ক্যাশ চালু করুন, স্ট্যাটিক ফাইলে এক বছরের ব্রাউজার ক্যাশ হেডার দিন, আর Cloudflare-এর ফ্রি প্ল্যান দিয়েও অ্যাসেটগুলো এজ থেকে সার্ভ করান। ফ্রি প্ল্যানেই ছবি ও CSS/JS ক্যাশ হয়ে যায়, তাতে রিপিট ভিজিটে বড় পার্থক্য আসে।

WooCommerce সাইটে ক্যাশ চালু করার আগে অবশ্যই /cart, /checkout আর /my-account পেজ এক্সক্লুড করুন। এই ভুলটার কারণে একজন কাস্টমারের কার্ট আরেকজনের স্ক্রিনে দেখা যেতে পারে — আমরা বাস্তবে এমন ঘটনা ঠিক করেছি, এবং সেটা স্পিডের চেয়ে অনেক বড় ক্ষতি।

ধাপ ৬ — মাপা বন্ধ করবেন না

স্পিড একবারের কাজ নয়। নতুন একটা প্লাগইন, একটা নতুন পিক্সেল, কিংবা ক্লায়েন্টের আপলোড করা ৫ মেগাবাইটের ব্যানার — যেকোনো একটাই আপনার এক মাসের পরিশ্রম নষ্ট করতে পারে। তাই একটা পারফরম্যান্স বাজেট ঠিক করুন: হোমপেজ ১.৫ মেগাবাইটের নিচে, রিকোয়েস্ট ৫০-এর কম। প্রতি মাসে একবার Search Console-এর Core Web Vitals রিপোর্ট দেখুন, কারণ ওটাই আসল ব্যবহারকারীর অভিজ্ঞতা বলে।

যেসব শর্টকাট উল্টো ক্ষতি করে

• একসঙ্গে তিনটা অপটিমাইজেশন প্লাগইন (WP Rocket + Autoptimize + LiteSpeed Cache) চালানো — এরা একে অপরের কাজ ভেঙে দেয়
• স্কোরের পেছনে ছোটা: PageSpeed-এ ১০০ পেতে গিয়ে সাইটের ফাংশনালিটি নষ্ট করে ফেলা
• না বুঝে jQuery ডিফার বা রিমুভ করা, যার ফলে অ্যাড-টু-কার্ট বাটন কাজ করা বন্ধ করে দেয়
• ৫০০ টাকার “স্পিড অপটিমাইজেশন” সার্ভিস কেনা, যেখানে আসলে শুধু একটা ফ্রি প্লাগইন ইনস্টল করে স্ক্রিনশট পাঠানো হয়

ছোট চেকলিস্ট

• হোস্টিং সিঙ্গাপুর/মুম্বাই অঞ্চলে, PHP ৮.১+, TTFB ৬০০ মিলিসেকেন্ডের নিচে
• সব ছবি WebP, সঠিক মাপে রিসাইজ করা, হিরো ইমেজে লেজি লোড বন্ধ
• অব্যবহৃত প্লাগইন ডিলিট (শুধু ডিঅ্যাক্টিভ নয়), পেজভিত্তিক CSS/JS আনলোড
• বাংলা ফন্ট সেলফ-হোস্টেড, সাবসেট করা, সর্বোচ্চ দুটো ওয়েট
• পেজ ক্যাশ চালু, কিন্তু কার্ট/চেকআউট এক্সক্লুড করা
• চ্যাট ও পিক্সেল স্ক্রিপ্ট ইন্টার‌্যাকশনের পর লোড হয়
• প্রতি মাসে Core Web Vitals রিপোর্ট চেক করা হয়

সাধারণ কিছু প্রশ্ন

PageSpeed স্কোর ১০০ না হলে কি র‍্যাংক পাব না?

না। গুগল স্কোর দেখে না, দেখে আসল ব্যবহারকারীর ডেটা — অর্থাৎ LCP, INP আর CLS পাস করছে কি না। ৮৫ স্কোর নিয়েও সাইট দিব্যি র‍্যাংক করে, আবার ৯৯ স্কোর নিয়েও ফিল্ড ডেটা খারাপ হতে পারে। স্কোরকে থার্মোমিটার ভাবুন, লক্ষ্য নয়।

শুধু একটা ক্যাশ প্লাগইন বসালেই কি হবে না?

প্রথম দিনেই হয়তো ২০-৩০ শতাংশ উন্নতি দেখবেন, কিন্তু ভারী ছবি, দূরের সার্ভার আর অপ্রয়োজনীয় স্ক্রিপ্টের সমস্যা ক্যাশ দিয়ে ঢাকা যায় না। ক্যাশ হলো লক্ষণ চাপা দেওয়ার ওষুধ; রোডম্যাপের বাকি ধাপগুলো রোগ সারায়।

পুরো কাজটা করতে কত সময় আর খরচ লাগে?

একটা সাধারণ ব্রোশিওর সাইটে ৩-৫ দিন, মাঝারি WooCommerce স্টোরে ২-৪ সপ্তাহ ধরে রাখুন। খরচের সবচেয়ে বড় অংশ আসলে হোস্টিং আপগ্রেড, বাকিটা সময় ও মনোযোগ।

মোবাইল আর ডেস্কটপ স্কোরে এত পার্থক্য কেন?

কারণ মোবাইল টেস্ট ধীর নেটওয়ার্ক ও দুর্বল প্রসেসর ধরে করা হয়। আপনার ভিজিটরদের ৮০ শতাংশের বেশি যেহেতু মোবাইল থেকে আসেন, মোবাইল স্কোরটাই আসল স্কোর — ডেস্কটপেরটা নিয়ে খুশি হওয়ার কিছু নেই।

ওয়েবসাইট স্পিড অপটিমাইজেশন জাদু নয়, ধৈর্য আর ক্রম মেনে চলার কাজ। উপরের ধাপগুলো ধরে নিজে এগোতে পারেন — আর কোথাও আটকে গেলে বা সাইটটা একবার পুরো অডিট করিয়ে নিতে চাইলে স্ট্যাক অ্যালিক্স-এর টিম তো আছেই। আমরা রিপোর্ট দিই সংখ্যায়, স্ক্রিনশটে নয়।