Memuat Gambar Secara Lazy di 2026: Halaman Lebih Cepat Tanpa Kerusakan LCP

Terakhir diperbarui: June 28, 2026

Lazy loading membantu halaman yang berat dengan gambar terasa lebih cepat karena browser dapat melewati permintaan gambar di bawah lipatan (below-fold) selama render pertama. Jika digunakan sembarangan, fitur ini juga dapat menunda satu gambar yang sangat dibutuhkan pengguna segera: hero, foto utama produk, atau sampul artikel yang menjadi elemen Largest Contentful Paint.

Panduan ini menunjukkan tempat menggunakan loading="lazy" secara native, di mana harus menjaga gambar tetap eager, dan cara menerbitkan gambar yang dimuat secara lazy tanpa merusak Core Web Vitals, SEO, atau pengiriman CDN.

Jawaban cepat: bagaimana seharusnya Anda melakukan lazy load pada gambar?

Gunakan lazy loading hanya untuk gambar yang dimulai di luar viewport pertama. Jaga gambar LCP yang mungkin eager, sediakan lebar dan tinggi (width and height) untuk setiap gambar, dan sajikan file WebP atau AVIF responsif dari URL CDN yang dapat di-cache.

Untuk HTML biasa, implementasi paling sederhana adalah loading="lazy" pada elemen <img> di bawah lipatan. Jangan menambahkannya ke gambar hero, gambar utama produk, gambar artikel pertama yang terlihat, atau gambar apa pun yang harus muncul sebelum pengguna menggulir (scroll).

Jika ragu, uji halaman tersebut di Lighthouse atau Chrome DevTools. Jika sebuah gambar lazy dilaporkan sebagai elemen LCP, hapus lazy loading dari gambar itu dan pertimbangkan fetchpriority="high".

Apa sebenarnya yang diubah oleh lazy loading?

Lazy loading mengubah waktu permintaan (request timing). Browser dapat menunggu untuk mengunduh gambar sampai pengguna cukup dekat untuk melihatnya. Itu menghemat bandwidth pada halaman panjang, mengurangi tekanan permintaan awal, dan memberi CSS, font, skrip, dan gambar yang terlihat kesempatan yang lebih baik untuk selesai terlebih dahulu.

Ini tidak membuat gambar berukuran besar menjadi kecil. JPEG 2400 px masih boros setelah akhirnya dimuat. Pasangkan lazy loading dengan resizing, kompresi, dan markup responsif sejak awal. Image Compression Deep Dive membahas pengurangan byte, sementara Mobile Image Optimization Guide membahas srcset dan ukuran tampilan seluler.

Fitur browser native didokumentasikan oleh MDN sebagai properti loading pada gambar dan iframe di HTMLImageElement.loading. Untuk situs modern, utamakan fitur browser ini sebelum menambahkan pustaka lazy-loading JavaScript.

Gambar apa yang tidak boleh dilakukan lazy load?

Jangan lakukan lazy load pada gambar yang menentukan kesan pertama halaman. Kesalahan umum adalah menerapkan loading="lazy" ke setiap gambar dalam template CMS karena terlihat seperti perbaikan kinerja universal.

Jaga gambar-gambar berikut tetap eager:

1. Gambar hero utama.
2. Gambar produk di atas tombol beli.
3. Gambar pertama dalam artikel ketika muncul dekat bagian atas pada perangkat seluler.
4. Logo atau tangkapan layar antarmuka yang harus terlihat sebelum interaksi.
5. Gambar apa pun yang dilaporkan Chrome sebagai elemen LCP.

Panduan Core Web Vitals Google memperlakukan LCP sebagai waktu render dari elemen konten terbesar yang terlihat di viewport; lihat Largest Contentful Paint. Ketika elemen itu adalah gambar, menunda permintaannya adalah salah satu cara tercepat untuk membuat metrik tersebut memburuk.

Gunakan aturan ini untuk template: slot gambar pertama harus default ke eager, dan blok gambar berulang selanjutnya harus default ke lazy. Kemudian timpa berdasarkan jenis halaman ketika tangkapan layar seluler menunjukkan viewport pertama yang berbeda.

Bagaimana Anda mengimplementasikan lazy loading di HTML?

Gunakan markup native terlebih dahulu:

<img
  src="/images/gallery-chair.webp"
  alt="Kursi kenari difoto dari depan untuk galeri produk"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Atribut width dan height sama pentingnya dengan loading. Mereka memungkinkan browser mencadangkan ruang tata letak sebelum file tiba. Tanpa ruang cadangan, gambar yang tertunda dapat mendorong teks ke bawah halaman dan menciptakan Cumulative Layout Shift.

Untuk gambar responsif, pertahankan lazy loading pada <img> fallback:

<picture>
  <source type="image/avif" srcset="/images/gallery-chair-800.avif 800w, /images/gallery-chair-1200.avif 1200w">
  <source type="image/webp" srcset="/images/gallery-chair-800.webp 800w, /images/gallery-chair-1200.webp 1200w">
  <img
    src="/images/gallery-chair-1200.webp"
    alt="Kursi santai kenari dengan bantal hijau di latar belakang studio putih"
    width="1200"
    height="800"
    sizes="(max-width: 700px) 92vw, 680px"
    loading="lazy"
  >
</picture>

Untuk gambar LCP yang mungkin, gunakan pola sebaliknya:

<img
  src="/images/product-hero.webp"
  alt="Kursi santai kenari dengan bantal hijau di latar belakang studio putih"
  width="1600"
  height="1000"
  fetchpriority="high"
>

Artikel Google tentang browser-level image lazy loading merekomendasikan lazy loading native dan memperingatkan bahwa gambar di viewport yang terlihat pertama harus dimuat secara normal. Saran itu masih merupakan baseline terbersih untuk publikasi tahun 2026.

Bagaimana lazy loading memengaruhi SEO?

Lazy loading aman bagi SEO ketika konten penting tetap dapat ditemukan di halaman yang dirender. Google dapat memproses JavaScript modern, tetapi SEO gambar menjadi lebih lemah ketika URL gambar akhir disembunyikan di balik interaksi, skrip scroll-only, cookie, atau placeholder rusak.

Gunakan markup <img> atau <picture> normal untuk gambar konten. Pertahankan teks alt yang deskriptif, URL CDN yang dapat dirayapi, dan salinan di sekitarnya yang menjelaskan gambar tersebut. Image SEO Guide 2026 memiliki alur kerja crawl dan alt-text yang lebih luas.

Panduan JavaScript SEO Google Search Central untuk lazy loading mengatakan konten harus dimuat saat terlihat di viewport dan tidak boleh bergantung pada tindakan pengguna seperti mengklik atau mengetik; lihat Fix lazy-loaded content. Itu adalah pagar pembatas yang berguna untuk galeri gambar, tab, dan halaman infinite scroll.

Berapa banyak peningkatan kinerja yang dapat dihemat oleh lazy loading?

Penghematannya tergantung pada berapa banyak gambar yang berada di bawah viewport pertama dan seberapa besar file-file tersebut. Pada artikel panjang, browser mungkin menghindari pengunduhan sebagian besar gambar badan selama pemuatan awal. Pada halaman produk pendek dengan satu foto terlihat, lazy loading mungkin tidak menghemat apa-apa.

Saya mengenkode empat grafis dalam artikel ini sebagai file WebP lokal pada ukuran publikasi. Aset akhirnya adalah 25 KB hingga 36 KB masing-masing, jadi lazy loading tidak menyembunyikan masalah byte besar di sini. Keuntungan yang lebih besar berasal dari waktu permintaan: sampul tersedia segera, dan diagram selanjutnya dapat menunggu sampai pembaca menggulir.

Gunakan urutan ini sebelum menyalahkan lazy loading:

1. Ubah ukuran gambar sumber ke slot tampilan nyata terbesar.
2. Konversi foto dan grafis campuran menjadi WebP atau AVIF.
3. Tambahkan srcset dan sizes untuk tata letak seluler.
4. Cadangkan dimensi atau rasio aspek gambar.
5. Jaga gambar LCP tetap eager.
6. Hanya lakukan lazy load pada gambar di bawah lipatan (below-fold).
7. Publikasikan melalui CDN dengan caching jangka panjang.
8. Uji halaman pada viewport seluler yang sempit.

Jika Anda membutuhkan urutan yang lebih luas, Complete Image Optimization Checklist adalah pemeriksaan akhir yang baik sebelum publikasi. Untuk aturan CDN dan header cache, gunakan Image CDN Guide.

Apa yang harus Anda uji sebelum menerbitkan?

Uji halaman yang dirender, tidak hanya kodenya. Ambang batas browser untuk lazy loading native adalah detail implementasi, dan halaman yang berfungsi di desktop masih dapat menunda gambar yang salah pada viewport seluler 390 px.

Jalankan pemeriksaan publikasi ini:

• Gambar sampul atau hero dimuat secara eager.
• Gambar LCP yang mungkin tidak ditandai loading="lazy".
• Setiap gambar memiliki width dan height atau kontainer rasio aspek yang stabil.
• Gambar di bawah lipatan menggunakan loading="lazy".
• Gambar responsif menyertakan nilai sizes yang realistis.
• URL gambar CDN mengembalikan HTTP 200.
• Nama file menjelaskan gambar yang terlihat.
• Teks alt spesifik dan tidak dipenuhi kata kunci.
• Lighthouse atau PageSpeed Insights tidak menandai gambar lazy sebagai LCP.
• Tangkapan layar seluler tidak menunjukkan celah kosong besar atau lompatan tata letak.

Untuk tim pengembang, tambahkan aturan template: hanya komponen gambar badan yang berulang (repeated) yang harus default ke lazy load. Komponen hero, media utama produk, dan gambar editorial di atas lipatan harus memerlukan keputusan eksplisit.

Daftar periksa lazy-loading untuk 2026

Lazy loading bekerja paling baik sebagai bagian kecil dari image pipeline. Itu harus datang setelah pemeriksaan format, dimensi, prioritas, aksesibilitas, dan CDN.

Sebelum dikirim, periksa viewport pertama dan ajukan satu pertanyaan praktis: apakah halaman masih masuk akal jika setiap gambar di bawah lipatan menunggu sampai digulir? Jika ya, lazy loading mungkin membantu. Jika halaman dimulai dengan slot hero kosong, perbaiki prioritas sebelum menyentuh apa pun.