รูปภาพปรากฏในหน้าเว็บได้เนื่องจากแทรกอยู่ใน HTML เป็นองค์ประกอบ <img>
หรือเป็นภาพพื้นหลัง CSS ในโพสต์นี้ คุณจะได้ดูวิธีโหลดรูปภาพทั้ง 2 ประเภทแบบ Lazy Loading
ภาพในบรรทัด
ตัวเลือกการโหลดแบบ Lazy Loading ที่พบบ่อยที่สุดคือรูปภาพที่ใช้ในองค์ประกอบ <img>
เรามี 3 ตัวเลือกสำหรับการโหลดแบบ Lazy Loading สำหรับรูปภาพในบรรทัด ซึ่งอาจใช้ร่วมกันเพื่อให้เข้ากับเบราว์เซอร์ต่างๆ ได้ดีที่สุด
การใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์
ทั้ง Chrome และ Firefox รองรับการโหลดแบบ Lazy Loading ด้วยแอตทริบิวต์ loading
คุณเพิ่มแอตทริบิวต์นี้ลงในองค์ประกอบ <img>
และองค์ประกอบ <iframe>
ได้ด้วย
ค่า lazy
จะบอกให้เบราว์เซอร์โหลดรูปภาพทันทีหากอยู่ในวิวพอร์ต และดึงรูปภาพอื่นๆ เมื่อผู้ใช้เลื่อนเข้ามาใกล้รูปภาพ
ดูรายละเอียดการรองรับเบราว์เซอร์ในช่อง loading
ของตารางความเข้ากันได้กับเบราว์เซอร์ของ MDN
หากเบราว์เซอร์ไม่รองรับการโหลดแบบ Lazy Loading ระบบจะไม่สนใจแอตทริบิวต์ดังกล่าวและรูปภาพจะโหลดทันทีตามปกติ
สำหรับเว็บไซต์ส่วนใหญ่ การเพิ่มแอตทริบิวต์นี้ลงในรูปภาพในบรรทัดจะช่วยเพิ่มประสิทธิภาพ และช่วยให้ผู้ใช้โหลดรูปภาพที่ตนอาจไม่เคยเลื่อนผ่านไป หากคุณมีรูปภาพจำนวนมากและต้องการแน่ใจว่าผู้ใช้เบราว์เซอร์ที่ไม่รองรับสิทธิประโยชน์การโหลดแบบ Lazy Loading จะต้องผสานรวมฟีเจอร์นี้เข้ากับวิธีการใดวิธีการหนึ่งที่อธิบายไว้ข้างต้น
ดูข้อมูลเพิ่มเติมได้ที่การโหลดแบบ Lazy Loading สำหรับเว็บระดับเบราว์เซอร์
การใช้ Intersection Observer
ในการสร้างการโหลดแบบ Lazy Loading ขององค์ประกอบ <img>
เราจะใช้ JavaScript เพื่อตรวจสอบว่าองค์ประกอบอยู่ในวิวพอร์ตหรือไม่ เพราะหากใช่ แอตทริบิวต์ src
(และบางครั้งเป็น srcset
) จะเติม URL ไปยังเนื้อหารูปภาพที่ต้องการ
หากเคยเขียนโค้ดการโหลดแบบ Lazy Loading มาก่อน คุณอาจทำงานสำเร็จแล้วโดยใช้ตัวแฮนเดิลเหตุการณ์ เช่น scroll
หรือ resize
แม้ว่าวิธีนี้จะเข้ากันได้ดีที่สุดกับทุกเบราว์เซอร์ แต่เบราว์เซอร์รุ่นใหม่เป็นวิธีที่มีประสิทธิภาพและประสิทธิผลมากกว่าในการตรวจสอบการเปิดเผยองค์ประกอบผ่าน Intersection Observer API
Intersection Observer ใช้งานและอ่านได้ง่ายกว่าโค้ดที่อาศัยตัวแฮนเดิลเหตุการณ์ต่างๆ เนื่องจากคุณต้องลงทะเบียนผู้สังเกตการณ์เพื่อดูองค์ประกอบเท่านั้น แทนที่จะต้องเขียนโค้ดตรวจจับการเปิดเผยองค์ประกอบที่น่าเบื่อหน่าย ที่เหลือก็ต้องตัดสินใจว่าจะทำอะไรเมื่อองค์ประกอบแสดงขึ้น
สมมติว่ารูปแบบมาร์กอัปพื้นฐานนี้สำหรับองค์ประกอบ <img>
ที่โหลดแบบ Lazy Loading
<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">
มาร์กอัปนี้มีอยู่ 3 ส่วนที่เกี่ยวข้องซึ่งคุณควรมุ่งเน้น ดังนี้
- แอตทริบิวต์
class
ซึ่งเป็นสิ่งที่คุณจะเลือกองค์ประกอบใน JavaScript - แอตทริบิวต์
src
ซึ่งอ้างอิงรูปภาพตัวยึดตำแหน่งที่จะปรากฏขึ้นเมื่อโหลดหน้าเว็บเป็นครั้งแรก - แอตทริบิวต์
data-src
และdata-srcset
ซึ่งเป็นแอตทริบิวต์ตัวยึดตำแหน่งที่มี URL ของรูปภาพที่คุณจะโหลดเมื่อองค์ประกอบอยู่ในวิวพอร์ต
ตอนนี้เรามาดูวิธีใช้ Intersection Observer ใน JavaScript เพื่อโหลดรูปภาพแบบ Lazy Loading โดยใช้รูปแบบมาร์กอัปนี้
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to event handlers here
}
});
ในเหตุการณ์ DOMContentLoaded
ของเอกสาร สคริปต์นี้จะค้นหา DOM สำหรับองค์ประกอบ <img>
ทั้งหมดที่มีคลาสเป็น lazy
หากมี Intersection Observer ให้สร้างผู้สังเกตการณ์ใหม่ที่เรียกใช้ Callback เมื่อองค์ประกอบ img.lazy
เข้าสู่วิวพอร์ต
Intersection Observer ใช้ได้ในเบราว์เซอร์รุ่นใหม่ทั้งหมด
ดังนั้นการใช้โปรโตคอลดังกล่าวเป็น Polyfill สำหรับ loading="lazy"
จะทำให้ผู้เข้าชมส่วนใหญ่ใช้งานการโหลดแบบ Lazy Loading ได้
รูปภาพใน CSS
แม้ว่าแท็ก <img>
จะเป็นวิธีใช้รูปภาพในหน้าเว็บที่ใช้กันมากที่สุด แต่คุณก็เรียกใช้รูปภาพผ่านพร็อพเพอร์ตี้ CSS background-image
(และพร็อพเพอร์ตี้อื่นๆ) ได้เช่นกัน การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ใช้ไม่ได้กับภาพพื้นหลัง CSS
ดังนั้นคุณต้องพิจารณาวิธีอื่นหากมีภาพพื้นหลังเพื่อโหลดแบบ Lazy Loading
ลักษณะการโหลดรูปภาพใน CSS มีการคาดเดามากกว่า ซึ่งต่างจากเอลิเมนต์ <img>
ที่โหลดโดยไม่คำนึงถึงระดับการมองเห็น เมื่อสร้างโมเดลออบเจ็กต์เอกสารและ CSS และแผนผังการแสดงผล เบราว์เซอร์จะตรวจสอบว่า CSS มีผลกับเอกสารอย่างไรก่อนที่จะขอทรัพยากรภายนอก หากเบราว์เซอร์ระบุกฎ CSS ที่เกี่ยวข้องกับทรัพยากรภายนอกไม่ได้ใช้กับเอกสารเนื่องจากเอกสารกำลังสร้างขึ้น เบราว์เซอร์จะไม่ขอกฎ
ลักษณะการทำงานแบบคาดเดานี้อาจใช้เพื่อเลื่อนการโหลดรูปภาพใน CSS โดยใช้ JavaScript เพื่อระบุว่าองค์ประกอบหนึ่งๆ อยู่ในวิวพอร์ตเมื่อใด และจากนั้นจึงใช้คลาสกับองค์ประกอบนั้นซึ่งใช้การจัดรูปแบบการเรียกใช้ภาพพื้นหลัง ซึ่งจะทำให้รูปภาพดาวน์โหลดในเวลาที่ต้องการแทนที่จะเป็นการโหลดครั้งแรก ลองดูองค์ประกอบที่มีภาพพื้นหลังหลักขนาดใหญ่ต่อไปนี้
<div class="lazy-background">
<h1>Here's a hero heading to get your attention!</h1>
<p>Here's hero copy to convince you to buy a thing!</p>
<a href="/buy-a-thing">Buy a thing!</a>
</div>
โดยปกติแล้วองค์ประกอบ div.lazy-background
จะมีภาพพื้นหลังหลัก
ที่ CSS บางรายเรียกใช้ แต่ในตัวอย่างการโหลดแบบ Lazy Loading นี้ คุณสามารถแยกพร็อพเพอร์ตี้ background-image
ขององค์ประกอบ div.lazy-background
ผ่านคลาส visible
ที่เพิ่มลงในองค์ประกอบเมื่ออยู่ในวิวพอร์ตได้ โดยทำดังนี้
.lazy-background {
background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}
.lazy-background.visible {
background-image: url("hero.jpg"); /* The final image */
}
จากที่นี่ ให้ใช้ JavaScript เพื่อตรวจสอบว่าองค์ประกอบอยู่ในวิวพอร์ตหรือไม่ (พร้อมด้วย Intersection Observer!) และเพิ่มคลาส visible
ไปยังองค์ประกอบ div.lazy-background
ในขณะนั้นซึ่งจะโหลดรูปภาพ ดังนี้
document.addEventListener("DOMContentLoaded", function() {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
if ("IntersectionObserver" in window) {
let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
lazyBackgroundObserver.unobserve(entry.target);
}
});
});
lazyBackgrounds.forEach(function(lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
}
});
ผลต่อ Largest Contentful Paint (LCP)
การโหลดแบบ Lazy Loading นั้นเป็นการเพิ่มประสิทธิภาพที่ยอดเยี่ยมซึ่งลดทั้งการใช้ข้อมูลโดยรวมและการแย่งชิงเครือข่ายในช่วงที่เริ่มต้นใช้งานด้วยการเลื่อนการโหลดรูปภาพไปยังเวลาที่จำเป็นจริงๆ การดำเนินการนี้จะช่วยปรับปรุงเวลาเริ่มต้น และลดการประมวลผลในเทรดหลักด้วยการลดเวลาที่ต้องใช้ในการถอดรหัสรูปภาพ
อย่างไรก็ตาม การโหลดแบบ Lazy Loading เป็นเทคนิคที่อาจส่งผลต่อ LCP การแสดงผลเนื้อหาขนาดใหญ่ที่สุดของเว็บไซต์ในทางลบหากคุณสนใจเทคนิคนี้มากเกินไป สิ่งหนึ่งที่คุณควรหลีกเลี่ยงคือรูปภาพที่โหลดแบบ Lazy Loading ที่อยู่ในวิวพอร์ตในระหว่างการเริ่มต้นใช้งาน
เมื่อใช้ตัวโหลดแบบ Lazy Loading ที่ใช้ JavaScript คุณจะต้องหลีกเลี่ยงการโหลดรูปภาพในวิวพอร์ตแบบ Lazy Loading เนื่องจากโซลูชันเหล่านี้มักจะใช้แอตทริบิวต์ data-src
หรือ data-srcset
เป็นตัวยึดตําแหน่งสําหรับแอตทริบิวต์ src
และ srcset
ปัญหาก็คือการโหลดรูปภาพเหล่านี้ล่าช้าเนื่องจากตัวสแกนการโหลดล่วงหน้าของเบราว์เซอร์ไม่พบรูปภาพเหล่านั้นระหว่างการเริ่มต้น
แม้แต่การใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์เพื่อโหลดแบบ Lazy Loading ในวิวพอร์ตก็อาจให้ผลลัพธ์ย้อนกลับได้ เมื่อใช้ loading="lazy"
กับรูปภาพในวิวพอร์ต รูปภาพนั้นจะล่าช้าจนกว่าเบราว์เซอร์จะรู้แน่ชัดว่ารูปภาพอยู่ในวิวพอร์ต ซึ่งอาจส่งผลต่อ LCP ของหน้าเว็บ
ไม่โหลดรูปภาพแบบ Lazy Loading ที่ปรากฏในวิวพอร์ตในระหว่างการเริ่มต้นใช้งาน ซึ่งเป็นรูปแบบที่จะส่งผลต่อ LCP ของเว็บไซต์ในเชิงลบ ซึ่งส่งผลต่อประสบการณ์ของผู้ใช้ หากต้องการใช้รูปภาพเมื่อเริ่มต้นใช้งาน ให้โหลดรูปภาพเมื่อเริ่มต้นใช้งานโดยเร็วที่สุดโดยไม่ต้องโหลดแบบ Lazy Loading!
ไลบรารีการโหลดแบบ Lazy Loading
คุณควรใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์ทุกครั้งที่ทำได้ แต่หากอยู่ในสถานการณ์ที่ทำไม่ได้ เช่น กลุ่มผู้ใช้จำนวนมากยังคงต้องใช้เบราว์เซอร์รุ่นเก่า ไลบรารีต่อไปนี้อาจใช้สำหรับโหลดรูปภาพแบบ Lazy Loading ได้
- lazysizes คือไลบรารีการโหลดแบบ Lazy Loading ที่มีฟีเจอร์สมบูรณ์ ซึ่งจะโหลดรูปภาพและ iframe แบบ Lazy Loading รูปแบบที่ใช้ค่อนข้างคล้ายกับตัวอย่างโค้ดที่แสดงที่นี่ตรงที่จะเชื่อมโยงกับคลาส
lazyload
ในเอลิเมนต์<img>
โดยอัตโนมัติ คุณจึงต้องระบุ URL รูปภาพในแอตทริบิวต์data-src
และ/หรือdata-srcset
ซึ่งจะสลับเป็นแอตทริบิวต์src
และ/หรือsrcset
ตามลำดับ โดยจะใช้ Intersection Observer (ซึ่งคุณทำ polyfill ได้) และขยายได้ด้วยปลั๊กอินจำนวนมากเพื่อทำสิ่งต่างๆ เช่น วิดีโอแบบ Lazy Loading ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Lazysizes - vanilla-lazyload เป็นตัวเลือกสำหรับการโหลดแบบ Lazy Loading, ภาพพื้นหลัง, วิดีโอ, iframe และสคริปต์ โดยใช้ประโยชน์จาก Intersection Observer, รองรับรูปภาพที่ตอบสนองตามอุปกรณ์ และเปิดใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์
- lozad.js เป็นอีกตัวเลือกหนึ่งที่ใช้ทรัพยากรน้อย ซึ่งใช้ Intersection Observer เท่านั้น ถึงแม้ว่าจะมีประสิทธิภาพการทำงานสูง แต่จะต้องใส่โพลียูรีฟิลลงไปก่อน จึงจะใช้ได้ในเบราว์เซอร์รุ่นเก่าได้
- หากต้องการใช้ไลบรารีการโหลดแบบ Lazy Loading ที่เจาะจงของ React ให้ลองใช้ react-lazyload แม้จะไม่ได้ใช้ Intersection Observer แต่ได้ให้วิธีการที่คุ้นเคยของการโหลดรูปภาพแบบ Lazy Loading สำหรับผู้ที่คุ้นเคยกับการพัฒนาแอปพลิเคชันด้วย React