Dukungan Browser
- 77
- 79
- 121
- 16,4
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.
![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.](https://web.dev/static/articles/iframe-lazy-loading/image/data-savings-using-ifram-721849ff3b329.png?authuser=6&hl=id)
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>
![Chrome.com mencapai pengurangan waktu 10 detik dalam Waktu Untuk Interaktif dengan pemuatan lambat iframe di luar layar untuk sematan video YouTube mereka](https://web.dev/static/articles/iframe-lazy-loading/image/chromecom-achieved-10-s-80c4aa3655294.png?authuser=6&hl=id)
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.
![Tombol Suka Facebook](https://web.dev/static/articles/iframe-lazy-loading/image/facebook-button-e0eb339d5d796.png?authuser=6&hl=id)
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.