Pemuatan lambat gambar dan elemen <iframe>

bookmark_border Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Elemen gambar dan <iframe> sering kali menggunakan lebih banyak bandwidth daripada jenis resource lainnya. Dalam kasus elemen <iframe>, waktu pemrosesan tambahan yang cukup besar dapat diperlukan untuk memuat dan merender halaman di dalamnya.

Dalam kasus pemuatan lambat gambar, menunda pemuatan gambar yang berada di luar area tampilan awal dapat membantu mengurangi perebutan 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 dirender lebih cepat.

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

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

Memuat gambar secara lambat dengan atribut loading

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

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

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

Jangan memuat lambat gambar yang ada di area tampilan awal

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

Misalnya, area pandang desktop dapat sangat berbeda dengan area pandang di ponsel karena merender lebih banyak ruang vertikal yang 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 besar 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> dalam kasus gambar utama, atau kasus penggunaan gambar lainnya di mana elemen <img> kemungkinan akan muncul di atas fold, atau di dekat bagian atas tata letak di perangkat apa pun. Hal ini bahkan lebih penting untuk gambar yang kemungkinan menjadi kandidat LCP.

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

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

Demo pemuatan lambat gambar

Memuat lambat elemen <iframe>

Pemuatan lambat elemen <iframe> hingga elemen tersebut terlihat di area tampilan dapat menghemat data secara signifikan dan meningkatkan pemuatan resource penting yang diperlukan agar halaman tingkat teratas dapat dimuat. Selain itu, karena elemen <iframe> pada dasarnya adalah seluruh dokumen HTML yang dimuat dalam dokumen tingkat teratas, elemen tersebut dapat menyertakan 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 yang disematkan atau postingan media sosial biasanya menggunakan elemen <iframe>, dan sering kali memerlukan sejumlah besar subresource yang juga dapat mengakibatkan perebutan bandwidth untuk resource halaman tingkat teratas. Sebagai contoh, pemuatan lambat sematan video YouTube menghemat lebih dari 500 KiB selama pemuatan halaman awal, sementara pemuatan lambat plugin tombol Suka Facebook menghemat lebih dari 200 KiB—sebagian besar adalah JavaScript.

Bagaimanapun, setiap kali Anda memiliki <iframe> di bawah lipatan pada halaman, Anda harus mempertimbangkan dengan cermat untuk memuatnya secara lambat jika tidak penting untuk memuatnya di awal, karena tindakan ini 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. Hal ini memberi tahu browser untuk segera memuat HTML elemen <iframe> dan subresourcenya.
• "lazy" menunda pemuatan HTML elemen <iframe> dan subresourcenya hingga berada dalam jarak yang telah ditentukan dari area tampilan.

Demo iframe pemuatan lambat

Fasad

Daripada memuat sematan segera selama 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 fasad.

Kasus penggunaan umum untuk fasad adalah sematan video dari layanan pihak ketiga yang sematannya mungkin melibatkan pemuatan banyak subresource tambahan dan berpotensi mahal—seperti JavaScript—selain konten video itu sendiri. Dalam kasus seperti itu—kecuali jika ada kebutuhan yang sah agar video diputar otomatis—sematan video mengharuskan pengguna berinteraksi dengannya sebelum pemutaran 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 digantikan oleh sematan <iframe> yang sebenarnya, yang memicu HTML elemen <iframe> pihak ketiga dan sub-resource-nya untuk mulai didownload.

Selain meningkatkan pemuatan halaman awal, manfaat utama lainnya adalah jika pengguna tidak pernah memutar video, resource yang diperlukan untuk menayangkannya tidak akan pernah didownload. Ini adalah pola yang baik, karena memastikan pengguna hanya mendownload apa yang sebenarnya mereka inginkan, 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 JavaScript dalam jumlah besar yang dapat berdampak negatif pada pemuatan halaman dan responsivitas terhadap input pengguna. Seperti halnya memuat apa pun di awal, biaya akan dikenakan pada waktu pemuatan, tetapi dalam kasus widget chat, tidak semua pengguna tidak berniat berinteraksi dengannya.

Namun, dengan facade, tombol "Mulai Chat" pihak ketiga dapat diganti dengan tombol palsu. Setelah pengguna berinteraksi secara bermakna dengan widget—seperti menahan kursor di atasnya selama jangka waktu yang wajar, atau dengan mengklik—widget chat yang sebenarnya dan berfungsi akan ditempatkan saat pengguna membutuhkannya.

Meskipun Anda dapat membuat fasad 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 elemen <video> secara lambat, gambar poster elemen <video>, gambar yang dimuat oleh properti CSS background-image, 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 bukan fitur tingkat browser.

Secara khusus, elemen <video>putar otomatis dan loop tanpa trek audio adalah alternatif yang jauh lebih efisien daripada menggunakan GIF animasi, yang sering kali beberapa kali lebih besar daripada resource video dengan kualitas visual yang setara. Meski begitu, video ini tetap dapat signifikan dalam hal bandwidth, jadi pemuatan lambatnya adalah pengoptimalan tambahan yang dapat sangat membantu mengurangi bandwidth yang terbuang.

Sebagian besar library ini berfungsi menggunakan Intersection Observer API—dan Mutation Observer API jika HTML halaman berubah setelah pemuatan awal—untuk mengenali saat elemen memasuki area tampilan pengguna. Jika gambar terlihat—atau mendekati area tampilan—maka pustaka JavaScript akan mengganti 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 Anda 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 elemen <video> ditukar dengan atribut src, yang mengirimkan permintaan untuk mendownload video dan memulai pemutarannya secara otomatis.

Menguji pengetahuan Anda

Berikutnya: Pengambilan data dan pra-rendering

Sekarang setelah Anda memahami cara memuat lambat gambar dan elemen <iframe>, Anda berada dalam posisi yang baik untuk memastikan halaman dapat dimuat lebih cepat sekaligus memenuhi kebutuhan pengguna Anda. Namun, ada kasus di mana pemuatan spekulatif resource dapat diinginkan. Di modul berikutnya, pelajari pengambilan data dan pra-rendering, serta cara teknik ini—jika digunakan dengan cermat—dapat mempercepat navigasi ke halaman berikutnya secara signifikan dengan memuat halaman tersebut lebih awal.