Saatnya memuat lambat iframe di luar layar!

Addy Osmani

Barry Pollard

Pemuatan lambat elemen <iframe> menunda pemuatan iframe di luar layar hingga pengguna menggulir di dekatnya. Ini menghemat data, mempercepat pemuatan bagian lain dari laman, dan mengurangi penggunaan memori.

Seperti halnya 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 menampilkan sematan video yang dimuat dengan lambat:

Mengapa memuat iframe lambat?

Penyematan pihak ketiga mencakup berbagai kasus penggunaan, mulai dari pemutar video hingga postingan media sosial ke iklan. Konten ini sering kali tidak langsung terlihat di area pandang pengguna, namun pengguna tetap membayar biaya mengunduh data dan JavaScript untuk setiap {i>frame<i}, meskipun jika mereka tidak men-scroll ke sana.

Berdasarkan riset Chrome terhadap pemuatan lambat di luar layar secara otomatis untuk pengguna Penghemat Data, pemuatan lambat iframe dapat menyebabkan penghematan data rata-rata sebesar 2-3%, 1-2% pengurangan First Contentful Paint di median, dan 2% Peningkatan Penundaan Input Pertama (FID) pada persentil ke-95.

iframe di luar layar yang dimuat lambat juga dapat meningkatkan ukuran Terbesar di halaman Anda Contentful Paint (LCP). Karena iframe sering kali membutuhkan jumlah bandwidth yang signifikan untuk memuat semua subresource, pemuatan lambat iframe di luar layar dapat mengurangi pertentangan bandwidth di jaringan yang dibatasi perangkat, menyediakan lebih banyak bandwidth untuk memuat resource yang berkontribusi pada LCP.

Bagaimana cara kerja pemuatan lambat bawaan untuk iframe?

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

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

Cara kerja atribut loading di iframe adalah 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 dengan memuat secara eksplisit dengan segera resource Anda.

Jika Anda perlu membuat iframe secara dinamis menggunakan JavaScript, tetapkan 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 pemuatan lambat sematan iframe populer memengaruhi pengalaman pengguna?

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

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 halaman Anda. Pemuatan lambat iframe ini menghindari keharusan memuat semua membuat skrip yang dibutuhkan penyematan, dan dapat menghemat sekitar 100 kB saat pemuatan awal. Karena sematan ini sering ditampilkan di bawah area pandang dalam kebanyakan artikel, sebagai kandidat yang tepat untuk pemuatan lambat iframe.

Spotify

Penyematan Spotify yang dimuat 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 laman web. Yang paling populer adalah plugin Suka, tombol yang menunjukkan berapa banyak pengguna yang telah "menyukai" pada halaman. Secara default, penyematan plugin Suka di laman web menggunakan Facebook JSSDK menarik sekitar 215 KB otomatis, 197 KB di antaranya adalah JavaScript. {i>Plugin<i} sering muncul di akhir artikel atau dekat akhir halaman, jadi muatlah dengan segera ketika berada di balik layar bisa jadi kurang optimal.

Berkat insinyur Stoyan Stefanov, semua plugin sosial Facebook sekarang mendukung iframe standar pemuatan lambat. Developer yang memilih pemuatan lambat melalui plugin data-lazy sekarang bisa mencegah plugin ini dimuat sampai pengguna men-scroll di sekitar lokasi Anda. Hal ini memungkinkan penyematan tetap berfungsi bagi pengguna yang membutuhkannya, sementara menghemat data untuk pengguna yang tidak menggulir ke bawah halaman. Kami penuh harapan ini adalah yang pertama dari banyak sematan untuk menjelajahi pemuatan lambat iframe standar di produksi.

Pemuatan lambat iframe lintas browser

Pemuatan lambat iframe tingkat browser didukung dengan baik di semua browser utama dan direkomendasikan untuk sebagian besar kasus penggunaan, guna menghilangkan kebutuhan akan dependensi tambahan pada JavaScript.

Namun, jika Anda perlu mendukung lebih banyak browser atau ingin memiliki kontrol lebih besar atas nilai minimum pemuatan lambat, Anda dapat menggunakan library pihak ketiga untuk memuat iframe lambat di situs Anda.

Anda juga dapat memuat iframe di luar layar dengan lambat menggunakan lazysizes Library 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>

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 pengecualian untuk pemuatan lambat iframe di luar layar?

Eksperimen awal dengan pemuatan lambat iframe otomatis untuk Penghemat Data pengguna di Chrome memiliki pengecualian untuk iframe tersembunyi, yang sering digunakan untuk komunikasi atau analitik. Aplikasi ini dicegah agar tidak dimuat 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 dipatuhi, tunduk pada batas jarak dan pilihan browser lainnya (seperti pencetakan).

Resource

Untuk ide pemuatan lambat lainnya, lihat referensi koleksi pemuatan lambat gambar dan video.

Berkat Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley, dan Stoyan Stefanov atas ulasannya.