การรองรับเบราว์เซอร์
- 77
- 79
- 75
- 15.4
คุณใช้แอตทริบิวต์ loading
เพื่อโหลดรูปภาพแบบ Lazy Loading ได้โดยไม่จำเป็นต้อง
เขียนโค้ดการโหลดแบบ Lazy Loading ที่กำหนดเอง หรือใช้ไลบรารี JavaScript แยกต่างหาก ต่อไปนี้คือ
การสาธิตของฟีเจอร์:
หน้านี้จะอธิบายรายละเอียดการใช้การโหลดแบบ Lazy Loading ในเบราว์เซอร์
ทำไมต้องใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์
ตามที่เก็บถาวรของ HTTP รูปภาพคือประเภทเนื้อหาที่มีการร้องขอมากที่สุดสำหรับเว็บไซต์ส่วนใหญ่ และมักจะ ใช้แบนด์วิดท์มากกว่าทรัพยากรอื่นๆ ที่เปอร์เซ็นไทล์ที่ 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>
ทํางานได้ใกล้เคียงกับประสบการณ์การใช้งานของไลบรารีการโหลดแบบ Lazy Loading ของ JavaScript- เกณฑ์ระยะห่างจากวิวพอร์ตใหม่ยังคงหมายความว่ารูปภาพน่าจะโหลดขึ้นมาแล้วเมื่อผู้ใช้เลื่อนไปยังภาพเหล่านั้น
ดูการเปรียบเทียบเกณฑ์ระยะห่างจากวิวพอร์ตแบบเก่ากับแบบใหม่ได้ในการสาธิตหนึ่งของเราบนการเชื่อมต่อความเร็วสูง (4G) ด้านล่าง
เกณฑ์เดิมกับเกณฑ์ใหม่
![เกณฑ์ใหม่ที่ได้รับการปรับปรุงสำหรับการโหลดรูปภาพแบบ Lazy Loading ซึ่งลดเกณฑ์ระยะทางจากวิวพอร์ตสำหรับการเชื่อมต่อที่รวดเร็วจาก 3, 000 พิกเซลลงไปเป็น 1250 พิกเซล](https://web.developers.google.cn/static/articles/browser-level-image-lazy-loading/image/the-and-improved-thresho-a20c669983f73.png?authuser=5&hl=th)
และเกณฑ์ใหม่เทียบกับ LazySizes (ไลบรารีการโหลดแบบ Lazy Loading ของ JavaScript ยอดนิยม) ดังนี้
![เกณฑ์ระยะห่างจากวิวพอร์ตใหม่ใน Chrome ที่โหลดรูปภาพ 90 KB เมื่อเทียบกับการโหลด LazySizes ที่ 70 KB ภายใต้เงื่อนไขเครือข่ายเดียวกัน](https://web.developers.google.cn/static/articles/browser-level-image-lazy-loading/image/the-distance-viewport-b99ee22471f28.png?authuser=5&hl=th)
ระบุแอตทริบิวต์ขนาดรูปภาพ
ขณะที่เบราว์เซอร์โหลดรูปภาพ เบราว์เซอร์จะไม่ทราบในทันที
มิติข้อมูล หากไม่ได้ระบุไว้อย่างชัดแจ้ง หากต้องการให้เบราว์เซอร์จอง
หน้าเว็บมีพื้นที่ว่างเพียงพอสำหรับรูปภาพ และหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ที่รบกวนสายตา
เราขอแนะนำให้เพิ่มแอตทริบิวต์ 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
ทำงานกับรูปภาพจำนวนมาก ให้ไปที่
การสาธิตนี้
นอกจากนี้คุณยังโหลดรูปภาพแบบ Lazy Loading ที่กำหนดไว้โดยใช้เอลิเมนต์ <picture>
ได้ด้วย ดังนี้
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>
แม้ว่าเบราว์เซอร์จะตัดสินใจว่าจะโหลดรูปภาพใดจาก <source>
ก็ตาม
คุณต้องเพิ่ม loading
ลงในองค์ประกอบ <img>
สำรองเท่านั้น
รูปภาพที่โหลดอย่างรวดเร็วซึ่งมองเห็นได้ในวิวพอร์ตแรกเสมอ
สำหรับรูปภาพที่ปรากฏเมื่อผู้ใช้โหลดหน้าเว็บเป็นครั้งแรก โดยเฉพาะอย่างยิ่ง สำหรับรูปภาพ 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 โดยอัตโนมัติใน Chrome ได้ไหม
ก่อนหน้านี้ Chromium จะโหลดรูปภาพที่เหมาะสมแบบ Lazy Loading โดยอัตโนมัติ
จะถูกเลื่อนออกไปถ้าโหมด 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 ภาพหมุน ระบบจะโหลดรูปภาพก่อนที่จะแสดงในวิวพอร์ต ซึ่งหมายความว่าผู้ใช้มีแนวโน้มที่จะสังเกตเห็นการโหลดรูปภาพน้อยลง แต่พวกเขาต้องเสียค่าใช้จ่ายในการดาวน์โหลดมากกว่า ใช้การสาธิตการโหลดแบบ Lazy Loading แนวนอนเพื่อเปรียบเทียบลักษณะการทำงานใน Chrome กับ Safari และ Firefox
จะเกิดอะไรขึ้นหากฉันใช้ไลบรารีหรือสคริปต์ของบุคคลที่สามเพื่อโหลดรูปภาพแบบ Lazy Loading อยู่แล้ว
ด้วยการสนับสนุนการโหลดแบบ Lazy Loading อย่างสมบูรณ์ในเบราว์เซอร์สมัยใหม่ คุณคงไม่ ซึ่งจำเป็นต้องใช้ไลบรารีหรือสคริปต์ของบุคคลที่สามเพื่อโหลดรูปภาพแบบ Lazy Loading
เหตุผลหนึ่งที่ควรใช้ไลบรารีของบุคคลที่สามร่วมกับ loading="lazy"
ต่อไป
คือการระบุ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์นี้ หรือเพื่อ
ควบคุมได้มากขึ้นเมื่อเรียกใช้การโหลดแบบ Lazy Loading
ฉันจะจัดการกับเบราว์เซอร์ที่ไม่รองรับการโหลดแบบ Lazy Loading ได้อย่างไร
สร้าง Polyfill หรือใช้ไลบรารีของบุคคลที่สามเพื่อโหลดรูปภาพแบบ Lazy Loading ในเว็บไซต์ของคุณ
คุณสามารถใช้พร็อพเพอร์ตี้ loading
เพื่อตรวจหาว่าเบราว์เซอร์รองรับ
ฟีเจอร์:
if ('loading' in HTMLImageElement.prototype) {
// supported in browser
} else {
// fetch polyfill/third-party library
}
ตัวอย่างเช่น lazysizes เป็นที่นิยม
ไลบรารีการโหลดแบบ Lazy Loading ของ 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 ด้วยไหม
การรองรับเบราว์เซอร์
- 77
- 79
- 121
- 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 ไหม รายงานข้อบกพร่อง