Pemuatan lambat gambar dan elemen <iframe>

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

Gambar dan elemen <iframe> sering kali menggunakan lebih banyak bandwidth daripada jenis resource lainnya. Dalam kasus elemen <iframe>, waktu pemrosesan tambahan yang cukup dapat terlibat dalam memuat dan merender halaman di dalamnya.

Dalam kasus pemuatan lambat gambar, 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 dapat membantu LCP candidate memuat dan mewarnai lebih cepat.

Untuk elemen <iframe>, Interaction to Next Paint (INP) halaman dapat ditingkatkan selama startup dengan memuat lambat. Hal ini karena <iframe> adalah dokumen HTML yang sepenuhnya terpisah dengan sub-resource-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.

Dengan demikian, menunda pemuatan gambar di luar layar dan elemen <iframe> adalah teknik yang layak dipelajari, 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 kritis halaman.

Memuat gambar secara lambat dengan atribut loading

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

• "eager" memberi tahu browser bahwa gambar harus segera dimuat, 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 disetel agar cukup besar sehingga gambar dimuat pada saat pengguna men-scroll ke gambar tersebut.

Perlu juga diperhatikan bahwa jika Anda menggunakan elemen <picture>, atribut loading harus tetap diterapkan ke elemen <img> turunannya, 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 <img> turunannya.

Jangan memuat gambar secara lambat yang ada di area pandang awal

Anda hanya boleh menambahkan atribut loading="lazy" ke elemen <img> yang diposisikan di luar area tampilan awal. Namun, mengetahui posisi elemen yang tepat secara relatif dalam area pandang sebelum halaman dirender bisa jadi rumit. 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 mungkin dapat menyesuaikan 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 dalam jumlah yang cukup besar, mungkin bahkan lebih dari beberapa perangkat desktop.

Namun, ada beberapa kasus yang cukup jelas bahwa Anda harus menghindari menerapkan loading="lazy". Misalnya, Anda harus menghapus atribut loading="lazy" dari elemen <img> dalam kasus gambar hero, atau kasus penggunaan gambar lainnya saat elemen <img> cenderung muncul di atas lipatan, atau di dekat bagian atas tata letak di perangkat apa pun. Hal ini lebih penting lagi untuk gambar yang cenderung menjadi kandidat LCP.

Gambar yang dimuat lambat harus menunggu browser menyelesaikan tata letak agar dapat 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 ditemukan oleh pemindai pramuat dalam 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 browser akan memengaruhi aspek performa halaman lainnya, seperti INP.

Demo pemuatan lambat gambar

Memuat lambat elemen <iframe>

Memuat elemen <iframe> secara lambat hingga terlihat di area pandang dapat menghemat data yang signifikan dan meningkatkan pemuatan resource penting yang diperlukan agar halaman tingkat atas dapat dimuat. Selain itu, karena elemen <iframe> pada dasarnya adalah seluruh dokumen HTML yang dimuat dalam dokumen tingkat atas, elemen tersebut dapat menyertakan sejumlah besar sub-resource, terutama JavaScript, yang dapat sangat memengaruhi INP halaman 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 sub-resource dalam jumlah yang signifikan yang juga dapat menyebabkan pertentangan bandwidth untuk resource halaman tingkat atas. Sebagai contoh, pemuatan lambat sematan video YouTube menghemat lebih dari 500 KiB selama pemuatan halaman awal, sedangkan pemuatan lambat plugin tombol Suka Facebook menghemat lebih dari 200 KiB—sebagian besar adalah JavaScript.

Apa pun yang terjadi, setiap kali Anda memiliki <iframe> di bawah lipatan pada halaman, Anda harus sangat mempertimbangkan untuk memuat lambat jika tidak penting untuk memuat di awal, karena tindakan 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 dengan elemen <img> yang menggunakan atribut loading:

• "eager" adalah nilai default. Ini memberi tahu browser untuk segera memuat HTML elemen <iframe> dan sub-resource-nya.
• "lazy" menunda pemuatan HTML elemen <iframe> dan sub-resourcenya hingga berada dalam jarak yang telah ditentukan dari area pandang.

Demo iframe pemuatan lambat

Fasad

Daripada langsung memuat sematan 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 penyematan pihak ketiga. Teknik ini dikenal sebagai facade.

Kasus penggunaan umum untuk fasad adalah penyematan video dari layanan pihak ketiga, yang menyertakan pemuatan banyak sub-resource tambahan dan berpotensi mahal—seperti JavaScript—selain konten video itu sendiri. Dalam kasus tersebut—kecuali jika ada kebutuhan yang sah agar video diputar otomatis—penyematan video memerlukan pengguna untuk berinteraksi dengan video tersebut sebelum pemutaran dengan mengklik tombol putar.

Ini adalah peluang utama untuk menampilkan gambar statis yang secara visual mirip dengan penyematan video dan menghemat bandwidth yang signifikan dalam prosesnya. Setelah pengguna mengklik gambar, gambar tersebut akan diganti dengan penyematan <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 mengirimkannya tidak akan didownload. Ini adalah pola yang baik, karena memastikan pengguna hanya mendownload yang sebenarnya mereka inginkan, tanpa membuat asumsi yang mungkin salah tentang kebutuhan pengguna.

Widget chat adalah kasus penggunaan lain yang bagus untuk teknik fasad. Sebagian besar widget chat mendownload JavaScript dalam jumlah yang signifikan yang dapat berdampak negatif pada pemuatan halaman dan responsivitas terhadap input pengguna. Seperti memuat apa pun di awal, biaya akan dikenakan pada waktu pemuatan, tetapi dalam kasus widget chat, tidak semua pengguna tidak pernah berniat berinteraksi dengannya.

Di sisi lain, dengan fasad, Anda dapat mengganti tombol "Mulai Chat" pihak ketiga dengan tombol palsu. Setelah pengguna berinteraksi dengan widget tersebut secara bermakna—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 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 bukan fitur tingkat browser.

Secara khusus, memutar otomatis dan memutar berulang elemen <video> tanpa trek audio adalah alternatif yang jauh lebih efisien daripada menggunakan GIF animasi, yang sering kali berukuran beberapa kali lebih besar daripada resource video dengan kualitas visual yang setara. Meskipun demikian, video ini masih dapat menghabiskan bandwidth yang signifikan, sehingga pemuatan lambat adalah pengoptimalan tambahan yang dapat membantu mengurangi bandwidth yang terbuang.

Sebagian besar library ini berfungsi menggunakan Intersection Observer API—dan selain itu Mutation Observer API jika HTML halaman berubah setelah pemuatan awal—untuk mengenali kapan elemen memasuki area pandang pengguna. Jika gambar terlihat—atau mendekati area pandang—library 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 memuat lambatnya 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 dijalankan di halaman, video tidak dimuat hingga pengguna men-scroll-nya ke area pandang. Pada saat itu, atribut data-src di elemen <source> turunan elemen <video> akan diganti dengan atribut src, yang mengirimkan permintaan untuk mendownload video dan otomatis mulai memutarnya.

Menguji pengetahuan Anda

Berikutnya: Pengambilan data dan pra-rendering

Setelah memahami gambar pemuatan lambat dan elemen <iframe>, Anda berada dalam posisi yang baik untuk memastikan halaman dapat dimuat lebih cepat sekaligus memperhatikan kebutuhan pengguna. Namun, ada kasus saat pemuatan spekulatif resource dapat diinginkan. Di modul berikutnya, pelajari pengambilan data dan pra-rendering, serta bagaimana teknik ini—jika digunakan dengan cermat—dapat mempercepat navigasi ke halaman berikutnya secara substansial dengan memuat halaman tersebut terlebih dahulu.