Saatnya memuat lambat iframe di luar layar!

Addy Osmani

Pemuatan lambat elemen <iframe> menunda proses pemuatan iframe di luar layar hingga pengguna men-scroll di dekatnya. Tindakan ini akan menghemat data, mempercepat pemuatan bagian lain di halaman, dan mengurangi penggunaan memori.

Seperti pemuatan lambat untuk gambar, gunakan atribut loading untuk memberi tahu browser bahwa Anda ingin memuat iframe secara lambat.

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

Demo <iframe loading=lazy> ini menunjukkan penyematan video pemuatan lambat:

Mengapa menjalankan lambat pada iframe?

Penyematan pihak ketiga mencakup berbagai kasus penggunaan, mulai dari pemutar video, postingan media sosial, hingga iklan. Konten ini sering kali tidak langsung terlihat di area pandang pengguna, tetapi pengguna tetap harus membayar biaya download data dan JavaScript yang mahal untuk setiap frame, meskipun mereka tidak men-scroll ke sana.

Berdasarkan penelitian Chrome tentang frame di luar layar yang dimuat dengan lambat secara otomatis untuk pengguna Penghemat Data, iframe pemuatan lambat dapat menghasilkan penghematan data median sebesar 2-3%, pengurangan First Contentful Paint di median, dan peningkatan Penundaan Input Pertama (FID) sebesar 2% pada persentil ke-95.

iframe di luar layar dengan pemuatan lambat juga dapat meningkatkan Largest Contentful Paint (LCP) halaman Anda. Karena iframe sering memerlukan jumlah bandwidth yang signifikan untuk memuat semua subresource-nya, iframe di luar layar yang dimuat secara lambat dapat mengurangi pertentangan bandwidth di perangkat yang memiliki jaringan yang terbatas, sehingga memberikan lebih banyak bandwidth untuk memuat resource yang berkontribusi pada LCP halaman.

Bagaimana cara kerja pemuatan lambat bawaan untuk iframe?

Atribut loading memungkinkan browser menunda pemuatan iframe dan gambar di luar layar hingga pengguna men-scroll di dekatnya. loading mendukung dua nilai:

• lazy: kandidat yang baik untuk pemuatan lambat.
• eager: bukan kandidat yang baik untuk pemuatan lambat. Langsung dimuat.

Penggunaan atribut loading di iframe berfungsi sebagai berikut:

<!-- 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>

Tidak menentukan atribut memiliki dampak yang sama seperti memuat resource secara eksplisit.

Jika Anda perlu membuat iframe secara dinamis menggunakan JavaScript, penetapan iframe.loading = 'lazy' pada elemen juga didukung:

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

Bagaimana sematan iframe populer dengan pemuatan lambat memengaruhi pengalaman pengguna?

Menjadikan iframe pemuatan lambat sebagai default akan membuat situs jauh lebih responsif. Contoh berikut menunjukkan peningkatan Time to Interactive (TTI) dan penghematan data untuk sematan media, tetapi iframe iklan dengan pemuatan lambat dapat memberikan manfaat yang serupa.

YouTube

Penyematan video YouTube dengan pemuatan lambat akan menghemat sekitar 500 KB pada pemuatan halaman awal:

<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

Penyematan Instagram menyediakan blok markup dan skrip yang memasukkan iframe ke dalam halaman Anda. Pemuatan lambat iframe ini menghindari keharusan memuat semua skrip yang diperlukan sematan, dan dapat menghemat sekitar 100 kB pada pemuatan awal. Karena sematan ini sering ditampilkan di bawah area tampilan di sebagian besar artikel, ini merupakan kandidat yang wajar untuk pemuatan lambat iframe.

Spotify

Penyematan Spotify dengan pemuatan lambat dapat menghemat 514 KB pada pemuatan awal.

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

Plugin sosial Facebook

Plugin sosial Facebook memungkinkan developer menyematkan konten Facebook di halaman web mereka. Yang paling populer adalah plugin Like, tombol yang menunjukkan jumlah pengguna yang telah "menyukai" halaman tersebut. Secara default, menyematkan plugin Suka di halaman web menggunakan Facebook JSSDK akan menarik sekitar 215 KB resource, 197 KB di antaranya adalah JavaScript. Plugin ini sering muncul di akhir artikel atau di dekat akhir halaman, sehingga memuatnya segera saat berada di luar layar dapat menjadi kurang optimal.

Berkat engineer Stoyan Stefanov, semua plugin sosial Facebook kini mendukung pemuatan lambat iframe standar. Developer yang memilih pemuatan lambat melalui konfigurasi data-lazy plugin kini dapat mencegah pemuatan plugin ini hingga pengguna men-scroll di sekitar. Hal ini memungkinkan penyematan tetap berfungsi bagi pengguna yang membutuhkannya, sekaligus menyimpan data untuk pengguna yang tidak men-scroll halaman ke bawah. Kami berharap ini adalah sematan pertama dari banyak sematan untuk mempelajari pemuatan lambat iframe standar dalam produksi.

Pemuatan lambat iframe lintas browser

Anda dapat menerapkan pemuatan lambat iframe ke situs Anda sebagai progressive enhancement. Browser yang mendukung loading=lazy di iframe akan memuat lambat iframe, dan browser yang tidak mendukung atribut loading akan mengabaikannya dengan aman.

Anda juga dapat memuat iframe offscreen dengan lambat menggunakan library JavaScript lazysizes. Anda dapat melakukannya jika:

• Memerlukan lebih banyak nilai minimum pemuatan lambat kustom daripada penawaran pemuatan lambat yang distandardisasi
• Ingin menawarkan pengalaman pemuatan lambat iframe yang konsisten di seluruh browser kepada pengguna.

<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>

Gunakan pola berikut untuk mendeteksi pemuatan lambat dan mengambil ukuran lambat jika tidak tersedia:

<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>

Apakah ada pengecualian untuk pemuatan lambat iframe di luar layar?

Eksperimen awal dengan iframe pemuatan lambat secara otomatis bagi pengguna Penghemat Data di Chrome memiliki pengecualian untuk iframe tersembunyi, yang sering digunakan untuk komunikasi atau analisis. Halaman ini dicegah pemuatannya dengan lambat, dan selalu dimuat agar tidak merusak fitur tersebut.

Atribut loading tidak menerapkan heuristik ini, sehingga developer selalu dapat memilih apa yang dimuat dengan lambat. Atribut loading harus selalu dihormati, sesuai dengan batas jarak dan pilihan browser lainnya (seperti pencetakan).

Referensi

Untuk mengetahui ide pemuatan lambat lainnya, lihat koleksi pemuatan lambat gambar dan video web.dev.

Terima kasih kepada Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley, dan Stoyan Stefanov atas ulasan mereka.