การโหลดรูปภาพระดับเบราว์เซอร์แบบ Lazy Loading สำหรับเว็บ

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

หน้านี้จะอธิบายรายละเอียดการใช้งานการโหลดแบบเลื่อนในเบราว์เซอร์

เหตุผลที่ควรใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์

HTTP Archive ระบุว่ารูปภาพเป็นประเภทเนื้อหาที่ได้รับคำขอมากที่สุดสำหรับเว็บไซต์ส่วนใหญ่ และมักจะใช้แบนด์วิดท์มากกว่าทรัพยากรอื่นๆ เมื่ออยู่ที่เปอร์เซ็นต์ไทล์ที่ 90 เว็บไซต์จะส่งรูปภาพขนาดมากกว่า 5 MB บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

ก่อนหน้านี้ การเลื่อนการโหลดรูปภาพนอกหน้าจอทำได้ 2 วิธีดังนี้

• การใช้ Intersection Observer API
• การใช้ เครื่องจัดการเหตุการณ์ scroll, resize หรือ orientationchange

ทั้ง 2 ตัวเลือกช่วยให้นักพัฒนาซอฟต์แวร์ใส่ลักษณะการโหลดแบบ Lazy Loading ได้ และนักพัฒนาซอฟต์แวร์จำนวนมากได้สร้างไลบรารีของบุคคลที่สามเพื่อมอบนามธรรมที่ใช้งานง่ายอีกต่อไป

อย่างไรก็ตาม การโหลดแบบ Lazy Loading ที่เบราว์เซอร์รองรับโดยตรงก็ไม่จำเป็นต้องใช้ไลบรารีภายนอก นอกจากนี้ การโหลดแบบ 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 ได้ทำการปรับปรุงที่สำคัญเพื่อปรับเกณฑ์ระยะทางจากวิวพอร์ตสำหรับการโหลดรูปภาพแบบ Lazy Loading ให้สอดคล้องกัน เพื่อให้เป็นไปตามความคาดหวังของนักพัฒนาแอปได้ดียิ่งขึ้น

ในการเชื่อมต่อที่รวดเร็ว (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 จะละเว้นแอตทริบิวต์ดังกล่าว ผู้ใช้เหล่านี้จะไม่ได้รับประโยชน์จากการโหลดแบบเลื่อนลง แต่การรวมการโหลดแบบเลื่อนลงก็ไม่ส่งผลเสียใดๆ

คำถามที่พบบ่อย

คำถามที่พบบ่อยเกี่ยวกับการโหลดแบบ Lazy Loading ระดับเบราว์เซอร์

ฉันสามารถโหลดรูปภาพแบบ Lazy Loading โดยอัตโนมัติใน Chrome ได้ไหม

ก่อนหน้านี้ Chromium จะโหลดรูปภาพที่เหมาะสำหรับการเลื่อนเวลาโหลดโดยอัตโนมัติหากเปิดใช้โหมด Lite ใน Chrome สำหรับ Android และไม่ได้ระบุแอตทริบิวต์ loading หรือไม่ได้ตั้งค่าเป็น loading="auto" อย่างไรก็ตาม เราเลิกใช้งานโหมด Lite และ loading="auto" แล้ว และไม่มีแผนที่จะให้บริการรูปภาพแบบ Lazy Loading โดยอัตโนมัติใน 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 อยู่แล้ว

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

เหตุผลหนึ่งที่คุณควรใช้ไลบรารีของบุคคลที่สามควบคู่ไปกับ loading="lazy" ต่อไปคือการมี polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์นี้ หรือเพื่อควบคุมเวลาเรียกใช้การโหลดแบบเลื่อนลงได้มากขึ้น

ฉันจะจัดการกับเบราว์เซอร์ที่ไม่รองรับการโหลดแบบ Lazy Loading ได้อย่างไร

การโหลดรูปภาพแบบ Lazy Loading ระดับเบราว์เซอร์รองรับการทำงานที่ดีในเบราว์เซอร์หลักๆ ทั้งหมด และแนะนำสำหรับ Use Case ส่วนใหญ่ เพื่อลดความจำเป็นในการอ้างอิง JavaScript เพิ่มเติม

อย่างไรก็ตาม หากต้องการรองรับเบราว์เซอร์เพิ่มเติมหรือต้องการควบคุมเกณฑ์การโหลดแบบเลื่อนเวลาได้มากขึ้น คุณก็สามารถใช้ไลบรารีของบุคคลที่สามเพื่อโหลดแบบเลื่อนเวลาในเว็บไซต์ได้

คุณใช้พร็อพเพอร์ตี้ loading เพื่อตรวจหาว่าเบราว์เซอร์รองรับฟีเจอร์นี้หรือไม่ ดังนี้

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

เช่น lazysizes เป็นไลบรารีการโหลดแบบเลื่อนเวลาของ JavaScript ที่ได้รับความนิยม คุณจะตรวจหาการรองรับแอตทริบิวต์ loading เพื่อโหลดขนาด Lazysize เป็นไลบรารีสำรองได้ก็ต่อเมื่อระบบไม่รองรับ loading โดยวิธีการมีดังนี้

• แทนที่ <img src> ด้วย <img data-src> เพื่อหลีกเลี่ยงการโหลดล่วงหน้าในเบราว์เซอร์ที่ไม่รองรับ หากระบบรองรับแอตทริบิวต์ loading ให้เปลี่ยน data-src เป็น src
• หากระบบไม่รองรับ loading ให้โหลดวิดีโอสำรองจาก Lazysize แล้วเริ่มต้นโดยใช้คลาส lazyload เพื่อระบุว่ารูปภาพใดบ้างที่จะโหลดแบบ Lazy Loading ดังนี้

<!-- 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 แบบ Lazy Load ได้โดยใช้แอตทริบิวต์ loading ดูข้อมูลเพิ่มเติมได้ที่ได้เวลาโหลด iframe นอกหน้าจอแบบ Lazy Loading แล้ว

การโหลดแบบเลื่อนดูเมื่อพร้อมระดับเบราว์เซอร์ส่งผลต่อโฆษณาในหน้าเว็บอย่างไร

โฆษณาทั้งหมดที่แสดงต่อผู้ใช้เป็นรูปภาพหรือ iframe จะโหลดแบบ Lazy Load เช่นเดียวกับรูปภาพหรือ iframe อื่นๆ

ระบบจัดการรูปภาพอย่างไรเมื่อพิมพ์หน้าเว็บ

รูปภาพและ iframe ทั้งหมดจะโหลดทันทีเมื่อพิมพ์หน้าเว็บ ดูรายละเอียดได้ในปัญหา #875403

Lighthouse จดจำการโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ไหม

Lighthouse 6.0 ขึ้นไปจะพิจารณาแนวทางการโหลดแบบ Lazy Loading รูปภาพที่อยู่นอกหน้าจอซึ่งสามารถใช้เกณฑ์ที่แตกต่างกันได้ ซึ่งจะช่วยให้หน้าเว็บผ่านการตรวจสอบเลื่อนรูปภาพที่อยู่นอกหน้าจอ

โหลดรูปภาพแบบ Lazy Loading เพื่อปรับปรุงประสิทธิภาพ

การรองรับของเบราว์เซอร์สำหรับการโหลดรูปภาพแบบ Lazy Loading จะช่วยให้คุณปรับปรุงประสิทธิภาพของหน้าเว็บได้ง่ายขึ้นอย่างมาก

คุณสังเกตเห็นลักษณะการทำงานที่ผิดปกติเมื่อเปิดใช้ฟีเจอร์นี้ใน Chrome ไหม รายงานข้อบกพร่อง