การสนับสนุนเบราว์เซอร์
- 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) ได้ที่ด้านล่าง
เกณฑ์เดิมกับเกณฑ์ใหม่
และเกณฑ์ใหม่กับ LazySizes (ไลบรารีการโหลดแบบ Lazy Loading ของ 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>
ไม่ว่าคุณจะโหลดแบบ 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 ให้ใช้การโหลดที่ตั้งใจเริ่มต้นของเบราว์เซอร์เพื่อให้พร้อมใช้งานได้ทันที ดูข้อมูลเพิ่มเติมได้ที่ผลด้านประสิทธิภาพของการโหลดแบบ 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 จะโหลดรูปภาพที่เหมาะจะเลื่อนโดยอัตโนมัติออกไป หากเปิดใช้โหมด 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 เปลี่ยนลักษณะการทำงานของการเลื่อนในแนวนอนอย่างเช่นภาพสไลด์ แต่ตอนนี้จะใช้เกณฑ์เดียวกับการเลื่อนแนวตั้ง ซึ่งหมายความว่าสำหรับกรณีการใช้งานภาพสไลด์ รูปภาพจะโหลดก่อนที่จะมองเห็นได้ในวิวพอร์ต ซึ่งหมายความว่าผู้ใช้มีแนวโน้มที่จะโหลดรูปภาพน้อยลง แต่มีค่าใช้จ่ายในการดาวน์โหลดมากขึ้น ใช้การสาธิตการโหลดแบบ Lazy Loading แนวนอนเพื่อเปรียบเทียบลักษณะการทำงานใน Chrome กับ Safari และ Firefox
จะเกิดอะไรขึ้นหากฉันใช้ไลบรารีหรือสคริปต์ของบุคคลที่สามเพื่อโหลดรูปภาพแบบ Lazy Loading อยู่แล้ว
เบราว์เซอร์ที่ทันสมัยรองรับการโหลดแบบ Lazy Loading อย่างเต็มรูปแบบ คุณจึงไม่จำเป็นต้องใช้ไลบรารีหรือสคริปต์ของบุคคลที่สามเพื่อโหลดรูปภาพแบบ Lazy Loading
เหตุผลหนึ่งที่จะยังคงใช้ไลบรารีของบุคคลที่สามร่วมกับ loading="lazy"
ต่อไปคือการใช้ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์หรือเพื่อให้ควบคุมมากขึ้นเมื่อมีการทริกเกอร์การโหลดแบบ Lazy Loading ได้
ฉันจะจัดการเบราว์เซอร์ที่ไม่รองรับการโหลดแบบ Lazy Loading ได้อย่างไร {browsers-dont-support}
สร้าง 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 ระดับเบราว์เซอร์ส่งผลต่อโฆษณาในหน้าเว็บอย่างไร
โฆษณาทั้งหมดที่แสดงให้ผู้ใช้เห็นเป็นรูปภาพหรือ iframes แบบ Lazy Loading เช่นเดียวกับรูปภาพหรือ iframe อื่นๆ
มีการจัดการรูปภาพอย่างไรเมื่อพิมพ์หน้าเว็บ
รูปภาพและ iframe ทั้งหมดจะโหลดทันทีเมื่อพิมพ์หน้าเว็บ ดูรายละเอียดในปัญหา #875403
Lighthouse รู้จักการโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ไหม
แนวทางของ Lighthouse 6.0 และปัจจัยที่สูงกว่าสำหรับการโหลดแบบ Lazy Loading รูปภาพนอกหน้าจอซึ่งใช้เกณฑ์ที่แตกต่างกันได้ทําให้ผ่านการตรวจสอบเลื่อนรูปภาพนอกหน้าจอ
โหลดรูปภาพแบบ Lazy Loading เพื่อปรับปรุงประสิทธิภาพ
การรองรับเบราว์เซอร์สำหรับรูปภาพการโหลดแบบ Lazy Loading จะช่วยให้คุณปรับปรุงประสิทธิภาพของหน้าเว็บได้ง่ายขึ้นมาก
คุณสังเกตเห็นพฤติกรรมที่ผิดปกติเมื่อเปิดใช้ฟีเจอร์นี้ใน Chrome หรือไม่ รายงานข้อบกพร่อง