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

Addy Osmani

Barry Pollard

การโหลดแบบ Lazy Loading ขององค์ประกอบ <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 สำหรับแต่ละเฟรม แม้ว่าจะไม่ได้เลื่อนไปที่เฟรมนั้นก็ตาม

วันที่

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

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

วันที่

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

การโหลดแบบ Lazy Loading ของ iframe ข้ามเบราว์เซอร์

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

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

นอกจากนี้ คุณยังโหลด iframe นอกหน้าจอแบบ Lazy Loading ได้โดยใช้ lazysizes ไลบรารี JavaScript:

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

ใช้รูปแบบต่อไปนี้เพื่อตรวจหาการโหลดแบบ Lazy Loading และดึงข้อมูลแบบ Lazysize เมื่อไม่พร้อมใช้งาน

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

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

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

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

แหล่งข้อมูล

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

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