আপনার Elementor সাইট কি Slow? White Space সমস্যা?
ওয়েবসাইটকে Lightning Fast করার ৫টি টেকনিক্যাল স্টেপ।
LCP Delay
The Problem: Elementor ডিফল্টভাবে সব ইমেজে loading="lazy" ব্যবহার করে। এর ফলে Hero Banner লোড হতে দেরি হয় এবং Layout Shift (CLS) তৈরি হয়।
ব্রাউজার বুঝবে এই ইমেজটি সবার আগে লোড করতে হবে। এটি করার ৩টি উপায়:
🛠️ Method 1: Elementor FeatureSettings → Performance → Optimized Image Loading → Enable।
✅ Method 2: Custom AttributesImage Widget → Advanced → Attributes-এ অ্যাড করুন:
CSS background-image এ fetchpriority কাজ করে না। তাই Hero ইমেজকে "Absolute Positioned" উইজেটে কনভার্ট করুন।
Product Grid-এ "White Space" বা লাফানো বন্ধ করতে কন্টেইনারে নির্দিষ্ট রেশিও দিন। ইমেজ লোড হওয়ার আগেই ব্রাউজার জায়গা দখল করে রাখবে।
Above-the-fold বা স্ক্রিনের ওপরের অংশের জন্য Lazy Loading পুরোপুরি বন্ধ করে দিন।
মোবাইল নেটওয়ার্ক স্লো হলে (3G), অফসেট বাড়িয়ে দিন। ইউজার স্ক্রল করার অনেক আগেই ইমেজ লোড শুরু হবে।
WooCommerce সাইটে WP Rocket এবং Perfmatters একসাথে চললে কনফ্লিক্ট হতে পারে। DevTools দিয়ে চেক করুন।
Pro Tip: Multivendor সেটআপে স্ক্রিপ্ট ম্যানেজারে 'Delay JS' সাবধানে ব্যবহার করুন।
LCP পুরোপুরি অপ্টিমাইজ করতে সরাসরি <head> সেকশনে এটি ব্যবহার করুন:
এই চেকলিস্ট ফলো করলে Bounce Rate ১৫–৩০% কমে এবং Mobile CWV স্কোর পাস হয়।
