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

Addy Osmani
Addy Osmani
X GitHub

การสนับสนุนเบราว์เซอร์

  • 77
  • 79
  • 121
  • 16.4

การโหลดแบบ 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 ที่มีราคาแพงสำหรับแต่ละเฟรม แม้ว่าผู้ใช้จะไม่ได้เลื่อนไปที่เนื้อหานั้น

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

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

iframe นอกหน้าจอการโหลดแบบ Lazy Loading ยังช่วยปรับปรุง Largest 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 ลดเวลาในการโต้ตอบลงได้ 10 วินาทีเนื่องจากการโหลด iframe นอกหน้าจอแบบ Lazy Loading สำหรับการฝังวิดีโอ YouTube
Chrome.com ลด TTI ลง 10 วินาทีด้วยการโหลดแบบ Lazy Loading จากการฝังวิดีโอ YouTube นอกหน้าจอ

Instagram

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

Spotify

การโหลดแบบ Lazy Loading ของ Spotify สามารถลดขนาดการโหลดเริ่มต้นลงได้ 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 ซึ่งเป็น 197 KB เป็น JavaScript ปลั๊กอินมักจะปรากฏขึ้นที่ท้ายบทความหรือบริเวณท้ายหน้า ดังนั้นการโหลดอย่างตั้งใจเมื่ออยู่นอกหน้าจออาจทำให้ประสิทธิภาพไม่ดีได้

ปุ่มชอบของ Facebook
ปลั๊กอิน "ถูกใจ" ของ Facebook

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

การโหลดแบบ Lazy Loading ใน iframe แบบหลายเบราว์เซอร์

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

นอกจากนี้ คุณยังโหลด iframe นอกหน้าจอแบบ Lazy Loading ได้โดยใช้ไลบรารี JavaScript Lazysize คุณอาจต้องการทำเช่นนี้ในกรณีต่อไปนี้

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

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

แหล่งข้อมูล

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

ขอขอบคุณรีวิวจาก Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley และ Stoyan Stefanov สำหรับรีวิว