Image Optimization ใน Next.js 15

ภาพคือสาเหตุอันดับหนึ่งของ LCP ที่ช้า next/image ใน Next.js 15 ช่วย optimize ให้อัตโนมัติ แต่ต้องใช้ให้ถูกวิธีถึงจะได้ประสิทธิภาพสูงสุด

กำหนด priority ให้ hero image

รูปที่อยู่ above-the-fold ควรใส่ prop priority เพื่อให้ Next.js preload ตั้งแต่ HTML แรก ลด LCP ได้ทันที 30-50%

เลือก format ที่เหมาะ

Next.js รองรับ AVIF และ WebP โดยอัตโนมัติ ตั้งค่า formats ใน next.config.js ให้ AVIF มาก่อน เพื่อขนาดไฟล์เล็กที่สุด

sizes prop คือพระเอก

ระบุ sizes ตาม breakpoint จริงของ layout เพื่อให้ browser โหลดรูปขนาดที่เหมาะกับหน้าจอ ไม่ใช่โหลด full-size แล้วย่อ

Lazy load ที่เหลือ

• รูปที่ไม่ใช่ hero ปล่อยให้ lazy load อัตโนมัติ
• ใช้ placeholder="blur" เพื่อ UX ที่ smooth
• จอง aspect ratio ด้วย width/height เพื่อกัน CLS

ทำตามนี้แล้วเว็บส่วนใหญ่จะได้ LCP ต่ำกว่า 2 วินาทีโดยไม่ต้องปรับอะไรเพิ่ม