Images far below the initial viewport can wait until a reader scrolls near them. Native loading="lazy" lets the browser defer those downloads without a JavaScript observer.

<img src="diagram.webp" alt="A simple network diagram" loading="lazy" width="1200" height="800">

Jangan malas memuat gambar penting pertama

  • Use loading="eager" or omit lazy loading for the likely largest contentful image.
  • Berikan lebar dan tinggi, atau rasio aspek, sehingga tata letak menyediakan ruang sebelum file tiba.
  • Gunakan sumber responsif ketika tersedia beberapa ukuran gambar.

Ukur di halaman sebenarnya

Browser memilih waktu untuk mengambil gambar lambat, jadi jangan memperlakukannya sebagai jadwal jaringan yang tepat. Periksa prioritas pemuatan gambar konten utama dan pastikan gambar yang lebih rendah tidak menggeser teks saat muncul.

Tujuannya adalah untuk menghindari pengunduhan awal yang tidak perlu sekaligus melindungi tampilan pertama yang bermakna. Terapkan pemuatan lambat secara selektif, bukan sebagai aturan umum untuk setiap gambar.