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

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