Pemuatan Malas Gambar loading=lazy

<img loading="lazy" src="..."> memberi tahu peramban agar menunda pengunduhan gambar hingga gambar tersebut hampir memasuki area pandang. Dukungan bawaan di semua peramban modern menjadikannya peningkatan kinerja paling sederhana untuk halaman yang memuat banyak gambar.

Peramban menggunakan margin heuristik kecil (biasanya beberapa ribu piksel di bawah batas bagian yang terlihat). Gambar mulai dimuat cukup awal sehingga sudah sepenuhnya dirender saat pengguna menggulir ke sana—pemuatan tertunda tidak terasa bagi pengguna yang menggulir dengan cermat.

Jangan pernah menetapkan loading="lazy" pada gambar di bagian yang terlihat saat halaman pertama kali dibuka atau pada kandidat LCP (elemen dengan konten terbesar yang dirender). Pemuatan yang ditunda memperlambat elemen visual paling penting, sehingga memperburuk kecepatan yang dirasakan dan Metrik Web Inti.

Agar pemuatan tertunda efektif, berikan width dan height eksplisit pada <img> (atau gunakan rasio aspek CSS). Tanpa dimensi, peramban tidak dapat menyediakan ruang, pengguliran memicu penataan ulang tata letak, dan heuristik pemuatan tertunda dapat salah bekerja.

Atribut yang sama juga berfungsi pada <iframe>. <iframe loading="lazy"> menunda pemuatan peta, video, dan sematan sosial di bawah bagian yang terlihat—masing-masing jika tidak ditunda akan memuat megabita JavaScript pihak ketiga pada setiap kunjungan halaman.

Nilai bawaannya adalah loading="eager" (muat segera) dan jarang ditulis secara eksplisit. Menetapkan pemuatan segera pada gambar di bagian yang terlihat dapat berguna sebagai dokumentasi, sekaligus memberi tahu peninjau bahwa pilihan tersebut dibuat dengan sengaja.

Pemuatan tertunda berpadu sempurna dengan gambar responsif. Peramban tetap memilih kandidat yang tepat dari atribut sumber responsif; hanya pengunduhannya yang ditunda. Tidak diperlukan koordinasi tambahan antara loading="lazy" dan atribut sumber responsif.

Padukan pemuatan tertunda dengan decoding="async" agar peramban dapat mendekode gambar di luar utas utama. Dengan begitu, masukan tidak terhambat saat menggulir ketika banyak gambar tiba secara bersamaan setelah pengguliran panjang secara cepat.

Gambar latar CSS tidak dapat dimuat secara tertunda secara bawaan. Untuk latar utama di bagian yang terlihat, hal itu tidak menjadi masalah; untuk latar di bawah bagian yang terlihat, gunakan IntersectionObserver untuk memasukkan URL saat elemen mendekati area pandang.

Saat halaman dicetak, peramban memuat semua gambar secara segera terlepas dari loading="lazy" agar salinan cetak tetap lengkap. Anda tidak perlu membuat pengecualian khusus untuk gambar yang dimuat tertunda dalam lembar gaya cetak.

Audit “Defer offscreen images” milik Lighthouse mencantumkan setiap gambar yang seharusnya menggunakan loading="lazy". Penyaringan panel Network berdasarkan “Img” ditambah tampilan “Waterfall” menunjukkan pemuatan bertahap yang dihasilkan pemuatan tertunda—permintaan awal berkurang drastis pada galeri gambar.

Mengapa menetapkan loading="lazy" pada gambar utama di bagian atas halaman dapat merugikan?

loading="lazy" pada elemen <img> dan <iframe> di luar area pandang memberikan peningkatan kinerja hanya dengan satu atribut. Padukan dengan width/height eksplisit (untuk menyediakan ruang), gambar responsif (untuk menyesuaikan tampilan), dan decoding="async" (agar pengguliran tetap lancar). Jangan pernah menerapkannya pada gambar LCP atau apa pun yang terlihat di area pandang awal.