Saatnya memuat lambat iframe di luar layar!

Addy Osmani
Addy Osmani
X GitHub

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.

Dukungan Browser

  • 77
  • 79
  • 121
  • 16,4

Anda menunjukkan kepada browser bahwa Anda ingin memuat iframe secara lambat dengan atribut loading, dengan cara yang sama seperti saat Anda menunjukkan pemuatan lambat untuk gambar.

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

Sematan pihak ketiga mencakup berbagai kasus penggunaan, mulai dari pemutar video, postingan media sosial, hingga iklan. Sering kali konten ini tidak langsung terlihat di area pandang pengguna. Namun, elemen ini hanya terlihat setelah pengguna men-scroll ke bagian bawah halaman. Meskipun demikian, pengguna membayar biaya download data dan JavaScript yang mahal untuk setiap frame, meskipun mereka tidak men-scroll ke sana.

Penghematan data dari penggunaan pemuatan lambat iframe untuk iframe. Dalam contoh ini, pemuatan yang cepat menghasilkan 3 MB, sedangkan pemuatan lambat tidak menarik kode ini hingga pengguna men-scroll lebih dekat ke iframe.

Berdasarkan penelitian Chrome tentang iframe 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.

Selain itu, iframe di luar layar yang dimuat dengan lambat dapat memberikan manfaat bagi Largest Contentful Paint (LCP). Kandidat LCP, seperti gambar atau teks yang bergantung pada font web agar dapat dirender. Karena iframe sering kali memerlukan bandwidth dalam jumlah yang signifikan untuk memuat semua subresource-nya, iframe di luar layar yang dimuat secara lambat dapat secara signifikan mengurangi pertentangan bandwidth pada perangkat yang memiliki jaringan 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: merupakan 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 sama sekali akan memiliki dampak yang sama seperti secara eksplisit memuat resource dengan cepat.

Jika Anda perlu membuat iframe melalui JavaScript secara dinamis, 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);

Jika web berubah sehingga iframe di luar layar pemuatan lambat menjadi default, tampilannya akan terlihat seperti ini:

Penyematan video YouTube dengan pemuatan lambat (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>

Anekdot: saat kami beralih ke penyematan YouTube pemuatan lambat untuk Chrome.com, kami menghemat waktu 10 detik dari seberapa cepat halaman kami dapat menjadi interaktif di perangkat seluler. Kami telah melaporkan bug internal dengan YouTube untuk membahas penambahan loading=lazy ke kode sematannya.

Chrome.com mencapai pengurangan waktu 10 detik dalam Waktu Untuk Interaktif dengan pemuatan lambat iframe di luar layar untuk sematan video YouTube mereka

Penyematan Instagram yang pemuatannya lambat (menghemat sekitar 100 KB pada gzip saat pemuatan awal):

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 untuk penyematan. Mengingat sematan tersebut sering ditampilkan di bawah area pandang di sebagian besar artikel, ini tampak seperti kandidat yang wajar untuk pemuatan lambat iframe-nya.

Pemuatan lambat Spotify (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>

Meskipun sematan sebelumnya menggambarkan potensi manfaat dari pemuatan lambat iframe untuk konten media, ada juga kemungkinan manfaat ini untuk iklan.

Studi kasus: Memuat lambat plugin sosial Facebook

Plugin sosial Facebook memungkinkan developer menyematkan konten Facebook di halaman web mereka. Ada sejumlah plugin ini yang ditawarkan, seperti postingan, foto, video, komentar yang disematkan... Yang paling populer adalah plugin Like - tombol yang menunjukkan jumlah orang yang telah "menyukai" halaman. Secara default, menyematkan plugin Suka di halaman web (menggunakan Facebook JSSDK) akan menarik sekitar 215 KB resource, 197 KB di antaranya adalah JavaScript. Dalam banyak kasus, plugin mungkin muncul di akhir artikel atau di dekat akhir halaman, sehingga memuatnya dengan segera saat berada di luar layar mungkin kurang optimal.

Tombol Suka Facebook

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 akan dapat menghindari pemuatan hingga pengguna men-scroll di sekitar. Dengan demikian, penyematan masih dapat berfungsi sepenuhnya bagi pengguna yang membutuhkannya, sekaligus penghematan data bagi mereka yang tidak men-scroll halaman ke bawah. Kami berharap ini adalah sematan pertama dari banyak sematan untuk mempelajari pemuatan lambat iframe standar dalam produksi.

Dapatkah saya memuat iframe lintas browser dengan lambat? Ya

pemuatan lambat iframe dapat diterapkan sebagai progressive enhancement. Browser yang mendukung loading=lazy di iframe akan memuat iframe dengan lambat, sedangkan atribut loading akan diabaikan secara aman di browser yang belum mendukungnya.

Anda juga dapat memuat iframe di luar layar dengan lambat menggunakan library JavaScript lazysizes. Hal ini mungkin diinginkan jika Anda:

  • memerlukan lebih banyak batas pemuatan lambat kustom daripada yang ditawarkan pemuatan lambat standar yang saat ini ditawarkan
  • ingin menawarkan pengalaman pemuatan lambat iframe yang konsisten di berbagai 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 saat 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 instance saat iframe offscreen dengan loading=lazy masih dimuat?

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 melanggar kemampuan ini.

Dengan atribut loading, pilihan kembali dengan developer sehingga tidak ada heuristik yang diterapkan dan atribut loading harus selalu dipatuhi, tunduk pada batas jarak dan pilihan browser lainnya (misalnya, pencetakan).

Kesimpulan

Lihat koleksi pemuatan lambat gambar dan video web.dev untuk ide pemuatan lambat lainnya.

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