ถึงเวลาโหลด iframe นอกหน้าจอแบบ Lazy Loading แล้ว

Addy Osmani

Barry Pollard

การรองรับเบราว์เซอร์

• 77
• 79
• 121
• 16.4

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

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

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

เดโมของ <iframe loading=lazy> นี้แสดงการฝังวิดีโอแบบ Lazy Loading

ทำไมต้องโหลด iframe แบบ Lazy Loading

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

การโหลด iframe ที่ไม่ได้อยู่ในหน้าจออย่างเร่งด่วนหมายความว่าผู้ใช้จะสิ้นเปลืองอินเทอร์เน็ตด้วยการเปิดใช้องค์ประกอบที่อาจไม่เคยเห็น

จากการวิจัยของ Chrome เกี่ยวกับ iframe นอกหน้าจอที่โหลดแบบ Lazy Loading โดยอัตโนมัติ สำหรับผู้ใช้โปรแกรมประหยัดอินเทอร์เน็ต iframe แบบ Lazy Loading อาจช่วยลดค่ามัธยฐานของข้อมูลได้ 2-3% หรือ 1-2% First Contentful Paint ลดลงตามค่ามัธยฐานและ 2% การปรับปรุง First Input Delay (FID) ที่เปอร์เซ็นไทล์ที่ 95

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

การโหลดแบบ Lazy Loading ในตัวสำหรับ iframe ทำงานอย่างไร

แอตทริบิวต์ loading ช่วยให้เบราว์เซอร์เลื่อน iframe นอกหน้าจอและ รูปภาพจนกว่าผู้ใช้จะเลื่อนเข้าไปใกล้ loading รองรับ 2 ค่าดังนี้

• lazy: เหมาะสำหรับการโหลดแบบ Lazy Loading
• eager: ไม่ใช่ตัวเลือกที่เหมาะสำหรับการโหลดแบบ Lazy Loading โหลดทันที

การใช้แอตทริบิวต์ loading ใน iframe จะทำงานดังนี้

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

การไม่ระบุแอตทริบิวต์จะมีผลเหมือนกับการโหลดทรัพยากรอย่างกระตือรือร้นอย่างชัดเจน

หากต้องการสร้าง iframe แบบแบบไดนามิกโดยใช้ JavaScript ให้ตั้งค่า iframe.loading = 'lazy' ในองค์ประกอบยัง รองรับ:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

การฝัง iframe ยอดนิยมแบบ Lazy Loading ส่งผลต่อประสบการณ์ของผู้ใช้อย่างไร

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

YouTube

การฝังวิดีโอ YouTube ที่โหลดแบบ Lazy Loading จะลดเวลาในการโหลดหน้าเว็บเริ่มต้นได้ประมาณ 500 KB

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Chrome.com ลด TTI ลง 10 วินาที การฝังวิดีโอ YouTube นอกหน้าจอที่โหลดแบบ Lazy Loading

หมายเหตุ: หากกำลังมองหาวิธีโหลดการฝัง YouTube ที่มีประสิทธิภาพมากขึ้น คุณอาจสนใจคอมโพเนนต์ YouTube Lite

Instagram

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

Spotify

การฝัง Spotify ที่โหลดแบบ Lazy Loading จะช่วยประหยัดการโหลดครั้งแรกได้ 514 KB

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

ปลั๊กอินสังคมของ Facebook

ปลั๊กอินโซเชียลของ Facebook ช่วยให้นักพัฒนาแอปฝังเนื้อหา Facebook ในหน้าเว็บได้ เครื่องมือที่ได้รับความนิยมสูงสุดคือปลั๊กอินการกดชอบ ซึ่งเป็นปุ่มที่แสดงจํานวนผู้ใช้ที่ "กดชอบ" หน้าเว็บ โดยค่าเริ่มต้น การฝังปลั๊กอินชอบในหน้าเว็บโดยใช้ Facebook JSSDK จะดึงข้อมูลทรัพยากรประมาณ 215 KB โดย JavaScript คิดเป็น 197 KB ปลั๊กอินมักปรากฏขึ้นในตอนท้ายของ บทความหรือใกล้กับส่วนท้ายของหน้า ดังนั้นให้โหลดอย่างใจจดใจจ่อเมื่อไม่อยู่ในหน้าจอ อาจมีประสิทธิภาพต่ำ

ปลั๊กอินกดชอบของ Facebook

ขอขอบคุณวิศวกร Stoyan Stefanov ที่ช่วยให้ตอนนี้ปลั๊กอินโซเชียลทั้งหมดของ Facebook รองรับการโหลด iframe แบบมาตรฐานแบบ Lazy Loading ตอนนี้นักพัฒนาซอฟต์แวร์ที่เลือกใช้การโหลดแบบเลื่อนดูผ่านการกำหนดค่า data-lazy ของปลั๊กอินสามารถป้องกันไม่ให้ปลั๊กอินเหล่านี้โหลดจนกว่าผู้ใช้จะเลื่อนดูบริเวณใกล้เคียงได้แล้ว ซึ่งทำให้การฝังทำงานได้อย่างต่อเนื่องสำหรับผู้ใช้ที่ต้องการ การบันทึกข้อมูลให้กับผู้ใช้ที่ไม่ได้เลื่อนลงไปจนสุดหน้า เราหวังว่าการฝังนี้จะเป็นรายการแรกในหลายๆ รายการที่จะสำรวจการโหลดแบบเลื่อนเวลาของ iframe มาตรฐานในเวอร์ชันที่ใช้งานจริง

เมื่อต้องการควบคุมการโหลดแบบ Lazy Loading ของ iframe ได้มากขึ้น

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

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

มีข้อยกเว้นสำหรับการโหลดแบบ Lazy Loading ของ iframe นอกหน้าจอไหม

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

แอตทริบิวต์ loading ไม่ใช้วิทยาการศึกษาสำนึกเหล่านี้ นักพัฒนาซอฟต์แวร์จึง เลือกสิ่งที่จะโหลดแบบ Lazy Loading ได้ แอตทริบิวต์ loading ควรได้รับการปฏิบัติตามเสมอ โดยขึ้นอยู่กับขีดจำกัดระยะทางและตัวเลือกอื่นๆ ของเบราว์เซอร์ (เช่น การพิมพ์)

แหล่งข้อมูล

สำหรับแนวคิดเพิ่มเติมสำหรับการโหลดแบบ Lazy Loading โปรดดู การเก็บรวบรวมรูปภาพและวิดีโอแบบ Lazy Loading

ขอขอบคุณ Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley และ Stoyan Stefanov ต้องการรีวิวของพวกเขา