การรองรับเบราว์เซอร์
คุณสามารถใช้แอตทริบิวต์ loading
เพื่อโหลดรูปภาพแบบ Lazy Load ได้โดยไม่ต้องเขียนโค้ด Lazy Load ที่กําหนดเองหรือใช้ไลบรารี JavaScript แยกต่างหาก ตัวอย่างฟีเจอร์มีดังนี้
หน้านี้จะอธิบายรายละเอียดการใช้งานการโหลดแบบเลื่อนในเบราว์เซอร์
เหตุผลที่ควรใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์
HTTP Archive ระบุว่ารูปภาพเป็นประเภทชิ้นงานที่เว็บไซต์ส่วนใหญ่ขอมากที่สุด และมักจะใช้แบนด์วิดท์มากกว่าทรัพยากรอื่นๆ เมื่ออยู่ที่เปอร์เซ็นต์ไทล์ที่ 90 เว็บไซต์จะส่งรูปภาพขนาดมากกว่า 5 MB บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ก่อนหน้านี้ การเลื่อนการโหลดรูปภาพนอกหน้าจอทำได้ 2 วิธีดังนี้
- การใช้ Intersection Observer API
- การใช้ เครื่องจัดการเหตุการณ์
scroll
,resize
หรือorientationchange
ตัวเลือกใดตัวเลือกหนึ่งช่วยให้นักพัฒนาแอปรวมลักษณะการโหลดแบบเลื่อนลงได้ และนักพัฒนาแอปจํานวนมากได้สร้างไลบรารีของบุคคลที่สามเพื่อให้การแยกความคิดเป็นนามธรรมที่ใช้งานได้ง่ายยิ่งขึ้น
อย่างไรก็ตาม เมื่อเบราว์เซอร์รองรับการโหลดแบบเลื่อนเวลาไว้ทีหลังโดยตรง ก็ไม่จำเป็นต้องใช้ไลบรารีภายนอก นอกจากนี้ การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ยังช่วยให้การโหลดรูปภาพยังคงทํางานได้แม้ว่าไคลเอ็นต์จะปิดใช้ JavaScript ก็ตาม อย่างไรก็ตาม โปรดทราบว่าการโหลดจะเลื่อนออกไปก็ต่อเมื่อเปิดใช้ JavaScript เท่านั้น
แอตทริบิวต์ loading
Chrome จะโหลดรูปภาพตามลำดับความสำคัญที่แตกต่างกัน โดยขึ้นอยู่กับตำแหน่งของรูปภาพนั้นๆ เมื่อเทียบกับวิวพอร์ตของอุปกรณ์ ระบบจะโหลดรูปภาพที่อยู่ใต้วิวพอร์ตโดยให้ความสำคัญต่ำกว่า แต่ระบบจะยังคงดึงข้อมูลรูปภาพดังกล่าวขณะที่หน้าเว็บโหลด
คุณใช้แอตทริบิวต์ loading
เพื่อเลื่อนการโหลดรูปภาพที่อยู่นอกหน้าจอโดยสมบูรณ์ได้ ดังนี้
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
ค่าที่รองรับสำหรับแอตทริบิวต์ loading
มีดังนี้
lazy
: หน่วงเวลาการโหลดทรัพยากรจนกว่าจะถึงระยะทางที่คำนวณแล้วจากวิวพอร์ตeager
: ลักษณะการโหลดเริ่มต้นของเบราว์เซอร์ ซึ่งเหมือนกับการไม่ใส่แอตทริบิวต์นี้ และหมายความว่าระบบจะโหลดรูปภาพไม่ว่ารูปภาพจะอยู่ที่ใดในหน้าก็ตาม ค่านี้เป็นค่าเริ่มต้น แต่การตั้งค่าอย่างชัดเจนก็มีประโยชน์ในกรณีที่เครื่องมือเพิ่มloading="lazy"
โดยอัตโนมัติเมื่อไม่มีค่าที่ชัดเจน หรือในกรณีที่โปรแกรมตรวจไวยากรณ์แสดงข้อผิดพลาดหากไม่ได้ตั้งค่าอย่างชัดเจน
ความสัมพันธ์ระหว่างแอตทริบิวต์ loading
กับลําดับความสําคัญในการดึงข้อมูล
ค่า eager
เป็นคำสั่งให้โหลดรูปภาพตามปกติโดยไม่หน่วงเวลาการโหลดเพิ่มเติมหากรูปภาพอยู่นอกหน้าจอ แต่จะไม่ได้ทำให้รูปภาพโหลดเร็วขึ้นกว่ารูปภาพอื่นที่ไม่มีแอตทริบิวต์ loading
หากต้องการเพิ่มลําดับความสําคัญในการดึงข้อมูลของรูปภาพที่สําคัญ (เช่น รูปภาพ LCP) ให้ใช้ลําดับความสําคัญในการดึงข้อมูลกับ fetchpriority="high"
รูปภาพที่มี loading="lazy"
และ fetchpriority="high"
จะยังคงล่าช้าขณะที่รูปภาพอยู่นอกหน้าจอ จากนั้นระบบจะดึงข้อมูลรูปภาพดังกล่าวด้วยลําดับความสําคัญสูงเมื่อรูปภาพเกือบอยู่ในวิวพอร์ต การใช้ร่วมกันนี้ไม่จําเป็นจริงๆ เนื่องจากเบราว์เซอร์มีแนวโน้มที่จะโหลดรูปภาพนั้นด้วยลําดับความสําคัญสูงอยู่แล้ว
เกณฑ์ระยะห่างจากวิวพอร์ต
รูปภาพทั้งหมดที่ดูได้ทันทีโดยไม่ต้องเลื่อนจะโหลดตามปกติ ระบบจะดึงข้อมูลรูปภาพที่อยู่ใต้วิวพอร์ตของอุปกรณ์เมื่อผู้ใช้เลื่อนไปใกล้กับรูปภาพเท่านั้น
การใช้การโหลดแบบ Lazy Loading ของ Chromium พยายามทำให้รูปภาพที่ไม่ได้อยู่ในหน้าจอโหลดตั้งแต่เนิ่นๆ เพื่อให้โหลดเสร็จสิ้นเมื่อผู้ใช้เลื่อนไปดูรูปภาพเหล่านั้น โดยดึงข้อมูลรูปภาพเหล่านั้นก่อนที่รูปภาพจะปรากฏในวิวพอร์ต
เกณฑ์ระยะทางจะแตกต่างกันไปตามปัจจัยต่อไปนี้
- ประเภทของทรัพยากรรูปภาพที่ดึงข้อมูล
- ประเภทการเชื่อมต่อที่มีผล
คุณดูค่าเริ่มต้นของการเชื่อมต่อประเภทต่างๆ ที่มีประสิทธิภาพได้ในแหล่งที่มาของ Chromium คุณสามารถทดสอบเกณฑ์ต่างๆ เหล่านี้ได้โดยการควบคุมปริมาณเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ
เกณฑ์การประหยัดข้อมูลและระยะห่างจากวิวพอร์ตที่ปรับปรุงแล้ว
ในเดือนกรกฎาคม 2020 Chrome ได้ทําการปรับปรุงที่สําคัญเพื่อปรับเกณฑ์ระยะทางจากวิดเจ็ตที่แสดงผลของภาพในการโหลดแบบเลื่อนดูทีละภาพให้เป็นไปตามความคาดหวังของนักพัฒนาซอฟต์แวร์มากขึ้น
ในการเชื่อมต่อที่รวดเร็ว (4G) เราได้ลดเกณฑ์ระยะทางจากวิวพอร์ตของ Chrome จาก 3000px
เป็น 1250px
และในการเชื่อมต่อที่ช้ากว่า (3G หรือต่ำกว่า) เราได้เปลี่ยนเกณฑ์จาก 4000px
เป็น 2500px
การเปลี่ยนแปลงนี้มีผล 2 อย่างดังนี้
<img loading=lazy>
ทำงานได้ใกล้เคียงกับประสบการณ์ที่ได้จากไลบรารีการโหลดแบบเลื่อนเวลาของ JavaScript- เกณฑ์ระยะทางจากวิวพอร์ตใหม่ยังคงหมายความว่ารูปภาพอาจโหลดเสร็จแล้วเมื่อผู้ใช้เลื่อนไปดูรูปภาพ
คุณดูการเปรียบเทียบเกณฑ์ระยะทางจากวิวพอร์ตแบบเก่ากับแบบใหม่สำหรับเดโมเวอร์ชันใดเวอร์ชันหนึ่งของเราในการเชื่อมต่อที่รวดเร็ว (4G) ได้ที่ด้านล่าง
และเกณฑ์ใหม่เทียบกับ LazySizes (ไลบรารีการโหลดแบบเลื่อนเวลาของ JavaScript ที่ได้รับความนิยม) มีดังนี้
ระบุแอตทริบิวต์ของมิติข้อมูลรูปภาพ
ขณะที่เบราว์เซอร์โหลดรูปภาพ เบราว์เซอร์จะไม่ทราบว่ารูปภาพมีขนาดเท่าใด เว้นแต่จะมีการระบุไว้อย่างชัดเจน เราขอแนะนำให้เพิ่มแอตทริบิวต์ width
และ height
ลงในแท็ก <img>
ทั้งหมดเพื่อให้เบราว์เซอร์จัดสรรพื้นที่ในหน้าเว็บสำหรับรูปภาพได้เพียงพอ และหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ที่รบกวน
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
หรือจะระบุค่าในสไตล์อินไลน์โดยตรงก็ได้ ดังนี้
<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
แนวทางปฏิบัติแนะนำในการตั้งค่ามิติข้อมูลมีผลกับแท็ก <img>
ไม่ว่าคุณจะใช้การโหลดแบบเลื่อนเวลาไว้ก่อนหรือไม่ แต่การโหลดแบบเลื่อนเวลาไว้ก่อนอาจทําให้มิติข้อมูลมีความสําคัญมากขึ้น
ระบบจะใช้การโหลดแบบเลื่อนใน Chromium ในลักษณะที่ทําให้รูปภาพมีแนวโน้มที่จะโหลดทันทีที่ปรากฏขึ้น แต่ก็ยังมีโอกาสที่รูปภาพจะไม่โหลดในเวลาที่เหมาะสม หากเป็นเช่นนั้น การไม่ระบุ width
และ
height
ในรูปภาพจะเพิ่มผลกระทบของรูปภาพต่อการเปลี่ยนแปลงเลย์เอาต์แบบสะสม หากระบุขนาดของรูปภาพไม่ได้ การโหลดแบบเลื่อนดูเมื่อพร้อมจะประหยัดทรัพยากรเครือข่ายได้ แต่ก็มีความเสี่ยงที่จะเกิดการเปลี่ยนแปลงเลย์เอาต์มากขึ้น
ในกรณีส่วนใหญ่ รูปภาพจะยังคงโหลดแบบ Lazy Load หากคุณไม่ได้ระบุขนาด แต่ก็มีบางกรณีที่ควรทราบ หากไม่ได้ระบุ width
และ height
ขนาดรูปภาพจะเป็น 0×0 พิกเซลโดยค่าเริ่มต้น หากคุณมีแกลเลอรีรูปภาพ เบราว์เซอร์อาจตัดสินใจว่ารูปภาพทั้งหมดพอดีกับวิวพอร์ตตั้งแต่เริ่มต้น เนื่องจากรูปภาพแต่ละรูปไม่กินพื้นที่และไม่มีรูปภาพที่ดันออกไปนอกหน้าจอ ในกรณีนี้ เบราว์เซอร์จะตัดสินใจโหลดทุกอย่าง ซึ่งทําให้หน้าเว็บโหลดช้าลง
ดูตัวอย่างวิธีการทำงานของ loading
กับรูปภาพจํานวนมากได้จากเดโมนี้
นอกจากนี้ คุณยังโหลดรูปภาพที่กําหนดไว้โดยใช้องค์ประกอบ <picture>
แบบ Lazy Load ได้ด้วย โดยทําดังนี้
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>
แม้ว่าเบราว์เซอร์จะเป็นผู้ตัดสินใจว่าจะโหลดรูปภาพใดจากองค์ประกอบ <source>
แต่คุณก็เพียงเพิ่ม loading
ลงในองค์ประกอบ <img>
สำรองเท่านั้น
โหลดรูปภาพที่แสดงในวิวพอร์ตแรกแบบรอดำเนินการเสมอ
สําหรับรูปภาพที่มองเห็นได้เมื่อผู้ใช้โหลดหน้าเว็บเป็นครั้งแรก และโดยเฉพาะอย่างยิ่งสําหรับรูปภาพ LCP ให้ใช้การโหลดแบบรอดำเนินการทันทีเริ่มต้นของเบราว์เซอร์เพื่อให้รูปภาพพร้อมใช้งานทันที ดูข้อมูลเพิ่มเติมได้ที่ผลกระทบด้านประสิทธิภาพของการโหลดแบบ Lazy Loading มากเกินไป
ใช้ loading=lazy
สำหรับรูปภาพนอกวิวพอร์ตเริ่มต้นเท่านั้น เบราว์เซอร์จะโหลดแบบ Lazy Load รูปภาพไม่ได้จนกว่าจะรู้ว่ารูปภาพควรอยู่ตรงไหนในหน้าเว็บ ซึ่งทำให้รูปภาพโหลดช้าลง
<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">
<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
การลดลงอย่างค่อยเป็นค่อยไป
เบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์ loading
จะละเว้นแอตทริบิวต์ดังกล่าว ผู้ใช้เหล่านี้จะไม่ได้รับประโยชน์จากการโหลดแบบเลื่อนลง แต่การรวมการโหลดแบบเลื่อนลงก็ไม่ส่งผลเสียใดๆ
คำถามที่พบบ่อย
คำถามที่พบบ่อยบางข้อเกี่ยวกับการโหลดแบบเลื่อนดูเมื่อพร้อมระดับเบราว์เซอร์
ฉันจะโหลดรูปภาพใน Chrome แบบ Lazy Load โดยอัตโนมัติได้ไหม
ก่อนหน้านี้ Chromium จะโหลดแบบเลื่อนเวลาโดยอัตโนมัติสำหรับรูปภาพที่เหมาะกับการเลื่อนเวลาหากเปิดใช้โหมด Lite ใน Chrome สำหรับ Android และไม่ได้ระบุหรือตั้งค่าแอตทริบิวต์ loading
เป็น loading="auto"
อย่างไรก็ตาม เราเลิกใช้งานโหมด Lite และ loading="auto"
แล้ว และไม่มีแผนที่จะให้บริการโหลดรูปภาพแบบ Lazy Load โดยอัตโนมัติใน Chrome
ฉันจะเปลี่ยนระยะความใกล้ของรูปภาพกับวิวพอร์ตก่อนที่รูปภาพจะโหลดได้ไหม
ค่าเหล่านี้ได้รับการฮาร์ดโค้ดไว้และเปลี่ยนแปลงผ่าน API ไม่ได้ อย่างไรก็ตาม ระยะเหล่านี้อาจเปลี่ยนแปลงในอนาคตเมื่อเบราว์เซอร์ทดสอบระยะทางและตัวแปรต่างๆ ของเกณฑ์
รูปภาพพื้นหลัง CSS ใช้แอตทริบิวต์ loading
ได้ไหม
ไม่ได้ คุณใช้กับแท็ก <img>
เท่านั้น
loading
ทำงานกับรูปภาพในวิวพอร์ตที่มองไม่เห็นในทันทีได้ไหม
การใช้ loading="lazy"
สามารถป้องกันไม่ให้ระบบโหลดรูปภาพเมื่อรูปภาพนั้นมองไม่เห็นแต่อยู่ภายในระยะทางที่คำนวณแล้ว
รูปภาพเหล่านี้อาจอยู่หลังภาพสไลด์หรือถูกซ่อนโดย CSS สำหรับหน้าจอบางขนาด ตัวอย่างเช่น Chrome, Safari และ Firefox จะไม่โหลดรูปภาพโดยใช้display: none;
การจัดสไตล์ในองค์ประกอบรูปภาพหรือองค์ประกอบหลัก อย่างไรก็ตาม เทคนิคอื่นๆ ในการซ่อนรูปภาพ เช่น การใช้opacity:0
การจัดรูปแบบจะยังคงทําให้เบราว์เซอร์โหลดรูปภาพ ทดสอบการใช้งานอย่างละเอียดเสมอเพื่อให้แน่ใจว่าทํางานตามที่คาดไว้
Chrome 121 เปลี่ยนลักษณะการทํางานของรูปภาพที่เลื่อนในแนวนอน เช่น ภาพสไลด์ ตอนนี้เหตุการณ์เหล่านี้ใช้เกณฑ์เดียวกับการเลื่อนแนวตั้ง ซึ่งหมายความว่าสําหรับ Use Case ของภาพสไลด์ ระบบจะโหลดรูปภาพก่อนที่จะแสดงในวิวพอร์ต ซึ่งหมายความว่าผู้ใช้จะสังเกตเห็นการโหลดรูปภาพได้น้อยลง แต่จะต้องเสียค่าดาวน์โหลดมากขึ้น ใช้การสาธิตการโหลดแบบเลื่อนในแนวนอนแบบเลื่อนช้าเพื่อเปรียบเทียบลักษณะการทำงานใน Chrome กับ Safari และ Firefox
จะเกิดอะไรขึ้นหากฉันใช้ไลบรารีหรือสคริปต์ของบุคคลที่สามเพื่อโหลดรูปภาพแบบ Lazy Load อยู่แล้ว
เบราว์เซอร์สมัยใหม่รองรับการโหลดแบบเลื่อนดูเมื่อพร้อมอย่างเต็มรูปแบบ คุณจึงอาจไม่จําเป็นต้องใช้ไลบรารีหรือสคริปต์ของบุคคลที่สามเพื่อโหลดแบบเลื่อนดูเมื่อพร้อม
เหตุผลหนึ่งที่คุณควรใช้ไลบรารีของบุคคลที่สามควบคู่ไปกับ loading="lazy"
ต่อไปคือการมี polyfill สําหรับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์นี้ หรือเพื่อควบคุมเวลาเรียกใช้การโหลดแบบเลื่อนได้มากขึ้น
ฉันจะจัดการกับเบราว์เซอร์ที่ไม่รองรับการโหลดแบบเลื่อนลงได้อย่างไร
เบราว์เซอร์หลักทั้งหมดรองรับการโหลดแบบเลื่อนเวลาของรูปภาพระดับเบราว์เซอร์ และเราขอแนะนําให้ใช้กับกรณีการใช้งานส่วนใหญ่เพื่อไม่ต้องใช้ JavaScript เพิ่มเติม
อย่างไรก็ตาม หากต้องการรองรับเบราว์เซอร์เพิ่มเติมหรือต้องการควบคุมเกณฑ์การโหลดแบบเลื่อนเวลาได้มากขึ้น คุณก็สามารถใช้ไลบรารีของบุคคลที่สามเพื่อโหลดแบบเลื่อนเวลาในเว็บไซต์ได้
คุณสามารถใช้พร็อพเพอร์ตี้ loading
เพื่อตรวจจับว่าเบราว์เซอร์รองรับฟีเจอร์ดังกล่าวหรือไม่ โดยทำดังนี้
if ('loading' in HTMLImageElement.prototype) {
// supported in browser
} else {
// fetch polyfill/third-party library
}
เช่น lazysizes เป็นไลบรารีการโหลดแบบเลื่อนเวลาของ JavaScript ที่ได้รับความนิยม คุณสามารถตรวจหาการรองรับแอตทริบิวต์ loading
เพื่อโหลด lazysizes เป็นไลบรารีสำรองได้เฉพาะในกรณีที่ระบบไม่รองรับ loading
เท่านั้น โดยวิธีการมีดังนี้
- แทนที่
<img src>
ด้วย<img data-src>
เพื่อหลีกเลี่ยงการโหลดล่วงหน้าในเบราว์เซอร์ที่ไม่รองรับ หากระบบรองรับแอตทริบิวต์loading
ให้เปลี่ยนdata-src
เป็นsrc
- หากระบบไม่รองรับ
loading
ให้โหลดทางเลือกจาก lazysizes และเริ่มต้นใช้งานโดยใช้คลาสlazyload
เพื่อระบุรูปภาพที่จะโหลดแบบ Lazy
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">
<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
<script>
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
ต่อไปนี้คือตัวอย่างรูปแบบนี้ ลองใช้ในเบราว์เซอร์รุ่นเก่าเพื่อดูการทํางานของการแสดงผลสำรอง
เบราว์เซอร์รองรับการโหลดแบบ Lazy Loading สําหรับ iframe ด้วยไหม
การรองรับเบราว์เซอร์
<iframe loading=lazy>
ได้รับการมาตรฐานแล้วเช่นกัน ซึ่งจะช่วยให้คุณโหลด iframe แบบเลื่อนเวลาในการโหลดโดยใช้แอตทริบิวต์ loading
ได้ ดูข้อมูลเพิ่มเติมได้ที่ถึงเวลาโหลด iframe ที่อยู่นอกหน้าจอแบบ Lazy Load แล้ว
การโหลดแบบเลื่อนดูเมื่อพร้อมระดับเบราว์เซอร์ส่งผลต่อโฆษณาในหน้าเว็บอย่างไร
โฆษณาทั้งหมดที่แสดงต่อผู้ใช้เป็นรูปภาพหรือ iframe จะโหลดแบบ Lazy Load เช่นเดียวกับรูปภาพหรือ iframe อื่นๆ
ระบบจัดการรูปภาพอย่างไรเมื่อพิมพ์หน้าเว็บ
รูปภาพและ iframe ทั้งหมดจะโหลดทันทีเมื่อพิมพ์หน้าเว็บ ดูรายละเอียดได้ในปัญหา #875403
Lighthouse จดจำการโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ไหม
Lighthouse 6.0 ขึ้นไปจะพิจารณาแนวทางการโหลดแบบ Lazy Loading รูปภาพที่อยู่นอกหน้าจอซึ่งสามารถใช้เกณฑ์ที่แตกต่างกันได้ เพื่อให้หน้าเว็บผ่านการตรวจสอบเลื่อนรูปภาพที่อยู่นอกหน้าจอ
โหลดรูปภาพแบบ Lazy Loading เพื่อปรับปรุงประสิทธิภาพ
การรองรับของเบราว์เซอร์สำหรับการโหลดรูปภาพแบบ Lazy Loading จะช่วยให้คุณปรับปรุงประสิทธิภาพของหน้าเว็บได้ง่ายขึ้นอย่างมาก
คุณสังเกตเห็นลักษณะการทำงานที่ผิดปกติเมื่อเปิดใช้ฟีเจอร์นี้ใน Chrome ไหม รายงานข้อบกพร่อง