🚀 Next.js Image Component–এ ৩টি মারাত্মক ভুল!
অনেক ডেভেলপারই না জেনে এমন কিছু ভুল করে ফেলেন, যেগুলোর কারণে তাদের ওয়েবসাইটেরLCP, CLS, Bandwidth Usage, এমনকি Lighthouse Score পর্যন্ত ভয়ানকভাবে নষ্ট হয়ে যায়!
আজকে আমি শেয়াNext.js ইমেজ অপ্টিমাইজেশনের ৩টি সবচেয়ে মারাত্মক ভ, আর সাথে থাকবে কিভাবে এগুলো ঠিক করলে আপনার পারফরম্যান্স টপ-লেভেলে চলে যাবে! 🔥
❌ ১. priority prop ব্যবহার না করা
Hero section-এর ইমেজ সবসময় প্রথমেই লোড হওয়া উচিত।
priority না দিলে এটি Hydration পর্যন্ত অপেক্ষা করে — ফলে LCP বাড়✅ সমাধা
<Image
src="/hero.jpg"
width={1920}
priority
/>
❌ ২. ভুল sizes configuration
Next.js যদি sizes না পায়, ধরে নেযviewport পুরো width নিয়ে ইমেজ প্রদর্শিত হবে—ফলে ব্যবহারকারীর স্ক্রিনের চেয়ে বড় ইমেজ লোড হয় এবং ব্যান্ডউইথ নষ্ট ✅ সমা
<Image
src="/product.jpg"
width={600}
sizes="50vw"
/>
❌ ৩. Blur Placeholder না রাখা
Placeholder না দিলে প্রথম লোডে ফাকা জায়গা দেখায় → Layout Shift → CLS বৃদ্ধি✅ সমাধান
<Image
src="/gallery.jpg"
width={400}
placeholder="blur"
/>