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

Jeremy Wagner

Rachel Andrew

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

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

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

วันที่

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

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

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

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

วันที่

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

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

ทำไมต้องโหลดรูปภาพหรือวิดีโอแบบ Lazy Loading แทนที่จะโหลดอย่างเดียว

เนื่องจากเป็นไปได้ว่าคุณกำลังโหลดสิ่งที่ผู้ใช้อาจไม่เคยเห็น นี่คือ เกิดปัญหาเนื่องจากสาเหตุ 2-3 ประการ

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

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

การใช้การโหลดแบบ Lazy Loading

การใช้การโหลดแบบ Lazy Loading นั้นทำได้หลายวิธี โซลูชันที่คุณเลือกต้องคำนึงเบราว์เซอร์ที่คุณรองรับ รวมถึงสิ่งที่คุณพยายามโหลดแบบ Lazy Loading ด้วย

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

• รูปภาพการโหลดแบบ Lazy Loading
• วิดีโอการโหลดแบบ Lazy Loading

นอกจากนี้ เรายังได้รวบรวมรายการปัญหาที่อาจเกิดขึ้นกับการโหลดแบบ Lazy Loading และสิ่งที่ต้องระวังในการใช้งาน

บทสรุป

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

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