Lazy Loading

Lazy Loading ช่วยเพิ่มประสิทธิภาพด้วยการโหลดเฉพาะเนื้อหาที่มองเห็นใน viewport ตอนเปิดหน้าเว็บครั้งแรก รูปภาพที่อยู่ใต้ส่วนแรกของหน้าจะยังเป็น placeholder ขนาดเบา จนกว่าผู้ใช้จะเลื่อนเข้าใกล้ จึงเริ่มดาวน์โหลดรูปภาพจริง การทำ Lazy Loading แบบเนทีฟด้วยแอตทริบิวต์ HTML loading='lazy' รองรับในเบราว์เซอร์สมัยใหม่และไม่ต้องใช้ JavaScript ส่วน Intersection Observer API ให้การควบคุมที่ละเอียดขึ้นสำหรับการใช้งานแบบกำหนดเอง สำหรับรูป hero ที่มองเห็นทันทีด้านบนของหน้า ควรปิด Lazy Loading เพราะรูปเหล่านี้ต้องโหลดทันทีเพื่อให้ Largest Contentful Paint ดีที่สุด การทำ Lazy Loading หนักเกินไปจนเลื่อนเนื้อหาที่มองเห็นอยู่แล้วจะทำให้ผู้ใช้รู้สึกว่าเว็บช้า สมดุลที่เหมาะสมคือโหลดเนื้อหาที่มองเห็นทันที และเลื่อนการโหลดส่วนที่เหลือออกไป