หน้านี้ได้รับการแปลโดย Cloud Translation API

ถึงเวลาโหลด iframe นอกหน้าจอแบบ Lazy Loading แล้ว

Addy Osmani

Barry Pollard

Browser Support

การโหลดแบบเลื่อนเวลาขององค์ประกอบ <iframe> จะเลื่อนเวลาการโหลด iframe ที่อยู่นอกหน้าจอจนกว่าผู้ใช้จะเลื่อนไปใกล้ๆ ซึ่งจะช่วยประหยัดอินเทอร์เน็ต เพิ่มความเร็วในการโหลดส่วนอื่นๆ ของหน้าเว็บ และลดการใช้หน่วยความจำ

เช่นเดียวกับการโหลดแบบ Lazy Loading สำหรับรูปภาพ ให้ใช้แอตทริบิวต์ loading เพื่อบอกเบราว์เซอร์ว่าคุณต้องการใช้การโหลดแบบ Lazy Loading สำหรับ iframe

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

เดโมของ <iframe loading=lazy> นี้แสดงการฝังวิดีโอแบบ Lazy Loading

เหตุผลที่ควรใช้การโหลดแบบ Lazy Loading สำหรับ iframe

การฝังของบุคคลที่สามครอบคลุม Use Case ที่หลากหลาย ตั้งแต่โปรแกรมเล่นวิดีโอไปจนถึงโพสต์โซเชียลมีเดียและโฆษณา เนื้อหานี้มักไม่ปรากฏในวิวพอร์ตของผู้ใช้โดยทันที แต่ผู้ใช้ยังคงต้องเสียค่าใช้จ่ายในการดาวน์โหลดข้อมูลและ JavaScript ที่มีราคาแพงสำหรับแต่ละเฟรม แม้ว่าผู้ใช้จะไม่เลื่อนไปดูก็ตาม