ওয়ার্ডপ্রেস ইমেজ অপটিমাইজেশন: ক্যাশ প্লাগইনের পরেও সাইট স্লো থাকলে ছবিই আসল কারণ
সাইট স্লো, আপনি ক্যাশ প্লাগইন বসালেন, তবু স্কোর নড়ছে না। এর পেছনে সবচেয়ে বড় অপরাধী প্রায়ই একটা ৩ MB এর ছবি। ওয়ার্ডপ্রেস ইমেজ অপটিমাইজেশন ঠিকমতো না করলে বাকি সব অপটিমাইজেশন অর্ধেক কাজ করে।
১০+ বছর ওয়ার্ডপ্রেস সাইট বানানোর অভিজ্ঞতা আর ৯৫০+ Fiverr ক্লায়েন্ট প্রজেক্টের পর একটা কথা পরিষ্কার: ছবির সমস্যা সবচেয়ে সহজে ঠিক করা যায়, অথচ সবচেয়ে বেশি অবহেলা পায়। এই লেখায় ধাপে ধাপে দেখা যাক কী করতে হবে।
ছবি কেন সাইট স্লো করে
ছবি সাধারণত একটা পেজের মোট ডাউনলোড সাইজের সবচেয়ে বড় অংশ নেয়। একটা বড় ছবি মোবাইল নেটওয়ার্কে লোড হতে সময় নেয়, আর সেই ছবিই যদি হিরো সেকশনে থাকে তাহলে LCP (Largest Contentful Paint) সরাসরি খারাপ হয়। Google এর মানদণ্ডে LCP ২.৫ সেকেন্ডের মধ্যে থাকলে সেটাকে ভালো ধরা হয়।
বাংলাদেশে অনেক ভিজিটর মোবাইল ডেটায় সাইট দেখে। ডেস্কটপে ওয়াইফাইয়ে যা ঠিকঠাক লাগে, মোবাইল ডেটায় সেটা অসহনীয় হতে পারে। তাই ছবির সাইজ নিয়ে ছাড় দেওয়ার সুযোগ নেই।
আপলোডের আগে ছবির সাইজ কমানো
সবচেয়ে কার্যকর অপটিমাইজেশন হলো আপলোডের আগেই ছবি ছোট করা। ওয়ার্ডপ্রেস নিজে থেকে অনেক কাজ করে, কিন্তু একটা অপ্রয়োজনীয় বড় ছবি আপলোড হয়ে গেলে সেটা সার্ভারেও জায়গা নেয়, ব্যাকআপও ভারী করে।
একটা সাধারণ নিয়ম: কনটেন্টের ভেতরের ছবির প্রস্থ ১২০০ পিক্সেলের বেশি দরকার হয় না। ফুল-উইডথ হিরো ব্যানারের জন্য সর্বোচ্চ ১৬০০ থেকে ১৯২০ পিক্সেল যথেষ্ট। ফাইল সাইজের লক্ষ্য হিসেবে কনটেন্ট ইমেজ ১০০-১৫০ KB এর নিচে, আর হিরো ইমেজ ২০০ KB এর আশপাশে রাখা একটা বাস্তবসম্মত রুল অব থাম্ব।
ডাইমেনশন ঠিক করার পর ছবি কমপ্রেস করুন। Squoosh বা TinyPNG এর মতো টুল দিয়ে ম্যানুয়ালি করা যায়, আবার ওয়ার্ডপ্রেসের ভেতরে অটো কমপ্রেশনের প্লাগইনও আছে।
WebP ফরম্যাট: কখন, কীভাবে
WebP সাধারণত একই মানের JPEG বা PNG এর চেয়ে ছোট ফাইল দেয়। ওয়ার্ডপ্রেস ৫.৮ থেকে WebP আপলোড সাপোর্ট করে, আর ৬.৫ থেকে AVIF সাপোর্টও যুক্ত হয়েছে। অর্থাৎ নতুন সাইটে WebP ব্যবহারের জন্য আলাদা প্লাগইন ছাড়াই শুরু করা যায়।
পুরোনো সাইটে হাজার খানেক JPEG আগে থেকেই থাকলে সেগুলো বাল্কে কনভার্ট করতে একটা ইমেজ অপটিমাইজেশন প্লাগইন কাজে লাগে। LiteSpeed Cache ব্যবহার করলে এর ইমেজ অপটিমাইজেশন ফিচার দিয়েও WebP বানানো যায়, তবে কনভার্ট করার আগে ব্যাকআপ রাখা জরুরি।
একটা জিনিস মাথায় রাখুন: ফাইল সাইজ কমাতে গিয়ে কোয়ালিটি এত কমাবেন না যে ছবি ঘোলাটে দেখায়। সাধারণত ৭৫ থেকে ৮৫ এর মধ্যে কোয়ালিটি সেটিং ভালো ব্যালান্স দেয়।
চাইলে কোডের মাধ্যমে ওয়ার্ডপ্রেসের ডিফল্ট কোয়ালিটি আর বড় ছবির থ্রেশহোল্ড নিয়ন্ত্রণ করা যায়। নিচের কোড থিমের functions.php তে বা কোড স্নিপেট প্লাগইনে বসাতে হবে, আর আগে স্টেজিংয়ে টেস্ট করে নেওয়া ভালো।
// আপলোডে বড় ছবির সর্বোচ্চ প্রস্থ (ডিফল্ট ২৫৬০px)
add_filter( 'big_image_size_threshold', function () {
return 1920;
} );
// JPEG/WebP কমপ্রেশন কোয়ালিটি
add_filter( 'wp_editor_set_quality', function () {
return 80;
} );Lazy Load আর LCP ইমেজ: সবচেয়ে বড় ভুল
ওয়ার্ডপ্রেস ৫.৫ থেকে ছবিতে ডিফল্টভাবে loading=”lazy” যুক্ত হয়। এটা ফোল্ডের নিচের ছবির জন্য দারুণ, কারণ ভিজিটর স্ক্রল না করা পর্যন্ত ছবি লোডই হয় না।
সমস্যা হয় যখন হিরো ইমেজেও lazy load থেকে যায়। ব্রাউজার তখন ছবিটা লোড শুরু করতে দেরি করে, আর LCP খারাপ হয়। ওয়ার্ডপ্রেস ৬.৩ থেকে প্রথম ছবিতে fetchpriority=”high” যুক্ত করার চেষ্টা করে, কিন্তু পেজ বিল্ডার বা ক্যাশ প্লাগইনের সেটিংয়ে এটা ওভাররাইড হয়ে যেতে পারে, তাই আউটপুট দেখে নেওয়া দরকার।
<img src="hero.webp" width="1600" height="900"
alt="ওয়েবসাইটের হিরো ছবি"
loading="eager" fetchpriority="high">পেজের সোর্স দেখে নিশ্চিত হয়ে নিন: হিরো ছবিতে loading=”lazy” থাকা চলবে না, আর ফোল্ডের নিচের ছবিতে থাকা উচিত।
Width আর Height দিন: CLS ঠেকানোর সহজ উপায়
ছবি লোড হওয়ার সময় টেক্সট নিচে লাফিয়ে গেলে সেটা CLS (Cumulative Layout Shift) এর সমস্যা। কারণ সাধারণত ছবির width আর height অ্যাট্রিবিউট না থাকা। ওয়ার্ডপ্রেস এডিটর দিয়ে ছবি বসালে এগুলো সাধারণত অটো যুক্ত হয়, কিন্তু কাস্টম HTML বা পেজ বিল্ডারের কিছু উইজেটে বাদ পড়ে যায়।
এর সাথে ওয়ার্ডপ্রেসের srcset সুবিধাও কাজে লাগে। একই ছবি ভিন্ন সাইজে তৈরি হয়, আর ব্রাউজার স্ক্রিন অনুযায়ী উপযুক্তটা বেছে নেয়। তাই থিমে কাস্টম সাইজের ছবি ব্যবহার করলে সেটাও যেন এই সিস্টেমের ভেতর দিয়ে যায়, সেটা দেখা জরুরি।
ধাপে ধাপে ইমেজ অপটিমাইজেশন চেকলিস্ট
- আপলোডের আগে ছবির প্রস্থ ঠিক করুন (কনটেন্টে সর্বোচ্চ ১২০০px, হিরোতে ১৬০০-১৯২০px)
- ছবি WebP ফরম্যাটে কনভার্ট ও কমপ্রেস করুন
- ফাইলের নাম ও alt টেক্সট অর্থবহ রাখুন, এতে ইমেজ SEO ও এক্সেসিবিলিটি দুটোই লাভবান হয়
- হিরো ছবি থেকে lazy load সরান, আর fetchpriority=”high” দিন
- ফোল্ডের নিচের ছবিতে lazy load চালু রাখুন
- width আর height অ্যাট্রিবিউট আছে কি না যাচাই করুন
- PageSpeed Insights এ মোবাইল রিপোর্ট চালিয়ে “Properly size images” আর “Serve images in next-gen formats” সতর্কতা দেখুন
এই ধাপগুলো শেষ করার পর স্পিডের বাকি সমস্যাগুলো দেখতে চাইলে ওয়ার্ডপ্রেস স্পিড অপটিমাইজেশন গাইড পড়তে পারেন। আর ছবি তৈরির সময়ই SEO মাথায় রাখতে চাইলে AI দিয়ে ফিচার্ড ইমেজ বানানোর নিয়ম লেখাটা কাজে লাগবে।
ইমেজ অপটিমাইজেশনে সাধারণ ভুল
এগুলোর অনেকগুলো নিজে ঠিক করা সম্ভব। তবে পুরো সাইটে একসাথে ছবি, ক্যাশ আর স্ক্রিপ্ট ঠিক করতে সময় লাগলে আমাদের ওয়ার্ডপ্রেস স্পিড অপটিমাইজেশন সার্ভিস দেখে নিতে পারেন।
শেষ কথা
ইমেজ অপটিমাইজেশন একবারের কাজ না, এটা একটা অভ্যাস। প্রতিটা নতুন ছবি আপলোডের আগে সাইজ আর ফরম্যাট ঠিক করলে সাইট বছরের পর বছর হালকা থাকে। যারা ওয়ার্ডপ্রেস গোড়া থেকে শিখতে চান, তাদের জন্য WordPress Pro: From Beginner to Expert কোর্সে পারফরম্যান্সসহ পুরো ওয়ার্কফ্লো বাংলায় শেখানো হয়।
