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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

คุณสามารถใช้แอตทริบิวต์ 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 ไหม รายงานข้อบกพร่อง