ส่วนของรูปภาพและวิดีโอในเพย์โหลดปกติของเว็บไซต์อาจมีนัยสำคัญ ผู้มีส่วนเกี่ยวข้องในโครงการอาจไม่ต้องการตัดทรัพยากรด้านสื่อออกจากแอปพลิเคชันที่มีอยู่ อุปสรรคดังกล่าวเป็นสิ่งที่น่าหงุดหงิด โดยเฉพาะเมื่อทุกฝ่ายที่เกี่ยวข้องต้องการปรับปรุงประสิทธิภาพของเว็บไซต์ แต่ไม่สามารถตกลงได้ว่าจะต้องทำอย่างไร โชคดีที่การโหลดแบบ Lazy Loading เป็นโซลูชันที่ช่วยลดเพย์โหลดของหน้าเริ่มต้นและ เวลาที่ใช้ในการโหลด แต่ไม่ได้ทำให้เนื้อหาขาดหาย
การโหลดแบบ Lazy Loading คืออะไร
การโหลดแบบ Lazy Loading เป็นเทคนิคที่เลื่อนการโหลดทรัพยากรที่ไม่สำคัญในขณะที่โหลดหน้าเว็บ แต่ทรัพยากรที่ไม่สำคัญเหล่านี้จะโหลดในเวลาที่ต้องการ หากกังวลว่ารูปภาพ "ไม่สำคัญ" มักจะมีความหมายเหมือนกันกับ "นอกหน้าจอ" หากคุณใช้ Lighthouse และตรวจสอบโอกาสในการปรับปรุง คุณอาจเห็นคำแนะนำในขอบเขตนี้ในรูปแบบการตรวจสอบรูปภาพนอกหน้าจอ
คุณอาจเคยเห็นการโหลดแบบ Lazy Loading แล้ว ซึ่งจะมีลักษณะดังนี้
- คุณมาที่หน้าเว็บ และเริ่มเลื่อนขณะอ่านเนื้อหา
- ในบางกรณี คุณจะเลื่อนรูปภาพตัวยึดตำแหน่งลงในวิวพอร์ต
- จู่ๆ รูปภาพตัวยึดตำแหน่งก็ถูกแทนที่ด้วยรูปภาพสุดท้าย
ตัวอย่างของการโหลดแบบ Lazy Loading จะแสดงได้ในแพลตฟอร์มการเผยแพร่ยอดนิยมอย่าง Medium ซึ่งโหลดรูปภาพตัวยึดตำแหน่งขนาดเล็กเมื่อโหลดหน้าเว็บ และแทนที่ด้วยรูปภาพที่โหลดแบบ Lazy Loading ขณะเลื่อนเข้าสู่วิวพอร์ต
หากคุณไม่คุ้นเคยกับการโหลดแบบ Lazy Loading คุณอาจสงสัยว่าเทคนิคนี้มีประโยชน์เพียงใดและมีประโยชน์อย่างไร อ่านต่อเพื่อดูเลย!
ทำไมจึงต้องโหลดรูปภาพหรือวิดีโอแบบ Lazy Loading แทนที่จะโหลดเพียงอย่างเดียว
เพราะเป็นไปได้ว่าคุณอาจกำลังโหลดเนื้อหาที่ผู้ใช้อาจไม่เคยเห็น ปัญหานี้เกิดปัญหาเนื่องจากสาเหตุ 2-3 ประการ ได้แก่
- ทำให้ข้อมูลสูญเปล่า สำหรับการเชื่อมต่อแบบไม่ได้จำกัดปริมาณอินเทอร์เน็ต นี่จะไม่ใช่เรื่องที่เลวร้ายที่สุดที่อาจเกิดขึ้น (แม้ว่าคุณจะสามารถใช้แบนด์วิดท์ที่มีค่านั้นในการดาวน์โหลดทรัพยากรอื่นๆ ที่ผู้ใช้มองเห็นได้จริงๆ) อย่างไรก็ตาม หากมีแพ็กเกจอินเทอร์เน็ตที่จำกัด การโหลดข้อมูลที่ผู้ใช้ไม่เคยเห็นมาก่อนอาจเป็นการเสียเงินให้เปล่า
- สิ้นเปลืองเวลาในการประมวลผล แบตเตอรี่ และทรัพยากรอื่นๆ ของระบบ หลังจากดาวน์โหลดทรัพยากรสื่อแล้ว เบราว์เซอร์ต้องถอดรหัสและแสดงเนื้อหาของตนในวิวพอร์ต
รูปภาพและวิดีโอการโหลดแบบ Lazy Loading จะลดเวลาในการโหลดหน้าเว็บเริ่มต้น น้ำหนักของหน้าเริ่มต้น และการใช้ทรัพยากรระบบ ซึ่งทั้งหมดนี้มีผลดีต่อประสิทธิภาพ
การใช้การโหลดแบบ Lazy Loading
การใช้การโหลดแบบ Lazy Loading นั้นทำได้หลายวิธี โซลูชันที่คุณเลือกต้องคำนึงถึงเบราว์เซอร์ที่คุณรองรับ รวมถึงสิ่งที่คุณพยายามโหลดแบบ Lazy Loading ด้วย
เบราว์เซอร์ที่ทันสมัยใช้การโหลดแบบ Lazy Loading ระดับเบราว์เซอร์
ซึ่งเปิดใช้ได้โดยใช้แอตทริบิวต์ loading
ในรูปภาพและ iframe
คุณสามารถใช้โซลูชันกับ JavaScript ของคุณเอง เพื่อให้ใช้งานร่วมกับเบราว์เซอร์รุ่นเก่าหรือการโหลดแบบ Lazy Loading ในองค์ประกอบต่างๆ โดยไม่มีการโหลดแบบ Lazy Loading ในตัวได้
นอกจากนี้ ยังมีไลบรารีที่มีอยู่แล้วมากมายที่จะช่วยคุณในการทำเช่นนี้
ดูรายละเอียดทั้งหมดของวิธีการทั้งหมดได้จากโพสต์ในเว็บไซต์นี้
นอกจากนี้ เรายังได้รวบรวมรายการปัญหาที่อาจเกิดขึ้นกับการโหลดแบบ Lazy Loading และสิ่งที่ควรระวังในการติดตั้งใช้งาน
บทสรุป
รูปภาพและวิดีโอที่โหลดแบบ Lazy Loading ด้วยความระมัดระวังจะลดเวลาที่ใช้ในการโหลดเริ่มต้นและเพย์โหลดหน้าเว็บในเว็บไซต์ได้เป็นอย่างมาก ซึ่งรวมถึง Core Web Vitals ผู้ใช้จะไม่เกิดกิจกรรมเครือข่ายที่ไม่จำเป็น ซึ่งรวมถึงการช่วงชิงเครือข่ายเมื่อใช้การเชื่อมต่อที่ช้า และค่าใช้จ่ายในการประมวลผลทรัพยากรสื่อที่อาจไม่เคยพบ แต่ผู้ใช้ยังคงดูทรัพยากรเหล่านั้นได้หากต้องการ
สำหรับเทคนิคการปรับปรุงประสิทธิภาพ การโหลดแบบ Lazy Loading ก็ไม่เป็นที่ถกเถียงกันมากนัก หากคุณมีภาพในบรรทัดจำนวนมากในเว็บไซต์ นี่จะเป็นวิธีที่ดีเยี่ยมในการลดการดาวน์โหลดที่ไม่จำเป็น ผู้ใช้เว็บไซต์และผู้มีส่วนเกี่ยวข้อง โครงการจะต้องชอบแน่ๆ