ওয়েবসাইট স্পিড অপটিমাইজেশন: বিগিনার থেকে অ্যাডভান্সড — পুরো পথটা একসাথে

ঢাকার একটা অনলাইন কোর্স প্ল্যাটফর্মের মালিক আমাদের একটা স্ক্রিনশট পাঠালেন — PageSpeed Insights-এ মোবাইল স্কোর ৯৬, সবুজ। সঙ্গে লিখলেন, তাহলে আমার আটশো স্টুডেন্ট রোজ কেন অভিযোগ করছে যে ক্লাসের ড্যাশবোর্ড খুলতে আধা মিনিট লাগে? তিনি ভেবেছিলেন স্টুডেন্টদের ইন্টারনেটেই সমস্যা।

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

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

লেভেল শূন্য: আপনি আসলে কী মাপছেন

যেকোনো কিছু ঠিক করার আগে দুটো শব্দ বুঝে নিন। ল্যাব ডেটা হলো নিয়ন্ত্রিত পরিবেশে করা একটা টেস্ট — PageSpeed, GTmetrix, Lighthouse। এটা ডায়াগনোসিসের জন্য দারুণ, কিন্তু এটা আপনার ইউজারের বাস্তবতা নয়। ফিল্ড ডেটা হলো আসল মানুষের ব্রাউজার থেকে জমা হওয়া তথ্য, যা Search Console-এর Core Web Vitals রিপোর্টে দেখা যায়। গুগল র‍্যাংকিংয়ে ফিল্ড ডেটাই ধরে।

দ্বিতীয় কথাটা আরও জরুরি: যে পেজে আপনার ব্যবসা হয়, সেটাই টেস্ট করুন। ই-কমার্স হলে প্রোডাক্ট আর চেকআউট পেজ, কোর্স সাইট হলে লগ-ইন করা ড্যাশবোর্ড, নিউজ পোর্টাল হলে ভেতরের আর্টিকেল পেজ (যেখানে বিজ্ঞাপনের স্ক্রিপ্ট বসে থাকে)। শুধু হোমপেজের স্কোর দিয়ে সাইটের স্বাস্থ্য বিচার করা আর শুধু গেটের ছবি তুলে বাড়ির অবস্থা বোঝানো একই ব্যাপার।

পাস মার্ক: আপনি বলতে পারবেন আপনার সবচেয়ে গুরুত্বপূর্ণ তিনটা পেজের LCP, INP আর CLS কত — ল্যাব আর ফিল্ড, দুই জায়গাতেই। না পারলে এখনো লেভেল শূন্যেই আছেন।

লেভেল ১: বিগিনার — ওজন কমানোর কাজ

এই ধাপে কোনো কোড লিখতে হবে না, কিন্তু সবচেয়ে বড় লাভটা এখানেই। বাস্তবে আমরা দেখি, একটা সাধারণ সাইটে শুধু এই কাজগুলো করলেই লোড টাইম অর্ধেকে নেমে আসে।

• ব্যবহার না হওয়া প্লাগইন ও থিম শুধু ডিঅ্যাক্টিভ নয়, ডিলিট করুন — নিষ্ক্রিয় প্লাগইনও আপডেট চেক আর নিরাপত্তা ঝুঁকি বাড়ায়
• ছবি WebP-তে রূপান্তর করে প্রয়োজনীয় মাপে রিসাইজ করুন
• একটাই ক্যাশ প্লাগইন রাখুন — তিনটা একসঙ্গে চালালে একে অন্যের কাজ ভেঙে দেয়
• থিমের সঙ্গে আসা যে স্লাইডারটা কখনো ব্যবহার করেননি, সেটা বাদ দিন

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

পাস মার্ক: হোমপেজের মোট ওজন ২ মেগাবাইটের নিচে, আর সাইটে চলমান প্লাগইনের প্রতিটার নাম ও কাজ আপনি ব্যাখ্যা করতে পারেন।

লেভেল ২: ইন্টারমিডিয়েট — ওয়াটারফল পড়তে শেখা

এখানেই বেশিরভাগ মানুষ আটকে যান, কারণ এই ধাপে প্লাগইনের সেটিংস পেজ আর কাজে আসে না। ব্রাউজারের DevTools খুলে Network ট্যাবে যান, পেজটা রিলোড করুন, আর ওয়াটারফল চার্টটা মন দিয়ে দেখুন। কোন ফাইলটা সবার আগে দরকার অথচ সবার শেষে আসছে? কোন লম্বা বারটা বাকি সবাইকে আটকে রেখেছে?

প্রথমে খুঁজে বের করুন LCP এলিমেন্টটা কোনটা — সাধারণত হিরো ইমেজ বা বড় হেডলাইন। Lighthouse রিপোর্টেই সেটা দেখিয়ে দেয়। এরপর প্রশ্ন করুন, ওই জিনিসটার আগে ব্রাউজারকে আর কী কী ডাউনলোড করতে হচ্ছে? প্রায়ই দেখা যায়, একটা ৪০০ কিলোবাইটের CSS ফাইল আর তিনটা ফন্ট আগে লোড না হলে হেডলাইনটাই রেন্ডার হয় না। এগুলোকেই বলে রেন্ডার-ব্লকিং রিসোর্স।

একটা সিলেটের নিউজ পোর্টালে আমরা দেখেছিলাম, আর্টিকেল পেজে সাতটা আলাদা অ্যাড নেটওয়ার্কের স্ক্রিপ্ট চলছে। কনটেন্ট লোড হচ্ছিল ১.৯ সেকেন্ডে, কিন্তু পেজ ব্যবহারযোগ্য হচ্ছিল ৮ সেকেন্ড পরে, কারণ মেইন থ্রেড তখনো অ্যাড স্ক্রিপ্ট চিবোচ্ছে। তিনটা নেটওয়ার্ক বাদ দেওয়ায় বিজ্ঞাপনের আয় কমেনি, বরং পেজভিউ বেড়েছিল।

• Coverage ট্যাব দিয়ে দেখুন কত শতাংশ CSS/JS অব্যবহৃত (৬০%+ হলে অবাক হবেন না)
• যে পেজে ফর্ম নেই, সেখানে ফর্ম প্লাগইনের CSS আনলোড করুন
• চ্যাট উইজেট, ম্যাপ, ইউটিউব এমবেড — এগুলো ক্লিক করার আগ পর্যন্ত লোড হতে দেবেন না

পাস মার্ক: আপনি স্ক্রিনশট না দেখিয়ে ব্যাখ্যা করতে পারেন আপনার LCP কেন ৩.৪ সেকেন্ড — কোন ফাইলটা দায়ী আর কেন।

লেভেল ৩: অ্যাডভান্সড — সার্ভারের ভেতরে ঢোকা

এই লেভেলটা শুরু হয় সেখান থেকে, যেখানে ফ্রন্টএন্ডের কাজ শেষ কিন্তু লগ-ইন করা পেজ, ড্যাশবোর্ড বা চেকআউট এখনো ধীর। কারণ ওই পেজগুলোতে পেজ ক্যাশ কাজ করে না — প্রতিটা রিকোয়েস্টে PHP চলে আর ডাটাবেসে কোয়েরি হয়। উপরের কোর্স প্ল্যাটফর্মের ঘটনাটা ঠিক এটাই ছিল।

প্রথমে অবজেক্ট ক্যাশ বসান। Redis চালু করে ডাটাবেসের কোয়েরি রেজাল্ট মেমোরিতে রাখলে লগ-ইন করা পেজেও বড় পার্থক্য আসে — আমরা ওই সাইটে ৬২০টা কোয়েরিকে ৯০-এ নামিয়ে এনেছিলাম, ড্যাশবোর্ড লোড ২১ সেকেন্ড থেকে নেমেছিল ২.৮ সেকেন্ডে।

এরপর ডাটাবেসের দিকে তাকান। ওয়ার্ডপ্রেসে wp_options টেবিলের autoload ডেটা প্রতিটা পেজ লোডে মেমোরিতে ওঠে। বছরখানেক চলা সাইটে পুরোনো প্লাগইনের ফেলে যাওয়া আবর্জনায় এই autoload সাইজ ৫-১০ মেগাবাইট হয়ে যেতে পারে, যেখানে ৮০০ কিলোবাইটের নিচে থাকা উচিত। মেয়াদোত্তীর্ণ ট্রানজিয়েন্ট, পোস্ট রিভিশন আর স্প্যাম কমেন্ট পরিষ্কার করুন।

• WP-Cron বন্ধ করে সার্ভারের আসল ক্রন ব্যবহার করুন — না হলে প্রতিটা ভিজিটে শিডিউল করা কাজ চলার চেষ্টা হয়
• Heartbeat API-র ফ্রিকোয়েন্সি কমান, যাতে admin-ajax.php বারবার সার্ভারে আঘাত না করে
• ক্রিটিক্যাল CSS ইনলাইন করে বাকিটা অ্যাসিনক্রোনাসভাবে লোড করান
• INP ঠিক করতে লম্বা জাভাস্ক্রিপ্ট টাস্ক ভাঙুন — Performance ট্যাবে ৫০ মিলিসেকেন্ডের বেশি যেকোনো টাস্ককে সন্দেহ করুন

এই লেভেলে এসে একটা কথা মেনে নিতে হয়: সব কিছু আপনি একা ঠিক করতে পারবেন না, আর দরকারও নেই। শেয়ার্ড হোস্টিংয়ে Redis-ই পাওয়া যায় না অনেক সময়। তখন হয় হোস্টিং বদলাতে হবে, নয়তো এই লেভেলের সুবিধাগুলো ছেড়ে দিতে হবে — মাঝামাঝি কোনো রাস্তা নেই।

পাস মার্ক: আপনার লগ-ইন করা পেজ, চেকআউট আর ড্যাশবোর্ডের TTFB ৬০০ মিলিসেকেন্ডের নিচে, এবং ফিল্ড ডেটায় INP ২০০ মিলিসেকেন্ডের নিচে।

যে জায়গায় মানুষ থেমে যায়

অনেকে লেভেল ১-এ চমৎকার ফল পান, তারপর লেভেল ২-তে এসে হতাশ হয়ে ভাবেন আরেকটা প্লাগইন কিনলেই বুঝি সমাধান হবে। বাস্তবে লেভেল ২ থেকে সব উন্নতি আসে বাদ দেওয়ার মাধ্যমে, যোগ করার মাধ্যমে নয়। যেদিন আপনি একটা প্লাগইন ইনস্টল করার আগে দুবার ভাবতে শুরু করবেন, বুঝবেন আপনি সত্যিই এগোচ্ছেন।

লেভেল পেরোনোর চেকলিস্ট

• হোমপেজ নয়, আসল ব্যবসার পেজগুলো টেস্ট করছি
• লগ-আউট আর লগ-ইন — দুই অবস্থাতেই মেপেছি
• প্রতিটা চলমান প্লাগইনের একটা যুক্তি আছে
• LCP এলিমেন্ট কোনটা, আমি জানি
• অবজেক্ট ক্যাশ (Redis) চালু, autoload সাইজ ৮০০ কিলোবাইটের নিচে
• WP-Cron সার্ভার ক্রনে সরানো হয়েছে
• Search Console-এর ফিল্ড ডেটা মাসে অন্তত একবার দেখি

যে প্রশ্নগুলো বারবার শুনি

লগ-ইন করা পেজ ফাস্ট করব কীভাবে?

পেজ ক্যাশ এখানে কাজ করবে না, তাই মনোযোগ দিন অবজেক্ট ক্যাশ (Redis), কোয়েরি অপটিমাইজেশন আর PHP ভার্সনে। Query Monitor দিয়ে দেখুন কোন প্লাগইন সবচেয়ে বেশি কোয়েরি চালাচ্ছে — সাধারণত একটা-দুটোই পুরো দায়টা নেয়।

INP খারাপ, কিন্তু LCP ভালো — কী করব?

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

ফ্রি টুল দিয়ে কি অ্যাডভান্সড লেভেলে যাওয়া সম্ভব?

হ্যাঁ, প্রায় পুরোটাই। DevTools, Query Monitor, Lighthouse, Search Console — সবই ফ্রি। টাকা লাগে মূলত ভালো হোস্টিংয়ে, প্লাগইনে নয়। বছরে ৬-১২ হাজার টাকার হোস্টিং যে ফল দেয়, ৫ হাজার টাকার প্রিমিয়াম প্লাগইন তা দেয় না।

ডাটাবেস পরিষ্কার করলে কি সত্যিই স্পিড বাড়ে?

autoload ফুলে গিয়ে থাকলে নাটকীয়ভাবে বাড়ে। তবে ৫০ মেগাবাইটের ছোট ডাটাবেসে রিভিশন মুছে খুব একটা লাভ হয় না। আগে মাপুন, তারপর সিদ্ধান্ত নিন — অনুমানে কাজ করলে ভুল জায়গায় সময় যাবে।

সিঁড়িটা এক দিনে চড়া যায় না, তবে প্রতিটা ধাপেই মাপা যায় — আর সেটাই আসল ব্যাপার। কোনো লেভেলে আটকে গেলে, বা সাইটের কোন ধাপে সমস্যা সেটা নিশ্চিত হতে চাইলে, স্ট্যাক অ্যালিক্স-এর টিমের সঙ্গে কথা বলতে পারেন। আমরা প্রথমে মাপি, তারপর হাত দিই।