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

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

การโหลดรูปภาพแบบ Lazy Loading ระดับเบราว์เซอร์รองรับการทำงานที่ดีในเบราว์เซอร์หลักๆ ทั้งหมด และแนะนำสำหรับ Use Case ส่วนใหญ่ เพื่อลดความจำเป็นในการอ้างอิง JavaScript เพิ่มเติม

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

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