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 tersebut:
Halaman ini membahas detail penerapan pemuatan lambat di browser.
Mengapa pemuatan lambat tingkat browser?
Menurut Arsip HTTP, gambar adalah jenis aset yang paling banyak diminta untuk sebagian besar situs, dan biasanya menggunakan lebih banyak bandwidth daripada resource lainnya. Pada persentil ke-90, situs mengirim gambar lebih dari 5 MB pada desktop dan 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 dapat mengizinkan developer menyertakan perilaku pemuatan lambat, dan banyak developer telah membangun library pihak ketiga untuk menyediakan abstraksi yang lebih mudah 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 prioritas yang berbeda, bergantung pada lokasinya yang terkait dengan area pandang perangkat. Gambar di bawah area pandang dimuat dengan prioritas lebih rendah, tetapi akan tetap diambil saat halaman dimuat.
Anda dapat menggunakan atribut loading
untuk menunda sepenuhnya pemuatan gambar
offscreen:
<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 tampilan.eager
: Perilaku pemuatan default browser, yang sama dengan tidak menyertakan atribut dan artinya gambar dimuat terlepas dari lokasinya di halaman. Ini adalah default, tetapi ada baiknya untuk menetapkan secara eksplisit jika alat Anda otomatis menambahkanloading="lazy"
jika tidak ada nilai eksplisit, atau jika linter Anda mengeluhkan jika tidak ditetapkan 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. Metode ini tidak memuat gambar lebih cepat
daripada gambar lain yang tidak memiliki atribut loading
.
Jika Anda ingin meningkatkan prioritas pengambilan gambar penting (misalnya,
gambar LCP), gunakan Prioritas Pengambilan dengan
fetchpriority="high"
.
Gambar dengan loading="lazy"
dan fetchpriority="high"
masih tertunda saat
berada di luar layar, lalu diambil dengan prioritas tinggi saat hampir berada dalam
area pandang. Kombinasi ini tidak terlalu diperlukan karena browser kemungkinan akan
memuat gambar tersebut dengan prioritas tinggi.
Batas jarak dari area pandang
Semua gambar yang langsung dapat dilihat tanpa men-scroll dimuat secara normal. Gambar yang jauh di bawah area pandang perangkat hanya diambil saat pengguna men-scroll di dekatnya.
Penerapan pemuatan lambat Chromium mencoba memastikan gambar di luar layar dimuat cukup awal sehingga selesai dimuat saat pengguna men-scroll ke gambar dengan mengambilnya 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 default untuk berbagai jenis koneksi efektif di sumber Chromium. Anda dapat bereksperimen dengan nilai minimum yang berbeda ini dengan membatasi jaringan di DevTools.
Penghematan data dan nilai minimum jarak dari area pandang yang ditingkatkan
Pada Juli 2020, Chrome melakukan peningkatan yang signifikan untuk menyelaraskan nilai minimum pemuatan lambat gambar dari area pandang agar dapat lebih memenuhi ekspektasi developer.
Di koneksi cepat (4G), kami mengurangi batas jarak dari area pandang Chrome dari 3000px
menjadi 1250px
, dan pada koneksi yang lebih lambat (3G atau yang lebih rendah), kami mengubah batas dari 4000px
menjadi 2500px
. Perubahan ini mencapai dua hal:
<img loading=lazy>
berperilaku lebih mirip dengan pengalaman yang ditawarkan oleh library pemuatan lambat JavaScript.- Nilai minimum jarak dari area pandang yang baru masih berarti gambar mungkin akan dimuat saat pengguna men-scroll ke gambar tersebut.
Anda dapat menemukan perbandingan antara nilai minimum jarak dari area pandang yang lama dengan yang baru untuk salah satu demo kami terkait koneksi cepat (4G) di bawah:
Ambang batas lama versus ambang baru:
dan batas baru versus LazySizes (library pemuatan lambat JavaScript yang populer):
Memberikan atribut dimensi pada gambar
Meskipun browser memuat gambar, browser tidak segera mengetahui dimensi
gambar, kecuali jika ditentukan secara eksplisit. Agar browser mencadangkan
ruang yang cukup di halaman untuk gambar dan menghindari 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, tetapkan nilainya secara langsung dalam gaya inline:
<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">
Praktik terbaik setelan dimensi berlaku untuk tag <img>
terlepas dari apakah Anda memuatnya dengan lambat atau tidak, tetapi pemuatan lambat dapat membuatnya lebih penting.
Pemuatan lambat di Chromium diterapkan dengan cara yang membuat gambar lebih mungkin
dimuat segera setelah terlihat, tetapi masih ada kemungkinan
gambar tidak akan dimuat pada waktu yang tepat. Jika hal itu terjadi, tidak menentukan width
dan
height
pada gambar akan meningkatkan dampaknya pada Pergeseran Tata Letak Kumulatif. Jika
Anda tidak dapat menentukan dimensi gambar, pemuatan lambat dapat menghemat resource
jaringan dan berisiko mengalami peningkatan pergeseran tata letak.
Dalam sebagian besar skenario, gambar masih dimuat lambat jika Anda tidak menentukan dimensi, tetapi
ada beberapa kasus ekstrem yang harus Anda ketahui. Tanpa width
dan height
yang ditentukan, dimensi gambar akan ditetapkan secara default ke 0×0 piksel. Jika Anda memiliki galeri
gambar, browser mungkin memutuskan bahwa semuanya pas di dalam area pandang di
awal, karena setiap gambar tidak membutuhkan ruang dan tidak ada gambar yang didorong keluar layar. Dalam
hal ini, browser memutuskan untuk memuat semuanya, sehingga halaman dimuat lebih
lambat.
Untuk contoh cara kerja loading
dengan sejumlah besar gambar, lihat demo ini.
Anda juga dapat lambat memuat gambar yang sudah ditentukan menggunakan elemen <picture>
:
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>
Meskipun browser menentukan gambar yang akan dimuat dari salah satu elemen <source>
, Anda hanya perlu menambahkan loading
ke elemen <img>
penggantian.
Selalu muat gambar 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 agar dapat langsung tersedia. Untuk mengetahui informasi selengkapnya, lihat Efek performa dari pemuatan lambat yang terlalu banyak.
Gunakan loading=lazy
hanya untuk gambar di luar area tampilan awal. Browser
tidak dapat memuat gambar secara lambat hingga mengetahui posisi gambar yang seharusnya di halaman,
yang menyebabkan gambar dimuat 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. Hal ini tidak mendapatkan
manfaat pemuatan lambat, tetapi tidak ada dampak negatif jika disertakan.
FAQ
Dapatkah saya memuat gambar di Chrome secara otomatis?
Sebelumnya, Chromium akan otomatis memuat gambar apa pun yang cocok
untuk ditangguhkan jika Mode ringan
diaktifkan di Chrome untuk Android dan atribut loading
tidak
disediakan atau disetel 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, metode ini mungkin berubah di masa mendatang karena browser bereksperimen dengan jarak dan variabel batas yang berbeda.
Dapatkah gambar latar CSS menggunakan atribut loading
?
Tidak, Anda hanya dapat menggunakannya dengan tag <img>
.
Dapatkah loading
berfungsi dengan gambar di area tampilan 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 carousel atau disembunyikan oleh CSS untuk ukuran layar
tertentu. Misalnya, Chrome, Safari, dan Firefox tidak memuat gambar menggunakan gaya visual display: none;
, baik pada elemen gambar maupun di elemen induk. Namun, teknik penyembunyian gambar lainnya, seperti menggunakan gaya visual opacity:0
, masih menyebabkan browser memuat gambar. Selalu uji
implementasi Anda secara menyeluruh untuk memastikan implementasinya berfungsi sebagaimana mestinya.
Chrome 121 mengubah perilaku gambar scroll horizontal seperti carousel. Semua ini sekarang menggunakan batas yang sama dengan scroll vertikal. Artinya, untuk kasus penggunaan carousel, gambar akan dimuat sebelum terlihat di area pandang. Artinya, pemuatan gambar cenderung tidak terlihat oleh pengguna, tetapi mengorbankan lebih banyak download. Gunakan demo Pemuatan Lambat Horizontal untuk membandingkan perilaku di Chrome versus Safari dan Firefox.
Bagaimana jika saya sudah menggunakan library pihak ketiga atau skrip untuk memuat gambar secara lambat?
Dengan dukungan penuh pemuatan lambat yang terintegrasi ke dalam 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 untuk menyediakan polyfill untuk browser yang tidak mendukung atribut, atau memiliki kontrol lebih besar atas kapan pemuatan lambat dipicu.
Bagaimana cara menangani browser yang tidak mendukung pemuatan lambat? {browsers-dont-support}
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 tersebut:
if ('loading' in HTMLImageElement.prototype) {
// supported in browser
} else {
// fetch polyfill/third-party library
}
Misalnya, lazysizes adalah library pemuatan lambat JavaScript
yang populer. Anda dapat mendeteksi dukungan bagi atribut loading
untuk memuat ukuran lambat sebagai library penggantian hanya jika loading
tidak
didukung. Cara kerjanya adalah sebagai berikut:
- Mengganti
<img src>
dengan<img data-src>
untuk menghindari pemuatan cepat di browser yang tidak didukung. Jika atributloading
didukung, tukardata-src
dengansrc
. - 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 tersebut. 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 distandardisasi. Hal ini memungkinkan Anda memuat iframe secara lambat menggunakan atribut
loading
. Untuk mengetahui informasi selengkapnya, lihat Saatnya memuat iframe di luar layar secara lambat.
Bagaimana pemuatan lambat tingkat browser memengaruhi iklan di halaman web?
Semua iklan yang ditampilkan kepada pengguna sebagai gambar atau iframe dimuat dengan lambat seperti gambar atau iframe lainnya.
Bagaimana gambar ditangani saat halaman 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 dalam pendekatan untuk pemuatan lambat gambar di luar layar yang dapat menggunakan batas yang berbeda, memungkinkannya lulus audit Menunda gambar offscreen.
Pemuatan lambat gambar untuk meningkatkan performa
Dukungan browser untuk pemuatan lambat gambar dapat sangat mempermudah Anda meningkatkan performa halaman.
Apakah Anda melihat adanya perilaku yang tidak wajar pada fitur yang diaktifkan di Chrome ini? Laporkan bug!