Pemuatan lambat gambar dan elemen <iframe>

Gambar dan elemen <iframe> sering kali menggunakan lebih banyak bandwidth daripada jenis resource lainnya. Untuk elemen <iframe>, cukup banyak waktu pemrosesan tambahan untuk pemuatan dan rendering halaman di dalamnya.

Untuk gambar pemuatan lambat, menunda pemuatan gambar yang berada di luar area tampilan awal dapat membantu mengurangi pertentangan bandwidth untuk resource yang lebih penting dalam area tampilan awal. Hal ini dapat meningkatkan Largest Contentful Paint (LCP) halaman dalam beberapa kasus saat koneksi jaringan buruk, dan bandwidth yang dialokasikan ulang tersebut dapat membantu kandidat LCP dimuat dan menggambar lebih cepat.

Jika elemen <iframe> relevan, Interaction to Next Paint (INP) halaman dapat ditingkatkan selama startup dengan memuat lambat elemen tersebut. Hal ini karena <iframe> adalah dokumen HTML yang sepenuhnya terpisah dengan subresource-nya sendiri. Meskipun elemen <iframe> dapat dijalankan dalam proses terpisah, terkadang elemen tersebut berbagi proses dengan thread lain, yang dapat menimbulkan kondisi saat halaman menjadi kurang responsif terhadap input pengguna.

Oleh karena itu, menunda pemuatan gambar di luar layar dan elemen <iframe> adalah teknik yang patut dilakukan, dan memerlukan upaya yang cukup rendah untuk mendapatkan hasil yang cukup baik dalam hal performa. Modul ini menjelaskan tentang pemuatan lambat kedua jenis elemen ini untuk memberikan pengalaman pengguna yang lebih cepat dan lebih baik selama periode startup penting halaman.

Gambar pemuatan lambat dengan atribut loading

Atribut loading dapat ditambahkan ke elemen <img> untuk memberi tahu browser cara muatan tersebut:

  • "eager" memberi tahu browser bahwa gambar harus segera dimuat, meskipun berada di luar area tampilan awal. Nilai ini juga merupakan nilai default untuk atribut loading.
  • "lazy" menunda pemuatan gambar hingga berada dalam jarak yang ditentukan dari area pandang yang terlihat. Jarak ini bervariasi menurut browser, tetapi sering kali ditetapkan agar cukup besar sehingga gambar dimuat saat pengguna men-scroll ke sana.

Perlu juga diperhatikan bahwa jika Anda menggunakan elemen <picture>, atribut loading tetap harus diterapkan ke elemen <img> turunannya, bukan elemen <picture> itu sendiri. Hal ini karena elemen <picture> adalah container yang berisi elemen <source> tambahan yang mengarah ke kandidat gambar yang berbeda, dan kandidat yang dipilih browser akan diterapkan secara langsung ke elemen <img> turunannya.

Jangan menjalankan lambat pada gambar yang berada di area pandang awal

Anda hanya boleh menambahkan atribut loading="lazy" ke elemen <img> yang berada di luar area tampilan awal. Namun, mungkin sulit untuk mengetahui posisi akurat sebuah elemen dalam area pandang sebelum halaman dirender. Ukuran area pandang, rasio aspek, dan perangkat yang berbeda harus dipertimbangkan.

Misalnya, area pandang desktop bisa sangat berbeda dari area pandang di ponsel karena dapat menampilkan lebih banyak ruang vertikal yang mungkin dapat memuat gambar di area pandang awal yang tidak akan muncul di area pandang awal perangkat yang secara fisik lebih kecil. Tablet yang digunakan dalam orientasi potret juga menampilkan ruang vertikal yang cukup besar, bahkan mungkin lebih banyak daripada beberapa perangkat desktop.

Namun, ada beberapa kasus yang cukup jelas bahwa Anda harus menghindari penerapan loading="lazy". Misalnya, Anda harus menghapus atribut loading="lazy" dari elemen <img> jika terjadi gambar utama, atau kasus penggunaan gambar lainnya dengan elemen <img> kemungkinan muncul di paruh atas, atau di dekat bagian atas tata letak di perangkat apa pun. Hal ini lebih penting lagi untuk gambar yang kemungkinan menjadi kandidat LCP.

Gambar yang dimuat lambat harus menunggu browser menyelesaikan tata letak untuk mengetahui apakah posisi akhir gambar berada dalam area pandang. Artinya, jika elemen <img> di area pandang yang terlihat memiliki atribut loading="lazy", elemen tersebut hanya diminta setelah semua CSS didownload, diuraikan, dan diterapkan ke halaman, bukan diambil segera setelah pemindai pramuat ditemukan di markup mentah.

Karena atribut loading pada elemen <img> didukung di semua browser utama, Anda tidak perlu menggunakan JavaScript untuk memuat gambar secara lambat, karena menambahkan JavaScript tambahan ke halaman untuk memberikan kemampuan yang sudah disediakan oleh browser akan memengaruhi aspek performa halaman lainnya, seperti INP.

Demo pemuatan lambat gambar

Pemuatan lambat elemen <iframe>

Pemuatan lambat elemen <iframe> hingga terlihat di area tampilan dapat menghemat data yang signifikan dan meningkatkan kualitas pemuatan resource penting yang diperlukan untuk dimuat di halaman tingkat atas. Selain itu, karena elemen <iframe> pada dasarnya merupakan keseluruhan dokumen HTML yang dimuat dalam dokumen tingkat atas, elemen tersebut dapat mencakup sejumlah besar subresource, terutama JavaScript, yang dapat memengaruhi INP halaman secara signifikan jika tugas dalam frame tersebut memerlukan waktu pemrosesan yang signifikan.

Penyematan pihak ketiga adalah kasus penggunaan umum untuk elemen <iframe>. Misalnya, pemutar video tersemat atau postingan media sosial biasanya menggunakan elemen <iframe>, dan sering kali memerlukan banyak subresource yang juga dapat menyebabkan pertentangan bandwidth untuk resource halaman tingkat atas. Misalnya, pemuatan lambat penyematan video YouTube menghemat lebih dari 500 KiB selama pemuatan halaman awal, sedangkan pemuatan lambat plugin tombol Suka Facebook menghemat lebih dari 200 KiB—sebagian besarnya adalah JavaScript.

Apa pun itu, setiap kali Anda memiliki <iframe> di paruh bawah halaman, sebaiknya Anda sangat mempertimbangkan pemuatan lambat jika tidak penting untuk memuatnya di awal, karena hal tersebut dapat meningkatkan pengalaman pengguna secara signifikan.

Atribut loading untuk elemen <iframe>

Atribut loading pada elemen <iframe> juga didukung di semua browser utama. Nilai untuk atribut loading dan perilakunya sama seperti elemen <img> yang menggunakan atribut loading:

  • "eager" adalah nilai default-nya. Kode ini akan memberi tahu browser untuk segera memuat HTML elemen <iframe> dan subresource-nya.
  • "lazy" menunda pemuatan HTML elemen <iframe> dan subresource-nya hingga berada dalam jarak yang telah ditentukan dari area tampilan.

Demo iframe pemuatan lambat

Fasad

Daripada langsung memuat sematan saat pemuatan halaman, Anda dapat memuatnya sesuai permintaan sebagai respons terhadap interaksi pengguna. Hal ini dapat dilakukan dengan menampilkan gambar atau elemen HTML lain yang sesuai hingga pengguna berinteraksi dengannya. Setelah pengguna berinteraksi dengan elemen, Anda dapat menggantinya dengan sematan pihak ketiga. Teknik ini dikenal sebagai fasade.

Kasus penggunaan umum untuk fasad adalah sematan video dari layanan pihak ketiga saat penyematan mungkin melibatkan pemuatan banyak subresource tambahan yang mungkin mahal seperti JavaScript—selain konten video itu sendiri. Dalam kasus demikian—kecuali ada kebutuhan yang sah bagi video untuk diputar otomatis—sematan video mengharuskan pengguna berinteraksi dengannya sebelum diputar dengan mengklik tombol putar.

Ini adalah peluang utama untuk menampilkan gambar statis yang secara visual mirip dengan sematan video dan menghemat bandwidth secara signifikan dalam prosesnya. Setelah pengguna mengklik gambar, gambar tersebut akan diganti dengan sematan <iframe> yang sebenarnya, yang memicu HTML elemen <iframe> pihak ketiga dan subresource-nya untuk mulai mendownload.

Selain mempercepat pemuatan halaman awal, keuntungan penting lainnya adalah jika pengguna tidak pernah memutar video, resource yang diperlukan untuk menayangkannya tidak pernah didownload. Ini adalah pola yang bagus, karena memastikan pengguna hanya mendownload apa yang sebenarnya diinginkan, tanpa membuat asumsi yang mungkin salah tentang kebutuhan pengguna.

Widget Chat adalah kasus penggunaan lain yang sangat baik untuk teknik fasad. Sebagian besar widget chat mendownload sejumlah besar JavaScript yang dapat berdampak negatif pada pemuatan halaman dan responsivitas terhadap input pengguna. Seperti halnya memuat apa pun di awal, biaya dikeluarkan pada waktu pemuatan. Namun, dalam kasus widget chat, tidak semua pengguna tidak pernah berniat untuk berinteraksi dengan widget tersebut.

Di sisi lain, dengan fasad, tombol "Start Chat" pihak ketiga dapat diganti dengan tombol palsu. Setelah pengguna berinteraksi secara bermakna dengannya—seperti mengarahkan kursor ke atasnya selama jangka waktu yang wajar atau dengan sekali klik—widget chat fungsional yang sebenarnya akan ditempatkan pada tempatnya saat pengguna membutuhkannya.

Meskipun ada kemungkinan untuk membuat fasad Anda sendiri, ada opsi open source yang tersedia untuk pihak ketiga yang lebih populer, seperti lite-youtube-embed untuk video YouTube, lite-vimeo-embed untuk video Vimeo, dan React Live Chat Loader untuk widget chat.

Library pemuatan lambat JavaScript

Jika Anda perlu memuat lambat elemen <video>, gambar poster elemen <video>, gambar yang dimuat oleh properti background-image CSS, atau elemen lain yang tidak didukung, Anda dapat melakukannya dengan solusi pemuatan lambat berbasis JavaScript, seperti lazysizes atau yall.js, karena pemuatan lambat jenis resource ini bukanlah fitur tingkat browser.

Secara khusus, elemen <video> yang diputar otomatis dan berulang tanpa trek audio merupakan alternatif yang jauh lebih efisien daripada menggunakan GIF animasi, yang sering kali lebih besar daripada resource video dengan kualitas visual yang setara. Meskipun demikian, video ini masih dapat memiliki bandwidth yang signifikan, jadi pemuatan lambat adalah pengoptimalan tambahan yang dapat sangat membantu untuk mengurangi pemborosan bandwidth.

Sebagian besar library ini berfungsi menggunakan Intersection Observer API—dan juga Mutation Observer API jika HTML halaman berubah setelah pemuatan awal—untuk mengenali kapan sebuah elemen memasuki area pandang pengguna. Jika gambar terlihat—atau mendekati area tampilan—maka library JavaScript akan menggantikan atribut non-standar, (sering kali data-src atau atribut serupa), dengan atribut yang benar, seperti src.

Misalnya, Anda memiliki video yang menggantikan GIF animasi, tetapi ingin memuatnya secara lambat dengan solusi JavaScript. Hal ini dapat dilakukan dengan yall.js dengan pola markup berikut:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Secara default, yall.js mengamati semua elemen HTML yang memenuhi syarat dengan class "lazy". Setelah yall.js dimuat dan dieksekusi di halaman, video tidak dimuat hingga pengguna men-scrollnya ke area pandang. Pada saat itu, atribut data-src pada elemen <source> turunan dari elemen <video> akan ditukar ke atribut src, yang mengirimkan permintaan untuk mendownload video dan otomatis mulai memutarnya.

Menguji pengetahuan Anda

Manakah nilai default bagi atribut loading untuk elemen <img> dan <iframe>?

"eager"
Benar.
"lazy"
Coba lagi.

Kapan solusi pemuatan lambat berbasis JavaScript wajar untuk digunakan?

Untuk resource apa pun yang dapat dimuat dengan lambat.
Coba lagi.
Untuk resource yang tidak mendukung atribut loading, seperti dalam kasus video yang diputar otomatis yang dimaksudkan untuk mengganti gambar animasi, atau untuk memuat lambat gambar poster elemen <video>.
Benar.

Kapan fasad menjadi teknik yang berguna?

Untuk sematan pihak ketiga yang menggunakan data signifikan, apa pun kebutuhan pengguna.
Coba lagi.
Untuk sematan pihak ketiga mana pun, yang mana resource yang diperlukan untuk dimuat tidak hanya substansial, tetapi juga cukup besar bahwa tidak semua pengguna dapat berinteraksi dengan aset tersebut.
Benar.

Berikutnya: Pengambilan data dan pra-rendering

Setelah dapat memahami pemuatan lambat gambar dan elemen <iframe>, Anda berada di posisi yang tepat untuk memastikan halaman dapat dimuat lebih cepat sekaligus menghormati kebutuhan pengguna. Namun, dalam kasus tertentu, pemuatan resource spekulatif mungkin diinginkan. Di modul berikutnya, pelajari pengambilan data dan pra-rendering, dan bagaimana teknik ini—jika digunakan dengan cermat—dapat mempercepat navigasi ke halaman berikutnya dengan memuatnya terlebih dahulu.