โหลดรูปภาพแบบ Lazy Loading และองค์ประกอบ <iframe>

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

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

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

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

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

โหลดรูปภาพแบบ Lazy Loading โดยใช้แอตทริบิวต์ loading

คุณเพิ่มแอตทริบิวต์ loading ลงในองค์ประกอบ <img> เพื่อบอกเบราว์เซอร์ว่าจะโหลดองค์ประกอบอย่างไรได้ ดังนี้

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

นอกจากนี้ โปรดทราบว่าหากคุณใช้องค์ประกอบ <picture> แอตทริบิวต์ loading ควรยังคงมีผลกับองค์ประกอบย่อย <img> ไม่ใช่องค์ประกอบ <picture> เอง เนื่องจากองค์ประกอบ <picture> คือคอนเทนเนอร์ที่มีองค์ประกอบ <source> เพิ่มเติมซึ่งชี้ไปยังรูปภาพต่างๆ ที่เป็นไปได้ และรูปภาพที่เป็นไปได้ซึ่งเบราว์เซอร์เลือกจะนำไปใช้กับองค์ประกอบ <img> ย่อยโดยตรง

อย่าใช้การโหลดแบบ Lazy Loading กับรูปภาพที่อยู่ในวิวพอร์ตเริ่มต้น

คุณควรเพิ่มแอตทริบิวต์ loading="lazy" ลงในองค์ประกอบ <img> ที่อยู่ในตําแหน่งนอกวิวพอร์ตเริ่มต้นเท่านั้น อย่างไรก็ตาม การทราบตําแหน่งองค์ประกอบที่แน่นอนภายในวิวพอร์ตก่อนหน้าเว็บจะแสดงผลอาจเป็นเรื่องซับซ้อน คุณต้องคำนึงถึงขนาดวิวพอร์ต สัดส่วนภาพ และอุปกรณ์ที่แตกต่างกัน

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

อย่างไรก็ตาม ก็มีบางกรณีที่ค่อนข้างชัดเจนว่าควรหลีกเลี่ยงการใช้ loading="lazy" ตัวอย่างเช่น คุณควรละเว้นแอตทริบิวต์ loading="lazy" ออกจากองค์ประกอบ <img> ในกรณีของรูปภาพหลัก หรือกรณีการใช้งานรูปภาพอื่นๆ ที่องค์ประกอบ <img> มีแนวโน้มที่จะปรากฏเหนือการแบ่งหน้า หรือใกล้กับด้านบนของเลย์เอาต์ในอุปกรณ์ทุกประเภท ซึ่งสำคัญยิ่งกว่าสำหรับรูปภาพที่มีแนวโน้มว่าจะเป็นของผู้สมัคร LCP

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

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

การสาธิตการโหลดรูปภาพแบบ Lazy Loading

โหลดองค์ประกอบ <iframe> แบบ Lazy Loading

การโหลดองค์ประกอบ <iframe> แบบ Lazy Loading จนกว่าองค์ประกอบจะปรากฏในวิวพอร์ตจะช่วยประหยัดข้อมูลได้อย่างมากและปรับปรุงการโหลดทรัพยากรสําคัญที่จําเป็นสําหรับการโหลดหน้าระดับบนสุด นอกจากนี้ เนื่องจากองค์ประกอบ <iframe> นั้นเป็นเอกสาร HTML ทั้งหมดที่โหลดภายในเอกสารระดับบนสุด จึงอาจมีทรัพยากรย่อยจํานวนมาก โดยเฉพาะ JavaScript ซึ่งอาจส่งผลต่อ INP ของหน้าเว็บได้อย่างมากหากงานภายในเฟรมเหล่านั้นต้องใช้เวลาประมวลผลนาน

การฝังของบุคคลที่สามเป็น Use Case ที่พบบ่อยสำหรับองค์ประกอบ <iframe> เช่น โปรแกรมเล่นวิดีโอที่ฝังหรือโพสต์โซเชียลมีเดียมักใช้องค์ประกอบ <iframe> และมักต้องใช้ทรัพยากรย่อยจํานวนมาก ซึ่งอาจส่งผลให้เกิดการแข่งขันกันใช้แบนด์วิดท์สําหรับทรัพยากรของหน้าระดับบนสุดด้วย ตัวอย่างเช่น การโหลดแบบเลื่อนเวลาในการโหลดการฝังวิดีโอ YouTube จะประหยัดพื้นที่ได้มากกว่า 500 KiB ในระหว่างการโหลดหน้าเว็บครั้งแรก ส่วนการโหลดแบบเลื่อนเวลาในการโหลดปลั๊กอินปุ่มชอบของ Facebook จะประหยัดพื้นที่ได้มากกว่า 200 KiB ซึ่งส่วนใหญ่เป็น JavaScript

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

แอตทริบิวต์ loading สำหรับองค์ประกอบ <iframe>

เบราว์เซอร์หลักทั้งหมดยังรองรับแอตทริบิวต์ loading ในองค์ประกอบ <iframe> ด้วย ค่าสำหรับแอตทริบิวต์ loading และลักษณะการทํางานจะเหมือนกับองค์ประกอบ <img> ที่ใช้แอตทริบิวต์ loading

• "eager" คือค่าเริ่มต้น ซึ่งจะแจ้งให้เบราว์เซอร์โหลด HTML ขององค์ประกอบ <iframe> และทรัพยากรย่อยขององค์ประกอบนั้นทันที
• "lazy" เลื่อนการโหลด HTML ขององค์ประกอบ <iframe> และทรัพยากรย่อยขององค์ประกอบนั้นไว้จนกว่าจะอยู่ในระยะที่กำหนดไว้ล่วงหน้าจากวิวพอร์ต

การสาธิตการโหลด iframe แบบ Lazy Loading

ส่วนหน้าอาคาร

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

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

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

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

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

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

แม้ว่าการสร้างหน้าเว็บของคุณเองจะเป็นไปได้ แต่ก็มีตัวเลือกโอเพนซอร์สสำหรับบุคคลที่สามที่ได้รับความนิยมมากกว่า เช่น lite-youtube-embed สำหรับวิดีโอ YouTube, lite-vimeo-embed สำหรับวิดีโอ Vimeo และ React Live Chat Loader สำหรับวิดเจ็ตแชท

ไลบรารีการโหลดแบบเลื่อนเวลาของ JavaScript

หากต้องการใช้การโหลดแบบเลื่อนเวลาสำหรับองค์ประกอบ <video>, รูปภาพ poster ขององค์ประกอบ <video>, รูปภาพที่โหลดโดยพร็อพเพอร์ตี้ CSS background-image หรือองค์ประกอบอื่นๆ ที่ไม่รองรับ คุณสามารถใช้โซลูชันการโหลดแบบเลื่อนเวลาที่ใช้ JavaScript เช่น lazysizes หรือ yall.js เนื่องจากการโหลดแบบเลื่อนเวลาสำหรับทรัพยากรประเภทเหล่านี้ไม่ใช่ฟีเจอร์ระดับเบราว์เซอร์

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

ไลบรารีส่วนใหญ่เหล่านี้ทํางานโดยใช้ Intersection Observer API และ Mutation Observer API เพิ่มเติมหาก HTML ของหน้าเว็บมีการเปลี่ยนแปลงหลังจากการโหลดครั้งแรก เพื่อจดจําเมื่อองค์ประกอบเข้าสู่วิดเจ็ตแสดงผลของผู้ใช้ หากมองเห็นรูปภาพหรือรูปภาพใกล้จะปรากฏในวิวพอร์ตแล้ว ไลบรารี JavaScript จะแทนที่แอตทริบิวต์ที่ไม่ใช่มาตรฐาน (มักเป็น data-src หรือแอตทริบิวต์ที่คล้ายกัน) ด้วยแอตทริบิวต์ที่ถูกต้อง เช่น src

สมมติว่าคุณมีวิดีโอที่จะแทนที่ GIF แบบเคลื่อนไหว แต่ต้องการใช้การโหลดแบบเลื่อนเวลาในการโหลดวิดีโอด้วยโซลูชัน JavaScript ซึ่งทำได้ด้วย yall.js ที่มีรูปแบบมาร์กอัปต่อไปนี้

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

โดยค่าเริ่มต้น yall.js จะสังเกตองค์ประกอบ HTML ทั้งหมดที่มีสิทธิ์ซึ่งมีคลาสเป็น "lazy" เมื่อโหลดและเรียกใช้ yall.js ในหน้าเว็บแล้ว วิดีโอจะไม่โหลดจนกว่าผู้ใช้จะเลื่อนวิดีโอไปยังวิวพอร์ต เมื่อถึงจุดนั้น ระบบจะแทนที่แอตทริบิวต์ data-src ในองค์ประกอบ <source> ย่อยขององค์ประกอบ <video> เป็นแอตทริบิวต์ src ซึ่งจะส่งคำขอดาวน์โหลดวิดีโอและเริ่มเล่นโดยอัตโนมัติ

ทดสอบความรู้ของคุณ

หัวข้อถัดไป: การดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า

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