ใช้การโหลดแบบ Lazy Loading เพื่อปรับปรุงความเร็วในการโหลด

Jeremy Wagner
Rachel Andrew

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

การโหลดแบบ Lazy Loading คืออะไร

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

ภาพหน้าจอของการตรวจสอบรูปภาพนอกหน้าจอของ Defer ใน Lighthouse
การตรวจสอบประสิทธิภาพอย่างหนึ่งของ Lighthouse คือการระบุรูปภาพนอกหน้าจอ ซึ่งเหมาะสำหรับการโหลดแบบ Lazy Loading

คุณอาจเคยเห็นการโหลดแบบ Lazy Loading แล้ว ซึ่งจะมีลักษณะดังนี้

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

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

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