Bagaimana cara kerja pemuatan malas asli gambar/iframe?

Question

Accepted Answer

Atribut `loading="lazy"` memberitahu browser untuk **menangguhkan pemuatan** gambar atau iframe hingga akan memasuki viewport — menghemat bandwidth dan mempercepat beban awal, tanpa JavaScript. ```html

``` ## Cara berperilakunya - **`lazy`** — muatkan hanya saat scroll membawanya dekat viewport. - **`eager`** (default) — muatkan segera, terlepas dari posisi. Browser menggunakan margin (memuat sedikit sebelum elemen scroll ke tampilan) jadi gambar biasanya siap pada saat pengguna melihatnya. ## Pasangan penting: atur width/height untuk menghindari pergeseran tata letak ```html

``` Tanpa dimensi (atau `aspect-ratio`), gambar dimuat malas tidak memiliki ruang cadangan, jadi saat dimuat halaman **melompat** — merusak Cumulative Layout Shift (CLS). Selalu cadangkan ruang. ## Jangan muat malas konten di atas lipatan ```html

``` Pemuatan malas gambar **Largest Contentful Paint** sebenarnya *merusak* kinerja — menunda piksel terpenting. Muat malas hanya media layar-luar. ## Sebelum asli: IntersectionObserver ```js // the old manual approach native lazy-loading replaced const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; }); }); ``` Pemuatan malas asli `loading="lazy"` menghilangkan kebutuhan ini dalam banyak kasus (meskipun IntersectionObserver masih berguna untuk logika khusus). ## Mengapa penting Pemuatan malas asli mengurangi byte awal dan permintaan untuk halaman panjang dengan banyak gambar — kemenangan mobile besar — gratis. Nuansa penting: cadangkan dimensi untuk melindungi CLS, dan pertahankan konten di atas lipatan/LCP gambar eager (bahkan `fetchpriority="high"`) agar konten penting tetap memuat cepat.