แนวทางปฏิบัติแนะนำสำหรับการโหลดแบบ Lazy Loading

Jeremy Wagner

Rachel Andrew

แม้ว่ารูปภาพและวิดีโอที่ใช้การโหลดแบบ Lazy Loading จะมีประสิทธิภาพในเชิงบวกและวัดผลได้ คุณไม่ควรมองให้ถี่ถ้วน หากคุณตอบผิด ผลกระทบโดยไม่ตั้งใจ ดังนั้น คุณควรเตรียมสิ่งต่อไปนี้ ความกังวล

คำนึงถึงเส้นแบ่ง

คุณอาจจะอยากโหลดทรัพยากรสื่อทุกรายการในหน้าด้วย JavaScript แล้ว แต่คุณต้องอดทนไว้ สิ่งใดก็ตามที่วางอยู่เหนือ ไม่ควรโหลดแบบ Lazy Loading ทรัพยากรดังกล่าวถือว่าสำคัญ เนื้อหาจึงควรโหลดตามปกติ

การโหลดแบบ Lazy Loading จะหน่วงเวลาการโหลดทรัพยากรจนกว่า DOM จะมีการโต้ตอบ เมื่อสคริปต์โหลดเสร็จแล้วและเริ่มดำเนินการ สำหรับรูปภาพด้านล่าง แบบนี้ก็ใช้ได้ แต่ทรัพยากรที่สำคัญในครึ่งหน้าบนควรมี องค์ประกอบ <img> มาตรฐานเพื่อให้แสดงโดยเร็วที่สุด

แน่นอนว่าในปัจจุบันเห็นรอยพับที่ไม่ชัดเจนนักเมื่อเว็บไซต์ ดูจากหลากหลายหน้าจอขนาด สิ่งที่อยู่ในครึ่งหน้าบนบนแล็ปท็อป อาจวางอยู่ด้านล่างในอุปกรณ์เคลื่อนที่ ไม่มีคำแนะนำสำหรับ ในการจัดการปัญหานี้อย่างเหมาะสมในทุกสถานการณ์ คุณต้องดำเนินการ พื้นที่โฆษณาของเนื้อหาที่สำคัญในหน้าเว็บของคุณ และโหลดรูปภาพเหล่านั้นโดยทั่วไป แฟชั่น

นอกจากนี้ คุณอาจไม่ต้องความเข้มงวดเกี่ยวกับเส้นแบ่งครึ่ง เกณฑ์ในการเรียกการโหลดแบบ Lazy Loading ซึ่งอาจเหมาะกับวัตถุประสงค์ของคุณมากกว่า สร้างเขตกันชนให้ห่างจากเส้นแบ่งครึ่งหน้าล่างเพื่อให้รูปภาพเริ่มต้นขึ้น โหลดอย่างดีก่อนที่ผู้ใช้จะเลื่อนลงไปยังวิวพอร์ต ตัวอย่างเช่น พารามิเตอร์ Intersection Observer API ให้คุณระบุพร็อพเพอร์ตี้ rootMargin ใน ออบเจ็กต์ตัวเลือกเมื่อคุณสร้างอินสแตนซ์ IntersectionObserver ใหม่ ช่วงเวลานี้ จะให้บัฟเฟอร์องค์ประกอบอย่างมีประสิทธิภาพ ซึ่งจะทริกเกอร์พฤติกรรมการโหลดแบบ Lazy Loading ก่อนที่จะ องค์ประกอบอยู่ในวิวพอร์ต

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  // lazy-loading image code goes here
}, {
  rootMargin: "0px 0px 256px 0px"
});

หากค่าสำหรับ rootMargin ดูคล้ายกับค่าที่คุณระบุสำหรับ CSS ก็เพราะว่าพร็อพเพอร์ตี้ margin นี่แหละ! ในกรณีนี้ ค่า ระยะขอบล่างขององค์ประกอบที่พบ (วิวพอร์ตของเบราว์เซอร์โดยค่าเริ่มต้น แต่ ค่านี้สามารถเปลี่ยนเป็นองค์ประกอบที่เฉพาะเจาะจงโดยใช้พร็อพเพอร์ตี้ root) จะกว้างขึ้น 256 พิกเซล ซึ่งหมายความว่าฟังก์ชัน Callback จะทำงานเมื่อองค์ประกอบรูปภาพ ในระยะ 256 พิกเซลของวิวพอร์ตและภาพจะเริ่มโหลด ก่อนที่ผู้ใช้จะเห็นจริง

หากต้องการให้เบราว์เซอร์ไม่รองรับ Intersection Observe ให้ใช้โค้ดการจัดการเหตุการณ์การเลื่อนและปรับ getBoundingClientRect เลือกเพื่อใส่บัฟเฟอร์

การเปลี่ยนเลย์เอาต์และตัวยึดตำแหน่ง

สื่อการโหลดแบบ Lazy Loading อาจทำให้เกิดการเปลี่ยนแปลงในเลย์เอาต์ได้หากไม่ได้ใช้ตัวยึดตำแหน่ง การเปลี่ยนแปลงเหล่านี้อาจทำให้ผู้ใช้สับสนและทริกเกอร์เลย์เอาต์ DOM ที่มีราคาแพง การดำเนินการที่ใช้ทรัพยากรระบบและนำไปสู่การกระตุก อย่างน้อยที่สุด ลองใช้ตัวยึดตำแหน่งสีทึบที่มีขนาดเดียวกับ รูปภาพเป้าหมาย หรือเทคนิคต่างๆ เช่น LQIP หรือ SQIP ที่บอกใบ้เนื้อหาของสื่อ ก่อนที่จะโหลด

สำหรับแท็ก <img> ในตอนแรก src ควรชี้ไปที่ตัวยึดตำแหน่งจนกว่าจะ อัปเดตแอตทริบิวต์เป็น URL ของภาพสุดท้ายแล้ว ใช้แอตทริบิวต์ poster ใน เอลิเมนต์ <video> จะชี้ไปยังรูปภาพตัวยึดตำแหน่ง นอกจากนี้ โปรดใช้ width และ height ทั้งในแท็ก <img> และ <video> ซึ่งช่วยให้มั่นใจว่า การเปลี่ยนจากตัวยึดตำแหน่งเป็นรูปภาพสุดท้ายจะไม่เปลี่ยนขนาดที่แสดงผล ขององค์ประกอบเมื่อโหลดสื่อ

ความล่าช้าในการถอดรหัสรูปภาพ

การโหลดรูปภาพขนาดใหญ่ใน JavaScript และวางลงใน DOM จะช่วยเชื่อมโยง เทรดหลัก ทำให้อินเทอร์เฟซผู้ใช้ไม่ตอบสนองเป็นระยะเวลาสั้นๆ ระหว่างการถอดรหัส การถอดรหัสรูปภาพแบบอะซิงโครนัสโดยใช้ decode วิธีการ ก่อนที่จะแทรกลงใน DOM จะช่วยลดความยุ่งยากแบบนี้ได้ แต่ คำเตือน: ฟีเจอร์นี้ยังไม่พร้อมให้บริการในบางพื้นที่ ซึ่งจะเพิ่มความซับซ้อนให้กับตรรกะการโหลดแบบ Lazy Loading หากต้องการใช้งาน คุณจะต้องตรวจสอบก่อน รายการด้านล่าง วิธีใช้ Image.decode() ร่วมกับวิดีโอสำรอง

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) {
  // Fancy decoding logic
  newImage.decode().then(function() {
    imageContainer.appendChild(newImage);
  });
} else {
  // Regular image load
  imageContainer.appendChild(newImage);
}

ไปที่ลิงก์ CodePen นี้เพื่อดู ที่คล้ายคลึงกับตัวอย่างนี้ หากรูปภาพส่วนใหญ่มีขนาดเล็ก ซึ่งอาจไม่ได้ผลสำหรับคุณ แต่จะช่วยลดความยุ่งยากได้ การโหลดรูปภาพขนาดใหญ่แบบ Lazy Loading แล้วแทรกลงใน DOM

เมื่อเนื้อหาไม่โหลด

บางครั้งทรัพยากรสื่อไม่สามารถโหลดด้วยเหตุผลหนึ่งหรืออีกสาเหตุหนึ่งและข้อผิดพลาด เกิดขึ้น กรณีนี้อาจเกิดขึ้นเมื่อใด แล้วแต่กรณี สมมติมีสถานการณ์สมมติ สำหรับคุณ: คุณมีนโยบายการแคช HTML ในช่วงระยะเวลาสั้นๆ (เช่น นาที) และผู้ใช้เข้าชมเว็บไซต์หรือผู้ใช้เปิดแท็บที่ไม่มีอัปเดตทิ้งไว้ เป็นระยะเวลานาน (เช่น หลายชั่วโมง) และกลับมาอ่านเนื้อหาอีกครั้ง เมื่อถึงขั้นตอนหนึ่งของกระบวนการนี้ ก็เกิดการทำให้ใช้งานได้อีกครั้ง ในระหว่างการทำให้ใช้งานได้นี้ ชื่อทรัพยากรรูปภาพเปลี่ยนไปเนื่องจากการกำหนดเวอร์ชันตามแฮช หรือถูกนำออก ทั้งหมด เมื่อผู้ใช้โหลดรูปภาพแบบ Lazy Loading ทรัพยากรจะเป็น ไม่พร้อมใช้งาน ซึ่งจะทำให้ล้มเหลว

แม้ว่ากรณีเหล่านี้จะเกิดขึ้นไม่บ่อยนัก แต่คุณอาจต้องมีข้อมูลสำรอง หากการโหลดแบบ Lazy Loading ไม่สำเร็จ สำหรับรูปภาพ โซลูชันดังกล่าวอาจมีลักษณะดังนี้ ดังนี้

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

newImage.onerror = function(){
  // Decide what to do on error
};
newImage.onload = function(){
  // Load the image
};

สิ่งที่คุณตัดสินใจทำในกรณีที่เกิดข้อผิดพลาดจะขึ้นอยู่กับการสมัครของคุณ สำหรับ เช่น คุณอาจแทนที่พื้นที่ตัวยึดตำแหน่งด้วยปุ่มที่ช่วยให้ ให้ผู้ใช้พยายามโหลดรูปภาพอีกครั้ง หรือเพียงแค่แสดงข้อความแสดงข้อผิดพลาด ในพื้นที่ตัวยึดตำแหน่งรูปภาพ

สถานการณ์อื่นๆ ก็อาจเกิดขึ้นได้ ไม่ว่าคุณจะทำอะไร คุณห้ามพลาด แก่ผู้ใช้เมื่อเกิดข้อผิดพลาดขึ้น และอาจดำเนินการบางอย่าง ที่จะจัดการกับข้อผิดพลาด

ความพร้อมใช้งานของ JavaScript

ไม่ควรสรุปว่า JavaScript พร้อมใช้งานตลอดเวลา หากคุณจะ รูปภาพที่โหลดแบบ Lazy Loading ลองใช้มาร์กอัป <noscript> ที่จะแสดงรูปภาพใน Case JavaScript ไม่พร้อมใช้งาน ตัวอย่างวิดีโอสำรองที่ง่ายที่สุดเท่าที่จะเป็นไปได้คือ ใช้องค์ประกอบ <noscript> เพื่อแสดงรูปภาพหากปิด JavaScript ไว้:

หากปิด JavaScript ผู้ใช้จะเห็นทั้งรูปภาพตัวยึดตำแหน่งและ รูปภาพที่มีองค์ประกอบ <noscript> เพื่อไปยังส่วนต่างๆ ของสถานที่นี้ คลาสของ no-js ในแท็ก <html> ดังนี้

<html class="no-js">

จากนั้นวางสคริปต์ในหน้า 1 บรรทัดใน <head> ก่อนสไตล์ชีต มีการขอผ่านแท็ก <link> ซึ่งนำคลาส no-js ออกจาก <html> หาก JavaScript เปิดอยู่:

<script>document.documentElement.classList.remove("no-js");</script>

สุดท้าย ให้ใช้ CSS เพื่อซ่อนองค์ประกอบที่มีคลาส Lazy JavaScript ใช้งานไม่ได้:

.no-js .lazy {
  display: none;
}

แต่ไม่ได้ป้องกันไม่ให้รูปภาพตัวยึดตำแหน่งโหลด แต่ผลลัพธ์จะมากกว่า เป็นที่ต้องการ ผู้ใช้ที่ปิด JavaScript จะได้รับสิ่งที่ไม่ใช่ตัวยึดตำแหน่ง รูปภาพ ซึ่งดีกว่าตัวยึดตำแหน่งและไม่มีเนื้อหารูปภาพที่มีความหมาย ทั้งหมด