การโหลดวิดีโอและเสียงแบบเนทีฟใหม่ของ Google Chrome อาจทำให้เว็บเร็วขึ้น

/th/images/Google-Chrome-lazy-loading-for-videos-and-audio.jpg

Google Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่นๆ รวมถึง Edge และ Vivaldi จะได้รับการสนับสนุนแบบเนทิฟสำหรับการโหลดวิดีโอและเสียงแบบ Lazy Loading เร็วๆ นี้ การเปลี่ยนแปลงนี้เสนอโดย Helmut Januschka นักพัฒนาอิสระซึ่งเป็นที่รู้จักจากผลงานในอดีตของเขาที่มีต่อ Chromium

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

/th/images/Chromium-automatic-lazy-loading.jpg

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

หากไม่มีการโหลดแบบ Lazy Loading Chrome อาจโหลดสื่อเร็วขึ้นมาก ซึ่งหมายความว่าเว็บไซต์จะช้าลงมาก เนื่องจากเบราว์เซอร์จำเป็นต้องดาวน์โหลดทุกอย่างบนหน้าเว็บก่อน เมื่อใช้ Loading=”lazy” Chrome จะไม่โหลดหรือดาวน์โหลดวิดีโอจนกว่าคุณจะไปถึงบริเวณที่ฝังวิดีโอไว้ หากคุณไม่เลื่อนไปไกลขนาดนั้น สื่อก็อาจไม่สามารถโหลดได้

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

“หากไม่มีการสนับสนุนแบบเนทีฟ นักพัฒนาจะต้องใช้โซลูชัน JavaScript แบบกำหนดเองโดยใช้ Intersection Observer เพื่อตรวจจับเมื่อองค์ประกอบสื่อเข้าสู่วิวพอร์ต จากนั้นตั้งค่าแอตทริบิวต์ src แบบไดนามิก” นักพัฒนา Helmut Januschka เขียนในโพสต์เกี่ยวกับสถานะ Chrome “แนวทางนี้เกิดข้อผิดพลาดได้ง่าย เพิ่มความซับซ้อน และไม่สามารถทำงานร่วมกับเครื่องสแกนพรีโหลดของเบราว์เซอร์ได้”

ตามที่ Windows Insight พบครั้งแรก โซลูชันของ Helmut Januschka คือการเพิ่มการโหลดวิดีโอและเสียงแบบเนทีฟเต็มรูปแบบลงใน Chromium ซึ่งคล้ายกับที่รวมเข้ากับรูปภาพและ iframe แล้ว

เมื่อฟีเจอร์นี้เปิดตัวใน Chrome เสถียร นักพัฒนาสามารถเริ่มใช้แอตทริบิวต์ HTML แทน: Loading=”lazy” โดยตรงบนหรือ

ซึ่งหมายความว่าวิดีโอและเสียงจะโหลดแบบ Lazy Load แทนที่จะต้องอาศัย JavaScript ซึ่งอาจเป็นจุดคอขวดหรือเล่นได้ไม่ดีกับเครื่องสแกนพรีโหลดของ Chrome

“การโหลดแบบเนทีฟช่วยให้เบราว์เซอร์เพิ่มประสิทธิภาพการโหลดทรัพยากรด้วยเกณฑ์การรับรู้เครือข่าย จัดการการโต้ตอบกับแอตทริบิวต์การเล่นอัตโนมัติและการโหลดล่วงหน้าอย่างเหมาะสม และหลีกเลี่ยงการบล็อก window.onload สำหรับสื่อนอกหน้าจอ” Januschka กล่าว

“สิ่งนี้ตรงกับพฤติกรรมการโหลดเมื่อจำเป็นที่มีอยู่สำหรับ ![] และ