Memuatkan Imej Secara Malas pada 2026: Halaman Lebih Pantas Tanpa Kerosakan LCP

Dikemas kini pada: June 28, 2026

Lazy loading membantu menjadikan halaman yang banyak imej terasa lebih pantas kerana pelayar boleh melangkau permintaan imej di bawah lipatan semasa render pertama. Jika digunakan secara cuai, ia juga boleh menangguhkan satu imej yang diperlukan pengguna dengan segera: hero, foto utama produk, atau kulit artikel yang menjadi elemen Largest Contentful Paint.

Panduan ini menunjukkan di mana untuk menggunakan loading="lazy" asli, di mana untuk mengekalkan imej yang 'eager', dan cara menerbitkan imej muat malas tanpa merosakkan Core Web Vitals, SEO, atau penghantaran CDN.

Jawapan ringkas: bagaimana anda patut melakukan lazy loading imej?

Gunakan lazy loading hanya untuk imej yang bermula di luar viewport pertama. Kekalkan imej LCP yang mungkin sebagai eager, rizabkan lebar dan tinggi untuk setiap imej, dan sediakan fail WebP atau AVIF responsif dari URL CDN yang boleh di-cache.

Untuk HTML biasa, pelaksanaan paling ringkas ialah loading="lazy" pada elemen <img> di bawah lipatan (below-fold). Jangan tambahkan ia kepada imej hero, imej utama produk, imej artikel yang kelihatan pertama, atau sebarang imej yang mesti muncul sebelum pengguna menatal.

Apabila ragu-ragu, uji halaman itu dalam Lighthouse atau Chrome DevTools. Jika imej lazy dilaporkan sebagai elemen LCP, buang lazy loading daripada imej itu dan pertimbangkan fetchpriority="high".

Apa yang sebenarnya diubah oleh lazy loading?

Lazy loading mengubah masa permintaan. Pelayar boleh menunggu untuk memuat turun imej sehingga pengguna cukup dekat untuk melihatnya. Ini menjimatkan jalur lebar pada halaman yang panjang, mengurangkan tekanan permintaan awal, dan memberi peluang yang lebih baik kepada CSS, fon, skrip, dan imej yang kelihatan untuk selesai dahulu.

Ia tidak menjadikan imej bersaiz besar itu kecil. Sebuah JPEG 2400 px masih membazir selepas ia dimuatkan akhirnya. Pasangkan lazy loading dengan pengecilan saiz, mampatan, dan markup responsif dari awal. Image Compression Deep Dive meliputi pengurangan byte, manakala Mobile Image Optimization Guide meliputi srcset dan saiz paparan mudah alih.

Ciri pelayar asli ini didokumenkan oleh MDN sebagai sifat loading pada imej dan iframes dalam HTMLImageElement.loading. Untuk laman web moden, utamakan ciri pelayar ini sebelum menambah perpustakaan lazy-loading JavaScript.

Imej manakah yang tidak seharusnya dimuatkan secara malas (lazy load)?

Jangan muatkan secara malas imej yang menentukan tanggapan pertama halaman. Kesilapan biasa ialah menggunakan loading="lazy" pada setiap imej dalam templat CMS kerana ia kelihatan seperti penyelesaian prestasi universal.

Kekalkan imej-imej ini sebagai segera (eager):

1. Imej hero utama.
2. Imej produk di atas butang beli.
3. Imej pertama dalam artikel apabila ia muncul berhampiran bahagian atas pada peranti mudah alih.
4. Logo atau tangkapan skrin antara muka yang mesti kelihatan sebelum interaksi.
5. Sebarang imej yang dilaporkan oleh Chrome sebagai elemen LCP.

Panduan Core Web Vitals Google menganggap LCP sebagai masa render elemen kandungan terbesar yang kelihatan dalam viewport; lihat Largest Contentful Paint. Apabila elemen itu ialah imej, melambatkan permintaan untuknya adalah salah satu cara terpantas untuk merosakkan metrik tersebut.

Gunakan peraturan ini untuk templat: slot imej pertama harus lalai kepada segera (eager), dan blok imej berulang yang kemudian harus lalai kepada malas (lazy). Kemudian timpa mengikut jenis halaman apabila tangkapan skrin mudah alih menunjukkan viewport pertama yang berbeza.

Bagaimana cara melaksanakan lazy loading dalam HTML?

Gunakan markup asli dahulu:

<img
  src="/images/gallery-chair.webp"
  alt="Walnut chair photographed from the front for a product gallery"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Atribut width dan height sama pentingnya dengan loading. Ia membenarkan pelayar memperuntukkan ruang susun atur sebelum fail tiba. Tanpa ruang yang diperuntukkan, imej yang tertunda boleh menolak teks ke bawah halaman dan mencipta Cumulative Layout Shift.

Untuk imej responsif, kekalkan lazy loading pada <img> sandaran:

<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="Walnut chair photographed from the front for a product gallery"
    width="1200"
    height="800"
    sizes="(max-width: 700px) 92vw, 680px"
    loading="lazy"
  >
</picture>

Untuk imej LCP yang berkemungkinan besar, gunakan corak bertentangan:

<img
  src="/images/product-hero.webp"
  alt="Walnut lounge chair with green cushion on a white studio background"
  width="1600"
  height="1000"
  fetchpriority="high"
>

Artikel Google mengenai browser-level image lazy loading mengesyorkan lazy loading asli dan memberi amaran bahawa imej dalam viewport yang kelihatan pertama harus dimuatkan secara normal. Nasihat itu masih garis dasar paling bersih untuk penerbitan 2026.

Bagaimana pemuatan malas (lazy loading) mempengaruhi SEO?

Pemuatan malas aman untuk SEO apabila kandungan penting kekal boleh ditemui dalam halaman yang dirender. Google boleh memproses JavaScript moden, tetapi SEO imej menjadi lebih lemah apabila URL imej akhir disembunyikan di sebalik interaksi, skrip hanya tatal (scroll-only), cookies, atau placeholder yang rosak.

Gunakan penanda <img> atau <picture> biasa untuk imej kandungan. Kekalkan teks alt yang deskriptif, URL CDN yang boleh di-crawl, dan salinan sekeliling yang menerangkan imej tersebut. Image SEO Guide 2026 mempunyai aliran kerja crawl dan alt-text yang lebih luas.

Panduan SEO JavaScript Google Search Central untuk pemuatan malas menyatakan kandungan harus dimuatkan apabila kelihatan dalam viewport dan tidak bergantung pada tindakan pengguna seperti mengklik atau menaip; lihat Fix lazy-loaded content. Ini adalah kawalan keselamatan yang berguna untuk galeri imej, tab, dan halaman tatal tanpa had (infinite scroll).

Berapa banyak prestasi yang boleh dijimatkan oleh lazy loading?

Penjimatan bergantung pada berapa banyak imej yang berada di bawah viewport pertama dan betapa besar fail-fail tersebut. Pada artikel yang panjang, pelayar mungkin mengelakkan memuat turun kebanyakan imej badan semasa muat awal. Pada halaman produk pendek dengan satu foto yang kelihatan, lazy loading mungkin menjimatkan hampir tiada apa-apa.

Saya menyulitkan empat grafik dalam artikel ini sebagai fail WebP tempatan pada saiz penerbitan. Aset akhir adalah 25 KB hingga 36 KB setiap satu, jadi lazy loading tidak menyembunyikan masalah bait yang besar di sini. Keuntungan yang lebih besar datang daripada masa permintaan: kulit hadapan tersedia serta-merta, dan rajah yang kemudian boleh menunggu sehingga pembaca menggulir (scroll).

Gunakan susunan ini sebelum menyalahkan lazy loading:

1. Saizkan imej sumber kepada slot paparan sebenar yang terbesar.
2. Tukarkan foto dan grafik campuran kepada WebP atau AVIF.
3. Tambah srcset dan sizes untuk susun atur mudah alih (mobile).
4. Rizabkan dimensi imej atau nisbah aspek.
5. Kekalkan imej LCP yang sedia (eager).
6. Muatkan secara malas (lazy load) hanya imej di bawah lipatan (below-fold).
7. Terbitkan melalui CDN dengan caching jangka hayat panjang.
8. Uji halaman pada viewport mudah alih yang sempit.

Jika anda memerlukan urutan yang lebih luas, Senarai Semak Pengoptimuman Imej Lengkap adalah semakan akhir yang baik sebelum menerbitkan. Untuk peraturan CDN dan cache headers, gunakan Panduan CDN Imej.

Apa yang perlu anda uji sebelum menerbitkan?

Uji halaman yang dirender, bukan hanya kodnya. Ambang pelayar untuk lazy loading asli adalah butiran pelaksanaan, dan halaman yang berfungsi pada desktop masih boleh menangguhkan imej yang salah pada paparan 390 px mudah alih.

Lakukan pemeriksaan penerbitan ini:

• Imej utama atau hero mesti memuatkan dengan segera.
• Imej LCP yang mungkin tidak ditandakan loading="lazy".
• Setiap imej mempunyai width dan height atau bekas nisbah aspek yang stabil.
• Imej di bawah lipatan menggunakan loading="lazy".
• Imej responsif termasuk nilai sizes yang realistik.
• URL imej CDN mengembalikan HTTP 200.
• Nama fail menerangkan imej yang kelihatan.
• Teks alt adalah spesifik dan tidak dipenuhi dengan kata kunci.
• Lighthouse atau PageSpeed Insights tidak menandakan imej malas sebagai LCP.
• Tangkapan skrin mudah alih menunjukkan tiada jurang kosong besar atau lompatan susun atur.

Untuk pasukan pembangun, tambahkan peraturan templat: hanya komponen imej badan yang berulang harus dimuatkan secara malas secara lalai. Komponen hero, media utama produk, dan imej editorial di atas lipatan perlu memerlukan keputusan eksplisit.

Senarai Semak Pemuatan Malas untuk 2026

Pemuatan malas berfungsi paling baik sebagai sebahagian kecil daripada saluran paip imej. Ia harus datang selepas pemeriksaan format, dimensi, keutamaan, aksesibiliti, dan CDN.

Sebelum diterbitkan, periksa viewport pertama dan tanya satu soalan praktikal: adakah halaman itu masih masuk akal jika setiap imej di bawah lipatan menunggu sehingga skrol? Jika ya, pemuatan malas mungkin membantu. Jika halaman bermula dengan slot hero kosong, betulkan keutamaan sebelum menyentuh apa-apa perkara lain.