Pemuatan lambat gambar tingkat browser untuk web

Pemuatan lambat bawaan akhirnya hadir.

Dukungan tingkat browser untuk pemuatan gambar lambat kini didukung di web. Video ini menampilkan demo fitur:

Anda dapat menggunakan atribut loading untuk memuat gambar secara lambat tanpa perlu menulis kode pemuatan lambat kustom atau menggunakan library JavaScript terpisah. Mari pelajari detailnya.

Kompatibilitas browser

Browser yang tidak mendukung atribut loading akan mengabaikannya tanpa efek samping.

Mengapa pemuatan lambat tingkat browser?

Menurut Arsip HTTP, gambar adalah jenis aset yang paling banyak diminta untuk sebagian besar situs dan biasanya membutuhkan lebih banyak bandwidth daripada resource lainnya. Pada persentil ke-90, situs mengirim gambar lebih dari 5 MB di desktop dan seluler. Ada banyak sekali gambar kucing.

Sebelumnya, ada dua cara untuk menunda pemuatan gambar di luar layar:

• Menggunakan Intersection Observer API
• Menggunakan pengendali peristiwa scroll, resize, atau orientationchange

Kedua opsi tersebut dapat mengizinkan developer menyertakan fungsi pemuatan lambat, dan banyak developer telah membangun library pihak ketiga untuk menyediakan abstraksi yang bahkan lebih mudah digunakan. Namun, dengan pemuatan lambat yang didukung langsung oleh browser, library eksternal tidak diperlukan. Pemuatan lambat tingkat browser juga memastikan bahwa pemuatan gambar yang ditangguhkan tetap berfungsi meskipun JavaScript dinonaktifkan pada klien.

Atribut loading

Chrome memuat gambar dengan prioritas yang berbeda, bergantung pada lokasinya terkait dengan area pandang perangkat. Gambar di bawah area pandang dimuat dengan prioritas lebih rendah, tetapi gambar tersebut tetap diambil saat halaman dimuat.

Anda dapat menggunakan atribut loading untuk sepenuhnya menunda pemuatan gambar di luar layar yang dijangkau dengan men-scroll:

<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 dari browser, yang sama dengan tidak menyertakan atribut dan berarti gambar dimuat terlepas dari lokasinya pada halaman. Meskipun ini adalah default, ada baiknya untuk menetapkannya secara eksplisit jika alat Anda otomatis menambahkan loading="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 hanyalah petunjuk untuk memuat gambar seperti biasa, tanpa menunda pemuatan lebih lanjut jika berada di luar layar. Hal ini tidak berarti bahwa gambar dimuat lebih cepat daripada gambar lain tanpa atribut loading="eager".

Browser memprioritaskan resource berdasarkan berbagai heuristik, dan atribut loading hanya menyatakan saat resource gambar diantrekan, bukan bagaimana resource gambar diprioritaskan dalam antrean tersebut. eager hanya menyiratkan browser antrean cepat yang biasa digunakan secara default.

Jika Anda ingin meningkatkan prioritas pengambilan gambar penting (misalnya gambar LCP), Prioritas Pengambilan harus digunakan dengan fetchpriority="high".

Perhatikan bahwa gambar dengan loading="lazy" dan fetchpriority="high" akan tetap tertunda saat berada di luar layar, lalu diambil dengan prioritas tinggi saat hampir berada dalam area pandang. Dalam kasus ini, kombinasi ini kemungkinan akan diambil dengan prioritas tinggi, sehingga kombinasi ini tidak benar-benar diperlukan atau digunakan.

Batas jarak dari area pandang

Semua gambar yang berada di paruh atas—yaitu, dapat langsung dilihat tanpa men-scroll—muat secara normal. Gambar yang berada jauh di bawah area pandang perangkat hanya diambil saat pengguna men-scroll di dekatnya.

Implementasi pemuatan lambat Chromium mencoba memastikan gambar di luar layar dimuat cukup awal sehingga gambar selesai dimuat setelah pengguna men-scroll di dekat gambar tersebut. Dengan mengambil gambar di sekitar jauh sebelum terlihat di area pandang, kami memaksimalkan kemungkinan gambar tersebut sudah dimuat pada saat gambar terlihat.

Dibandingkan dengan library pemuatan lambat JavaScript, nilai minimum untuk mengambil gambar yang di-scroll hingga terlihat mungkin dianggap konservatif.

Ambang batas jarak tidak tetap dan bervariasi bergantung pada beberapa faktor:

• Jenis resource gambar yang diambil
• Jenis koneksi efektif

Anda dapat menemukan nilai default untuk berbagai jenis koneksi efektif di sumber Chromium. Angka-angka ini, dan bahkan pendekatan pengambilan hanya ketika jarak tertentu dari area pandang tercapai, dapat berubah di masa mendatang seiring tim Chrome meningkatkan heuristik untuk menentukan kapan harus mulai memuat.

Penghematan data dan nilai minimum jarak dari area pandang yang ditingkatkan

Mulai Juli 2020, Chrome telah melakukan peningkatan yang signifikan untuk menyelaraskan batas jarak 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.
• Batas jarak dari area pandang yang baru masih memungkinkan kami menjamin bahwa gambar mungkin telah dimuat saat pengguna men-scroll ke gambar tersebut.

Anda dapat menemukan perbandingan antara nilai minimum jarak dari area pandang lama vs. baru untuk salah satu demo kami terkait koneksi cepat (4G) di bawah:

Nilai minimum lama vs nilai minimum baru:

dan batas baru vs. LazySizes (library pemuatan lambat JS yang populer):

Kami berkomitmen untuk bekerja sama dengan komunitas standar web untuk mengeksplorasi keselarasan yang lebih baik dalam pendekatan terhadap nilai minimum jarak dari area pandang di berbagai browser.

Gambar harus menyertakan atribut dimensi

Meskipun browser memuat gambar, browser tidak segera mengetahui dimensi gambar, kecuali jika ditentukan secara eksplisit. Agar browser dapat mencadangkan ruang yang cukup di halaman untuk gambar, sebaiknya semua tag <img> menyertakan atribut width dan height. Tanpa dimensi yang ditentukan, pergeseran tata letak dapat terjadi, yang lebih terlihat di halaman yang memerlukan waktu beberapa saat untuk dimuat.

<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 tag tersebut dimuat dengan lambat atau tidak. Dengan pemuatan lambat, pemuatan halaman akan menjadi lebih relevan. Menyetel width dan height pada gambar di browser modern juga memungkinkan browser menyimpulkan ukuran intrinsiknya.

Di sebagian besar skenario, gambar masih lambat dimuat jika dimensi tidak disertakan, tetapi ada beberapa kasus ekstrem yang harus Anda ketahui. Tanpa menentukan width dan height, dimensi gambar pada awalnya adalah 0×0 piksel. Jika Anda memiliki galeri gambar seperti itu, browser mungkin menyimpulkan bahwa semuanya muat di dalam area pandang di awal, karena masing-masing gambar hampir tidak menghabiskan ruang dan tidak ada gambar yang didorong keluar dari layar. Dalam hal ini, browser menentukan bahwa semuanya terlihat oleh pengguna dan memutuskan untuk memuat semuanya.

Selain itu, menentukan dimensi gambar akan mengurangi kemungkinan terjadinya pergeseran tata letak. Jika Anda tidak dapat menyertakan dimensi untuk gambar, pemuatan lambat dapat menjadi konsekuensi antara menghemat resource jaringan dan berpotensi meningkatkan risiko pergeseran tata letak.

Meskipun pemuatan lambat di Chromium diterapkan sedemikian rupa sehingga gambar kemungkinan akan dimuat setelah terlihat, masih ada kemungkinan kecil gambar tersebut belum dimuat. Dalam hal ini, atribut width dan height yang tidak ada pada gambar tersebut akan meningkatkan dampaknya pada Pergeseran Tata Letak Kumulatif.

Gambar yang ditentukan menggunakan elemen <picture> juga dapat dimuat dengan lambat:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Meskipun browser akan menentukan gambar yang akan dimuat dari elemen <source>, atribut loading hanya perlu disertakan ke elemen <img> penggantian.

Hindari gambar pemuatan lambat yang berada di area pandang pertama yang terlihat

Sebaiknya jangan menyetel loading=lazy untuk gambar apa pun yang berada di area pandang pertama yang terlihat. Hal ini sangat relevan untuk gambar LCP. Lihat artikel Efek performa dari pemuatan lambat yang terlalu banyak untuk mengetahui informasi selengkapnya.

Sebaiknya hanya tambahkan loading=lazy ke gambar yang diposisikan di bawah paruh, jika memungkinkan. Gambar yang dimuat dengan segera dapat langsung diambil, sementara gambar yang dimuat dengan lambat saat browser harus menunggu sampai mengetahui posisi gambar pada halaman, yang bergantung pada IntersectionObserver agar tersedia.

Umumnya, setiap gambar dalam area pandang harus dimuat dengan segera menggunakan default browser. Anda tidak perlu menentukan loading=eager agar hal ini berlaku untuk gambar dalam area pandang.

<!-- 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 mengabaikan kehadirannya. Meskipun browser ini tentu saja tidak akan mendapatkan manfaat pemuatan lambat, menyertakan atribut tersebut tidak memiliki dampak negatif pada browser tersebut.

FAQ

Apakah ada rencana untuk otomatis memuat gambar di Chrome?

Sebelumnya, Chromium akan otomatis memuat gambar apa pun yang paling sesuai untuk ditangguhkan jika Mode Ringan diaktifkan di Chrome untuk Android dan atribut loading tidak disediakan atau disetel sebagai loading="auto". Namun, Mode Ringan tidak digunakan lagi (seperti loading="auto" non-standar) dan saat ini tidak ada rencana untuk menyediakan pemuatan gambar lambat secara otomatis di Chrome.

Dapatkah saya mengubah seberapa dekat gambar sebelum pemuatan dipicu?

Nilai ini di-hardcode dan tidak dapat diubah melalui API. Namun, setelan tersebut mungkin berubah di masa mendatang karena browser bereksperimen dengan jarak dan variabel batas yang berbeda.

Bisakah gambar latar CSS memanfaatkan atribut loading?

Tidak, saat ini hanya dapat digunakan dengan tag <img>.

Apakah ada kelemahan dari pemuatan lambat gambar yang berada dalam area pandang perangkat?

Lebih aman untuk menghindari penempatan loading=lazy pada gambar paruh atas karena Chrome tidak akan melakukan pramuat gambar loading=lazy di pemindai pramuat dan juga akan menunda pengambilan gambar tersebut hingga semua tata letak selesai. Lihat Menghindari pemuatan lambat gambar yang berada di area pandang pertama yang terlihat untuk informasi selengkapnya.

Bagaimana cara kerja atribut loading dengan gambar yang berada di area tampilan tetapi tidak langsung terlihat (misalnya: di belakang carousel, atau disembunyikan oleh CSS untuk ukuran layar tertentu)?

Menggunakan loading="lazy" dapat mencegah pemuatan ketika tidak terlihat tetapi dalam jarak yang dihitung. Misalnya, Chrome, Safari, dan Firefox tidak memuat gambar menggunakan gaya visual display: none;—baik di elemen gambar maupun di elemen induk. Namun, teknik lain untuk menyembunyikan gambar, seperti menggunakan gaya visual opacity:0, masih akan menyebabkan gambar dimuat. Selalu uji penerapan Anda secara menyeluruh untuk memastikan penerapan berfungsi sebagaimana mestinya.

Bagaimana jika saya sudah menggunakan library pihak ketiga atau skrip untuk memuat gambar secara lambat?

Dengan dukungan penuh pemuatan lambat native yang kini tersedia di browser modern, sebaiknya pertimbangkan kembali jika Anda masih memerlukan library atau skrip pihak ketiga untuk memuat gambar dengan lambat.

Salah satu alasan untuk terus menggunakan library pihak ketiga bersama dengan 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?

Buat polyfill atau gunakan library pihak ketiga untuk memuat gambar secara lambat di situs Anda. Properti loading dapat digunakan untuk mendeteksi apakah fitur ini didukung di browser:

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:

• Ganti <img src> dengan <img data-src> untuk menghindari pemuatan cepat di browser yang tidak didukung. Jika atribut loading didukung, tukar data-src dengan src.
• Jika loading tidak didukung, muat penggantian (ukuran lambat) lalu mulai. Sesuai dengan dokumen lazysizes, Anda menggunakan class lazyload sebagai cara untuk menunjukkan lazysizes 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?

<iframe loading=lazy> juga telah distandardisasi dan sudah diimplementasikan di Chromium dan Safari. Dengan begitu, Anda dapat memuat iframe secara lambat menggunakan atribut loading. Lihat artikel khusus tentang pemuatan lambat iframe untuk mengetahui informasi selengkapnya.

Bagaimana pemuatan lambat tingkat browser memengaruhi iklan di halaman web?

Semua iklan yang ditampilkan kepada pengguna dalam bentuk pemuatan lambat gambar atau iframe sama seperti gambar atau iframe lainnya.

Bagaimana gambar ditangani saat halaman web dicetak?

Semua gambar dan iframe akan langsung dimuat jika halaman dicetak. Lihat masalah #875403 untuk mengetahui detailnya.

Apakah Lighthouse mengenali pemuatan lambat tingkat browser?

Lighthouse 6.0 dan yang lebih tinggi memperhitungkan pendekatan untuk pemuatan lambat gambar di luar layar yang mungkin menggunakan nilai minimum yang berbeda, sehingga memungkinkannya lulus audit Tunda gambar di luar layar.

Kesimpulan

Penggunaan pemuatan gambar lambat dapat sangat mempermudah Anda meningkatkan performa halaman web.

Apakah Anda melihat adanya perilaku yang tidak wajar pada fitur yang diaktifkan di Chrome ini? Laporkan bug!