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

Addy Osmani
Houssein Djirdeh
Mathias Bynens
Barry Pollard

Browser Support

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

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

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

หน้านี้จะอธิบายรายละเอียดเกี่ยวกับการใช้ Lazy Loading ในเบราว์เซอร์

ทำไมจึงต้องใช้ Lazy Loading ระดับเบราว์เซอร์

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

ก่อนหน้านี้มี 2 วิธีในการเลื่อนการโหลดรูปภาพนอกหน้าจอ

  • ใช้ Intersection Observer API
  • ใช้ตัวแฮนเดิลเหตุการณ์ scroll, resize, หรือ orientationchange

ตัวเลือกใดตัวเลือกหนึ่งจะช่วยให้นักพัฒนาเว็บสามารถใส่ลักษณะการทำงานของ 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" โดยอัตโนมัติเมื่อไม่มี ค่าที่ชัดเจน หรือหากตัวตรวจสอบโค้ด (Linter) แสดงข้อผิดพลาดหากไม่ได้ตั้งค่าอย่างชัดเจน

ความสัมพันธ์ระหว่างแอตทริบิวต์ loading กับลำดับความสำคัญในการดึงข้อมูล

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

หากต้องการเพิ่มลำดับความสำคัญในการดึงข้อมูลของรูปภาพที่สำคัญ (เช่น รูปภาพ LCP) ให้ใช้ ลำดับความสำคัญในการดึงข้อมูล ด้วย fetchpriority="high"

รูปภาพที่มี loading="lazy" และ fetchpriority="high" จะยังคงโหลดช้าขณะที่ อยู่นอกหน้าจอ จากนั้นระบบจะดึงข้อมูลรูปภาพด้วยลำดับความสำคัญสูงเมื่อรูปภาพเกือบจะอยู่ใน วิวพอร์ต การใช้ค่าทั้ง 2 ร่วมกันนี้ไม่จำเป็นนักเนื่องจากเบราว์เซอร์น่าจะโหลดรูปภาพดังกล่าวด้วยลำดับความสำคัญสูงอยู่แล้ว

เกณฑ์ระยะทางจากวิวพอร์ต

รูปภาพทั้งหมดที่มองเห็นได้ทันทีโดยไม่ต้องเลื่อนจะโหลดตามปกติ ระบบจะดึงข้อมูลรูปภาพที่อยู่ไกลจากวิวพอร์ตของอุปกรณ์ก็ต่อเมื่อผู้ใช้เลื่อนไปใกล้รูปภาพเหล่านั้น

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

เกณฑ์ระยะทางจะแตกต่างกันไปตามปัจจัยต่อไปนี้

  • ประเภททรัพยากรรูปภาพที่ดึงข้อมูล
  • ประเภทการเชื่อมต่อที่มีผล

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

การประหยัดข้อมูลและเกณฑ์ระยะทางจากวิวพอร์ตที่ได้รับการปรับปรุง

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

ในเครือข่ายที่รวดเร็ว (4G) เราได้ลดเกณฑ์ระยะทางจากวิวพอร์ตของ Chrome จาก 3000px เป็น 1250px และในเครือข่ายที่ช้ากว่า (3G หรือต่ำกว่า) เราได้เปลี่ยนเกณฑ์จาก 4000px เป็น 2500px การเปลี่ยนแปลงนี้มีผล 2 อย่างดังนี้

  • <img loading=lazy> ทำงานคล้ายกับประสบการณ์ที่ไลบรารี JavaScript สำหรับ Lazy Loading มอบให้
  • เกณฑ์ระยะทางจากวิวพอร์ตใหม่ยังคงหมายความว่ารูปภาพน่าจะโหลดเสร็จทันเวลาที่ผู้ใช้เลื่อนไปถึงรูปภาพ

คุณดูการเปรียบเทียบระหว่างเกณฑ์ระยะทางจากวิวพอร์ตแบบเก่ากับแบบใหม่สำหรับการสาธิตรายการหนึ่งของเราในเครือข่ายที่รวดเร็ว (4G) ได้ที่ด้านล่าง

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

และเกณฑ์ใหม่เทียบกับ LazySizes (ไลบรารี JavaScript ยอดนิยมสำหรับ Lazy Loading)

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

การโหลดแบบ Lazy Loading ใน Chromium ได้รับการติดตั้งใช้งานในลักษณะที่ทำให้รูปภาพมีแนวโน้มที่จะโหลดทันทีที่มองเห็นได้ แต่ก็ยังมีความเป็นไปได้ที่รูปภาพจะไม่โหลดในเวลาที่เหมาะสม หากเกิดกรณีดังกล่าว การไม่ระบุ width และ height ในรูปภาพจะเพิ่มผลกระทบต่อ Cumulative Layout Shift หาก ระบุขนาดของรูปภาพไม่ได้ การโหลดรูปภาพแบบ Lazy Loading จะช่วยประหยัด ทรัพยากรเครือข่าย แต่ก็มีความเสี่ยงที่จะเกิดการเปลี่ยนแปลงเลย์เอาต์เพิ่มขึ้น

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

ดูตัวอย่างการทำงานของ loading กับรูปภาพจำนวนมากได้ที่ การสาธิตนี้

นอกจากนี้ คุณยังโหลดรูปภาพที่กำหนดไว้โดยใช้ <picture> แบบ Lazy Loading ได้ด้วย

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

แม้ว่าเบราว์เซอร์จะเป็นผู้กำหนดว่าจะโหลดรูปภาพใดจากองค์ประกอบ <source> แต่คุณก็เพียงแค่เพิ่ม loading ลงในองค์ประกอบ <img> ที่เป็นตัวเลือกสำรอง

โหลดรูปภาพที่มองเห็นได้ในวิวพอร์ตแรกแบบ Eager Loading เสมอ

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

ใช้ loading=lazy กับรูปภาพที่อยู่นอกวิวพอร์ตเริ่มต้นเท่านั้น เบราว์เซอร์จะโหลดรูปภาพแบบ Lazy Loading ไม่ได้จนกว่าจะทราบว่ารูปภาพควรอยู่ที่ใดในหน้าเว็บ ซึ่งทำให้รูปภาพโหลดช้าลง

<!-- 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 ระดับเบราว์เซอร์

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

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

ฉันเปลี่ยนระยะทางที่รูปภาพต้องอยู่ห่างจากวิวพอร์ตก่อนที่จะโหลดได้ไหม

ค่าเหล่านี้มีการฮาร์ดโค้ดไว้และไม่สามารถเปลี่ยนแปลงผ่าน API ได้ อย่างไรก็ตาม ค่าเหล่านี้อาจเปลี่ยนแปลงในอนาคตเมื่อเบราว์เซอร์ทดลองใช้ระยะทางและตัวแปรเกณฑ์ต่างๆ

รูปภาพพื้นหลัง CSS ใช้แอตทริบิวต์ loading ได้ไหม

ไม่ได้ คุณใช้แอตทริบิวต์นี้ได้กับแท็ก <img> เท่านั้น

การใช้ loading="lazy" อาจ ป้องกันไม่ให้รูปภาพโหลดเมื่อมองไม่เห็นแต่รูปภาพอยู่ภายใน ระยะทางที่คำนวณได้ รูปภาพเหล่านี้อาจอยู่ด้านหลังแคโรเซลหรือซ่อนอยู่ด้วย CSS สำหรับขนาดหน้าจอบางขนาด ตัวอย่างเช่น Chrome, Safari และ Firefox จะไม่โหลดรูปภาพโดยใช้สไตล์ display: none; ไม่ว่าจะเป็นในองค์ประกอบรูปภาพหรือในองค์ประกอบระดับบน อย่างไรก็ตาม เทคนิคการซ่อนรูปภาพอื่นๆ เช่น การใช้สไตล์ opacity:0 จะยังคงทำให้เบราว์เซอร์โหลดรูปภาพ โปรดทดสอบการติดตั้งใช้งานอย่างละเอียดเพื่อให้แน่ใจว่าการติดตั้งใช้งานทำงานตามที่ตั้งใจไว้

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

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

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

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

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

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

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

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

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

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

  • แทนที่ <img src> ด้วย <img data-src> เพื่อหลีกเลี่ยงการโหลดแบบ Eager Loading ใน เบราว์เซอร์ที่ไม่รองรับ หากรองรับแอตทริบิวต์ loading ให้สลับ data-src เป็น src
  • หากไม่รองรับ loading ให้โหลดตัวเลือกสำรองจาก lazysizes และเริ่มต้นตัวเลือกสำรองนั้น โดยใช้คลาส 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>

นี่คือการสาธิตรูปแบบนี้ ลองใช้ในเบราว์เซอร์เก่าเพื่อดูตัวเลือกสำรองในการทำงาน

เบราว์เซอร์รองรับการโหลด iframe แบบ Lazy Loading ด้วยไหม

Browser Support

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

<iframe loading=lazy> ได้รับการกำหนดมาตรฐานแล้ว ซึ่งช่วยให้คุณโหลด iframe แบบ Lazy Loading ได้โดยใช้แอตทริบิวต์ loading ดูข้อมูลเพิ่มเติมได้ที่ถึงเวลาโหลด iframe นอกหน้าจอแบบ Lazy Loading แล้ว

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

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

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

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

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

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

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

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

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