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 atributloading
."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"
"lazy"
Kapan solusi pemuatan lambat berbasis JavaScript wajar untuk digunakan?
loading
, seperti dalam kasus video yang diputar otomatis yang dimaksudkan untuk mengganti gambar animasi, atau untuk memuat lambat gambar poster elemen <video>
.
Kapan fasad menjadi teknik yang berguna?
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.