Dukungan Browser
- 77
- 79
- 75
- 15,4
Anda dapat menggunakan atribut loading
untuk memuat gambar secara lambat tanpa perlu
menulis kode pemuatan lambat kustom atau menggunakan library JavaScript terpisah. Berikut adalah
demo fitur:
Halaman ini membahas detail penerapan pemuatan lambat di browser.
Mengapa pemuatan lambat tingkat browser?
Menurut HTTP Archive, gambar adalah jenis aset yang paling banyak diminta untuk sebagian besar situs, dan biasanya membutuhkan lebih banyak {i>bandwidth <i} daripada sumber daya lainnya. Pada persentil ke-90, situs mengirim gambar berukuran lebih dari 5 MB melalui desktop dan perangkat seluler.
Sebelumnya, ada dua cara untuk menunda pemuatan gambar di luar layar:
- Menggunakan Intersection Observer API
- Menggunakan pengendali peristiwa
scroll
,resize
, atauorientationchange
Kedua opsi tersebut memungkinkan developer menyertakan perilaku pemuatan lambat, dan banyak developer telah membangun library pihak ketiga untuk menyediakan abstraksi yang lebih mudah lagi untuk digunakan.
Namun, dengan pemuatan lambat yang didukung langsung oleh browser, library eksternal tidak diperlukan. Pemuatan lambat tingkat browser juga memastikan pemuatan gambar tetap berfungsi meskipun klien menonaktifkan JavaScript. Namun perhatikan bahwa pemuatan hanya ditunda bila JavaScript diaktifkan.
Atribut loading
Chrome memuat gambar dengan berbagai prioritas, bergantung pada lokasinya relatif terhadap area pandang perangkat. Gambar di bawah area pandang dimuat dengan prioritas yang lebih rendah, tetapi gambar tersebut tetap diambil saat halaman dimuat.
Anda dapat menggunakan atribut loading
untuk sepenuhnya menunda pemuatan offscreen
gambar:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
Berikut adalah nilai yang didukung untuk atribut loading
:
lazy
: Menunda pemuatan resource hingga mencapai jarak yang dihitung dari area pandang.eager
: Perilaku pemuatan default browser, yang sama dengan tidak termasuk atributnya dan artinya gambar dimuat di mana pun letaknya yang berada di halaman. Ini adalah setelan default, tetapi ini berguna untuk mengatur secara eksplisit jika alat Anda secara otomatis menambahkanloading="lazy"
saat eksplisit, atau jika linter Anda mengeluh jika tidak disetel secara eksplisit.
Hubungan antara atribut loading
dan prioritas pengambilan
Nilai eager
adalah petunjuk untuk memuat gambar seperti biasa, tanpa menunda
pemuatan lebih lanjut jika gambar berada di luar layar. Gambar tidak dimuat lebih cepat
daripada gambar lain yang tidak memiliki atribut loading
.
Jika Anda ingin meningkatkan prioritas pengambilan gambar penting (misalnya,
gambar LCP), gunakan Fetch Priority dengan
fetchpriority="high"
.
Gambar dengan loading="lazy"
dan fetchpriority="high"
masih tertunda saat
dikirim di luar layar, lalu diambil dengan
prioritas tinggi ketika hampir dalam
area pandang. Kombinasi ini tidak benar-benar diperlukan
karena browser akan
mungkin memuat gambar itu
dengan prioritas tinggi.
Nilai minimum jarak dari area pandang
Semua gambar yang langsung terlihat tanpa men-scroll akan dimuat secara normal. Gambar-gambar jauh di bawah area pandang perangkat hanya diambil jika pengguna men-scroll di dekatnya.
Implementasi pemuatan lambat Chromium mencoba memastikan bahwa gambar di balik layar dimuat cukup awal sehingga selesai dimuat saat pengguna men-scroll dengan mengambilnya jauh sebelum terlihat di area pandang.
Ambang batas jarak bervariasi bergantung pada faktor berikut:
- Jenis resource gambar yang diambil
- Jenis koneksi efektif
Anda dapat menemukan nilai {i>default<i} untuk berbagai jenis koneksi efektif di sumber Chromium. Anda dapat bereksperimen dengan ambang batas yang berbeda ini dengan membatasi jaringan di DevTools.
Peningkatan penghematan data dan nilai minimum jarak dari area pandang
Pada Juli 2020, Chrome melakukan peningkatan signifikan untuk menyesuaikan nilai minimum jarak dari area pandang pemuatan lambat gambar agar dapat memenuhi ekspektasi developer dengan lebih baik.
Pada koneksi cepat (4G), kami mengurangi nilai minimum jarak dari area pandang Chrome dari 3000px
menjadi 1250px
, dan pada koneksi yang lebih lambat (3G atau lebih rendah), kami mengubah nilai minimum dari 4000px
menjadi 2500px
. Perubahan ini mencapai dua hal:
<img loading=lazy>
berperilaku lebih dekat dengan pengalaman yang ditawarkan oleh library pemuatan lambat JavaScript.- Ambang batas jarak dari area pandang yang baru tetap berarti gambar mungkin akan dimuat saat pengguna men-scroll ke gambar tersebut.
Anda dapat menemukan perbandingan antara batas jarak dari area pandang lama dengan yang baru untuk salah satu demo kami tentang koneksi cepat (4G) di bawah ini:
Nilai minimum lama versus nilai minimum baru:
![Ambang batas baru dan yang ditingkatkan untuk pemuatan lambat gambar, mengurangi ambang batas jarak-dari-area pandang untuk koneksi cepat dari 3000 px menjadi 1250 px.](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-and-improved-thresho-a20c669983f73.png?authuser=6&hl=id)
dan batas baru versus LazySizes (library pemuatan lambat JavaScript yang populer):
![Batas jarak dari area pandang yang baru di Chrome memuat 90 KB gambar dibandingkan dengan pemuatan LazySizes dalam 70 KB dalam kondisi jaringan yang sama.](https://web.dev/static/articles/browser-level-image-lazy-loading/image/the-distance-viewport-b99ee22471f28.png?authuser=6&hl=id)
Memberikan atribut dimensi untuk gambar Anda
Selagi browser memuat gambar, browser tidak langsung mengetahui
dimensi kustom, kecuali jika
ditetapkan secara eksplisit. Untuk memungkinkan browser memesan
cukup ruang pada halaman untuk gambar, dan hindari pergeseran tata letak yang mengganggu,
sebaiknya tambahkan atribut width
dan height
ke semua tag <img>
.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
Atau, tentukan nilainya secara langsung dalam gaya inline:
<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
Praktik terbaik untuk menyetel dimensi berlaku untuk tag <img>
, terlepas dari
baik Anda pemuatannya dengan lambat, tetapi pemuatan lambat dapat menjadikannya lebih penting.
Pemuatan lambat di Chromium diterapkan dengan cara yang membuat gambar lebih mungkin
dimuat begitu terlihat, tetapi masih ada kemungkinan
mereka tidak akan dimuat
di waktu yang tepat. Jika itu terjadi, jangan menentukan width
dan
height
pada gambar akan meningkatkan dampaknya pada Pergeseran Tata Letak Kumulatif. Jika
Anda tidak dapat menentukan image dimensi kustom, pemuatan lambat dapat menghemat jaringan
resource pada risiko peningkatan perubahan tata letak.
Di sebagian besar skenario, gambar masih lambat dimuat jika Anda tidak menentukan dimensi, tetapi
ada beberapa kasus ekstrem yang
harus Anda perhatikan. Tanpa width
dan height
ditetapkan, dimensi gambar secara default ditetapkan ke 0×0 piksel. Jika Anda memiliki galeri berisi
gambar, browser mungkin memutuskan bahwa semuanya muat di dalam area pandang di
dimulai, karena setiap gambar tidak membutuhkan ruang dan tidak ada gambar yang didorong ke luar layar. Di beberapa
dalam hal ini, browser memutuskan untuk memuat semuanya, sehingga halaman dapat dimuat lebih
perlahan.
Untuk contoh cara kerja loading
dengan gambar dalam jumlah besar, lihat
demo ini.
Anda juga dapat memuat gambar yang telah ditentukan menggunakan elemen <picture>
secara lambat:
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>
Meskipun browser memutuskan gambar mana yang akan dimuat dari salah satu <source>
Anda hanya perlu menambahkan loading
ke elemen <img>
penggantian.
Selalu memuat gambar dengan segera yang terlihat di area pandang pertama
Untuk gambar yang terlihat saat pengguna pertama kali memuat halaman, dan terutama untuk gambar LCP, gunakan pemuatan cepat default browser sehingga tersedia saat itu juga. Untuk mengetahui informasi selengkapnya, lihat Efek performa dari terlalu banyak pemuatan lambat.
Gunakan loading=lazy
hanya untuk gambar yang berada di luar area pandang awal. Browser
tidak dapat menjalankan lazy-load gambar hingga tahu di mana gambar seharusnya berada di halaman,
yang menyebabkannya
memuat lebih lambat.
<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">
<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">
{i>Graceful degradation<i}
Browser yang tidak mendukung atribut loading
akan mengabaikannya. Mereka tidak mendapatkan
manfaat pemuatan lambat, tetapi tidak ada dampak negatif dari pemuatannya.
FAQ
Dapatkah saya memuat gambar secara otomatis dengan lambat di Chrome?
Sebelumnya, Chromium otomatis memuat gambar yang sangat cocok secara lambat
ke penundaan jika Mode ringan
diaktifkan di Chrome untuk Android dan atribut loading
tidak
disediakan atau ditetapkan ke loading="auto"
. Namun,
Mode ringan dan loading="auto"
sudah tidak digunakan lagi
dan tidak ada rencana untuk menyediakan pemuatan lambat gambar secara otomatis di Chrome.
Dapatkah saya mengubah seberapa dekat gambar dengan area pandang sebelum dimuat?
Nilai ini di-hardcode dan tidak dapat diubah melalui API. Namun, mereka mungkin berubah di masa mendatang karena browser bereksperimen dengan nilai minimum yang berbeda jarak dan variabel.
Dapatkah gambar latar CSS menggunakan atribut loading
?
Tidak, Anda hanya dapat menggunakannya dengan tag <img>
.
Dapatkah loading
berfungsi dengan gambar di area pandang yang tidak langsung terlihat?
Menggunakan loading="lazy"
dapat mencegah gambar dimuat saat tidak
terlihat, tetapi berada dalam jarak yang dihitung.
Gambar ini mungkin berada di belakang korsel atau disembunyikan oleh CSS untuk layar tertentu
ukuran. Misalnya, Chrome, Safari, dan Firefox tidak memuat gambar menggunakan
Gaya display: none;
, baik pada elemen gambar atau di induk
. Namun, teknik penyembunyian gambar lainnya, seperti menggunakan opacity:0
gaya visual, tetap menyebabkan browser memuat gambar. Selalu uji
implementasi secara menyeluruh untuk memastikannya
berjalan sebagaimana mestinya.
Chrome 121 mengubah perilaku untuk gambar scroll horizontal seperti carousel. Platform ini sekarang menggunakan nilai minimum yang sama seperti scroll vertikal. Ini berarti untuk kasus penggunaan carousel, gambar akan dimuat sebelum terlihat di area pandang. Ini berarti pemuatan gambar cenderung tidak terlihat oleh pengguna, tetapi mengakibatkan lebih banyak download. Gunakan demo Pemuatan Lambat Horizontal untuk membandingkan perilaku di Chrome dengan Safari dan Firefox.
Bagaimana jika saya sudah menggunakan library atau skrip pihak ketiga untuk memuat gambar secara lambat?
Dengan dukungan penuh atas pemuatan lambat yang tertanam di browser modern, Anda mungkin tidak memerlukan library atau skrip pihak ketiga untuk memuat gambar secara lambat.
Salah satu alasan untuk terus menggunakan library pihak ketiga bersama loading="lazy"
adalah menyediakan polyfill untuk browser yang tidak mendukung atribut tersebut, atau untuk
memiliki kontrol lebih besar saat pemuatan lambat dipicu.
Bagaimana cara menangani browser yang tidak mendukung pemuatan lambat?
Buat polyfill atau gunakan library pihak ketiga untuk memuat gambar secara lambat di situs Anda.
Anda dapat menggunakan properti loading
untuk mendeteksi apakah browser mendukung
fitur:
if ('loading' in HTMLImageElement.prototype) {
// supported in browser
} else {
// fetch polyfill/third-party library
}
Misalnya, lazysizes adalah
Library pemuatan lambat JavaScript. Anda dapat mendeteksi dukungan untuk loading
untuk memuat lazysizes sebagai library penggantian hanya jika loading
tidak
didukung. Cara kerjanya adalah sebagai berikut:
- Ganti
<img src>
dengan<img data-src>
untuk menghindari pemuatan cepat di browser yang tidak didukung. Jika atributloading
didukung, tukardata-src
untuksrc
. - Jika
loading
tidak didukung, muat penggantian dari lazysizes dan mulai menggunakan classlazyload
untuk menunjukkan gambar mana yang akan dimuat dengan lambat:
<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">
<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">
<script>
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
Berikut adalah demo dari pola ini. Coba di browser lama untuk melihat cara kerja penggantian.
Apakah pemuatan lambat untuk iframe juga didukung di browser?
Dukungan Browser
- 77
- 79
- 121
- 16,4
<iframe loading=lazy>
juga telah distandarisasi. Hal ini memungkinkan Anda memuat iframe dengan lambat menggunakan loading
. Untuk informasi selengkapnya, lihat Saatnya memuat iframe di luar layar dengan lambat!
Bagaimana pemuatan lambat tingkat browser memengaruhi iklan di halaman web?
Semua iklan yang ditampilkan kepada pengguna sebagai gambar atau iframe lambat dimuat sama seperti iklan lainnya gambar atau iframe.
Bagaimana gambar ditangani saat laman web dicetak?
Semua gambar dan iframe akan langsung dimuat saat halaman dicetak. Lihat masalah #875403 untuk mengetahui detailnya.
Apakah Lighthouse mengenali pemuatan lambat tingkat browser?
Lighthouse 6.0 dan faktor yang lebih tinggi pendekatan untuk pemuatan lambat gambar di balik layar yang dapat menggunakan nilai minimum yang berbeda, membiarkan mereka meneruskan Tunda gambar di luar layar.
Muat lambat gambar untuk meningkatkan performa
Dukungan browser untuk pemuatan lambat gambar dapat mempermudah Anda untuk menyempurnakan tingkat tinggi.
Apakah Anda menemukan perilaku yang tidak biasa pada fitur yang diaktifkan di Chrome? Laporkan bug!