การโหลดแบบ Lazy ของรูปภาพ/iframe ดั้งเดิมทำงานอย่างไร

Question

Accepted Answer

แอตทริบิวต์ `loading="lazy"` บอกให้เบราว์เซอร์ **เลื่อนการโหลด** รูปภาพหรือ iframe จนกว่าจะเข้าใกล้ viewport — ประหยัดแบนด์วิดธ์และเพิ่มความเร็วในการโหลดเริ่มต้น โดยไม่ต้อง JavaScript ```html

``` ## วิธีการทำงาน - **`lazy`** — โหลดเฉพาะเมื่อการเลื่อนนำมันเข้าใกล้ viewport - **`eager`** (ค่าเริ่มต้น) — โหลดทันทีโดยไม่คำนึงถึงตำแหน่ง เบราว์เซอร์ใช้ margin (โหลดเล็กน้อยก่อนที่องค์ประกอบจะเลื่อนเข้าไปในมุมมอง) ดังนั้นรูปภาพมักจะพร้อมเมื่อผู้ใช้มองเห็นมัน ## การจับคู่ที่สำคัญ: ตั้งค่าความกว้าง/ความสูงเพื่อหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์ ```html

``` โดยไม่มีขนาด (หรือ `aspect-ratio`) รูปภาพที่โหลดแบบ lazy จะไม่มีพื้นที่ที่สงวน ดังนั้นเมื่อมันโหลด หน้าจะ **กระโดด** — ซึ่งทำให้เกิดความเสียหายต่อ Cumulative Layout Shift (CLS) เสมอสงวนพื้นที่ไว้ ## อย่าโหลด lazy เนื้อหาเหนือพับ ```html

``` การโหลด lazy รูปภาพ **Largest Contentful Paint** นั้น *ลดลง* ประสิทธิภาพจริง ๆ — มันล่าช้าพิกเซลที่สำคัญที่สุด โหลด lazy เฉพาะสื่อนอกหน้าจอ ## ก่อนดั้งเดิม: IntersectionObserver ```js // 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"`) เพื่อให้เนื้อหาที่สำคัญยังคงโหลดเร็ว