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

การรองรับเบราว์เซอร์

  • Chrome: 77
  • Edge: 79
  • Firefox: 75
  • Safari: 15.4

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

รูปภาพที่โหลดแบบ Lazy Loading จะโหลดเมื่อผู้ใช้เลื่อนหน้าเว็บ

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

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

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

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

ตัวเลือกใดตัวเลือกหนึ่งช่วยให้นักพัฒนาแอปรวมลักษณะการโหลดแบบเลื่อนลงได้ และนักพัฒนาแอปจํานวนมากได้สร้างไลบรารีของบุคคลที่สามเพื่อให้การแยกความคิดเป็นนามธรรมที่ใช้งานได้ง่ายยิ่งขึ้น

อย่างไรก็ตาม เมื่อเบราว์เซอร์รองรับการโหลดแบบเลื่อนเวลาไว้ทีหลังโดยตรง ก็ไม่จำเป็นต้องใช้ไลบรารีภายนอก นอกจากนี้ การโหลดแบบ 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) ได้ที่ด้านล่าง

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

และเกณฑ์ใหม่เทียบกับ LazySizes (ไลบรารีการโหลดแบบเลื่อนเวลาของ JavaScript ที่ได้รับความนิยม) มีดังนี้

เกณฑ์ระยะห่างจากวิวพอร์ตใหม่ใน Chrome โหลดรูปภาพขนาด 90 KB เมื่อเทียบกับ LazySizes ที่โหลดขนาด 70 KB ภายใต้เงื่อนไขเครือข่ายเดียวกัน
การเปรียบเทียบเกณฑ์ที่ใช้สำหรับการโหลดแบบเลื่อนใน Chrome และ LazySizes

ระบุแอตทริบิวต์ของมิติข้อมูลรูปภาพ

ขณะที่เบราว์เซอร์โหลดรูปภาพ เบราว์เซอร์จะไม่ทราบว่ารูปภาพมีขนาดเท่าใด เว้นแต่จะมีการระบุไว้อย่างชัดเจน เราขอแนะนำให้เพิ่มแอตทริบิวต์ 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="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 ด้วยไหม

การรองรับเบราว์เซอร์

  • Chrome: 77
  • Edge: 79
  • Firefox: 121
  • Safari: 16.4

<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 ไหม รายงานข้อบกพร่อง