หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: การทดสอบใน Chrome บน Android ชี้ให้เห็นว่าเมื่อใช้ 4G รูปภาพที่โหลดแบบ Lazy โหลด 97.5% จะโหลดเสร็จสมบูรณ์ภายใน 10 มิลลิวินาทีหลังจากที่ปรากฏขึ้น แม้จะใช้เครือข่าย 2G ที่ช้า แต่รูปภาพที่โหลดแบบ Lazy โหลดเสร็จสมบูรณ์ภายใน 10 มิลลิวินาทีถึง 92.6% ซึ่งหมายความว่าการโหลดแบบ Lazy Loading ระดับเบราว์เซอร์จะมอบประสบการณ์การมองเห็นรูปภาพที่เสถียร

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

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

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

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

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

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

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

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

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

และเกณฑ์ใหม่เทียบกับ 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` สามารถทำงานกับรูปภาพในวิวพอร์ตที่ไม่ได้มองเห็นได้ทันทีได้ไหม

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

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

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

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

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

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

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

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

คุณใช้พร็อพเพอร์ตี้ 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 แบบ 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 ไหม รายงานข้อบกพร่อง