แอตทริบิวต์ loading="lazy" บอกให้เบราว์เซอร์ เลื่อนการโหลด รูปภาพหรือ iframe จนกว่าจะเข้าใกล้ viewport — ประหยัดแบนด์วิดธ์และเพิ่มความเร็วในการโหลดเริ่มต้น โดยไม่ต้อง JavaScript
แอตทริบิวต์ loading="lazy" บอกให้เบราว์เซอร์ เลื่อนการโหลด รูปภาพหรือ iframe จนกว่าจะเข้าใกล้ viewport — ประหยัดแบนด์วิดธ์และเพิ่มความเร็วในการโหลดเริ่มต้น โดยไม่ต้อง JavaScript
lazy — โหลดเฉพาะเมื่อการเลื่อนนำมันเข้าใกล้ viewporteager (ค่าเริ่มต้น) — โหลดทันทีโดยไม่คำนึงถึงตำแหน่งเบราว์เซอร์ใช้ margin (โหลดเล็กน้อยก่อนที่องค์ประกอบจะเลื่อนเข้าไปในมุมมอง) ดังนั้นรูปภาพมักจะพร้อมเมื่อผู้ใช้มองเห็นมัน
<img src="x.jpg" loading="lazy" width="800" height="600" />
โดยไม่มีขนาด (หรือ aspect-ratio) รูปภาพที่โหลดแบบ lazy จะไม่มีพื้นที่ที่สงวน ดังนั้นเมื่อมันโหลด หน้าจะ กระโดด — ซึ่งทำให้เกิดความเสียหายต่อ Cumulative Layout Shift (CLS) เสมอสงวนพื้นที่ไว้
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
การโหลด lazy รูปภาพ Largest Contentful Paint นั้น ลดลง ประสิทธิภาพจริง ๆ — มันล่าช้าพิกเซลที่สำคัญที่สุด โหลด lazy เฉพาะสื่อนอกหน้าจอ
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
loading="lazy" ดั้งเดิมลบความจำเป็นของสิ่งนี้ออกในกรณีส่วนใหญ่ (แม้ว่า IntersectionObserver ยังคงมีประโยชน์สำหรับลอจิกที่กำหนดเอง)
การโหลด lazy แบบดั้งเดิมช่วยลดไบต์เริ่มต้นและคำขอสำหรับหน้าที่มีรูปภาพจำนวนมาก — ชัยชนะครั้งใหญ่สำหรับมือถือ — ฟรี
รายละเอียดที่ละเอียดอ่อนมีความสำคัญ: สงวนขนาดเพื่อปกป้อง CLS และเก็บเนื้อหาเหนือพับ/LCP เป็น eager (แม้แต่ fetchpriority="high") เพื่อให้เนื้อหาที่สำคัญยังคงโหลดเร็ว