👨🏼‍🏫 🦅 🚷 Pemuatan gambar browser yang malas (memuat atribut) 😈 🏩 👏🏽

Dukungan untuk gambar malas bawaan dan unggahan iframe telah hadir di web!
Mulai dengan Chrome versi 76, Anda dapat menggunakan atribut loading baru untuk memuat sumber daya dengan malas tanpa harus menulis kode tambahan untuk ini atau menggunakan pustaka JavaScript pihak ketiga. Mari kita lihat detailnya.

Video ini menunjukkan contoh fungsi ini:

Mengapa pemuatan bawaan bawaan?

Menurut HTTPArchive , gambar adalah jenis sumber daya yang paling banyak diminta di sebagian besar situs dan biasanya menggunakan lebih banyak bandwidth daripada yang lain. Pada persentil ke-90, situs mengirim sekitar 4,7 MB gambar ke desktop dan perangkat seluler. Cukup foto dengan kucing .

Iframe tertanam juga mengkonsumsi banyak data dan dapat merusak kinerja halaman. Mengunduh gambar yang tidak penting dan iframe hanya pada saat pengguna dapat melihatnya meningkatkan kecepatan pemuatan halaman, meminimalkan pemuatan pada bandwidth saluran pengguna dan mengurangi penggunaan memori.

Saat ini ada dua cara untuk menunda memuat gambar dan bingkai yang terletak di luar layar:

menggunakan API Pengamat titik - temu
menggunakan scroll , resize atau orientationchange penangan acara

Opsi apa pun memungkinkan pengembang untuk mengaktifkan fungsionalitas pemuatan malas, dan banyak yang telah membuat perpustakaan pihak ketiga untuk menyediakan abstraksi yang bahkan lebih mudah digunakan. Jika Anda memiliki dukungan untuk pemuatan malas secara langsung di peramban, tidak perlu ada perpustakaan pihak ketiga. Pemuatan malas bawaan juga memastikan bahwa pemuatan gambar dan bingkai yang tertunda terus berfungsi bahkan jika JavaScript dinonaktifkan di sisi klien.

Memuat atribut

Hari ini, Chrome sudah mengunduh gambar dengan prioritas berbeda, tergantung di mana mereka berada relatif terhadap area tampilan perangkat. Gambar di bawah area tampilan diunggah dengan prioritas lebih rendah, tetapi masih diunggah secepat mungkin.

Di Chrome 76, Anda dapat menggunakan atribut loading untuk secara permanen menunda pemuatan gambar dan bingkai dari layar, yang dapat dicapai dengan menggulir:

 <img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>

Nilai atribut yang didukung loading :

auto : pengaturan mode lazy loading bawaan di browser. Sama seperti atribut yang hilang
lazy : Penundaan memuat sumber daya hingga mencapai perkiraan jarak dari viewport
eager : memuat sumber daya segera, terlepas dari lokasinya di halaman

Fitur ini akan terus diperbarui hingga diluncurkan dalam versi stabil (tidak lebih awal dari Chrome 76). Tetapi Anda dapat mencobanya dengan mengaktifkan bendera berikut di Chrome:

chrome: // flags / # enable-lazy-image-loading
chrome: // flags / # enable-lazy-frame-loading

Memuat ambang jarak

Semua gambar dan bingkai terlihat pada halaman tanpa perlu menggulir dimuat sebagai standar. Yang terletak di bawah area tampilan perangkat dimuat hanya ketika pengguna menggulir ke sana.

Jarak di mana pemuatan dimulai tidak tetap dan bervariasi tergantung pada beberapa faktor:

jenis sumber daya yang akan dimuat (gambar atau bingkai)
Apakah " mode Lite " dihidupkan di browser Chrome untuk Android
jenis koneksi yang efektif

Anda dapat menemukan nilai default untuk berbagai jenis senyawa efektif di sumber Chromium . Metrik ini dan bahkan pendekatan pemuatan saat mencapai jarak tertentu dari area tampilan dapat berubah dalam waktu dekat, karena tim Chrome meningkatkan heuristik untuk menentukan kapan harus mulai mengunduh.

Di Chrome 77, Anda dapat bereksperimen dengan ambang berbeda ini dengan memperlambat kecepatan koneksi di DevTools. Selama ini, Anda harus mengganti jenis koneksi efektif di browser menggunakan chrome://flags/#force-effective-connection-type. flag chrome://flags/#force-effective-connection-type.

Unggah Gambar

Atribut memuat mempengaruhi bingkai secara berbeda dari gambar, tergantung pada apakah frame disembunyikan (frame tersembunyi sering digunakan untuk tugas analitik atau komunikasi). Chrome menggunakan kriteria berikut untuk menentukan apakah bingkai disembunyikan:

bingkai lebar dan tinggi 4px atau kurang
display: none atau visibility: hidden berlaku properti visibility: hidden
frame off-screen menggunakan posisi X atau Y negatif

Jika bingkai memenuhi salah satu dari kondisi ini, Chrome menganggapnya tersembunyi dan tidak akan dimuat dalam mode ditangguhkan dalam kebanyakan kasus. Frame yang tidak disembunyikan hanya akan dimuat ketika mereka berada dalam ambang batas muat . Untuk bingkai yang masih memuat dalam mode pemuatan yang ditangguhkan, placeholder ditampilkan

Faq

Apakah ada rencana untuk memperluas fitur ini?

Ada rencana untuk mengubah mode pemuatan tunda peramban default untuk secara otomatis menampilkan dalam mode ini setiap gambar dan bingkai yang pemuatannya dapat ditunda jika mode Lite diaktifkan di Chrome untuk Android.

Apakah mungkin untuk mengubah jarak ke gambar atau bingkai di mana pemuatan yang tertunda dimulai?

Nilai-nilai ini hardcoded dan tidak dapat diubah melalui API. Namun, mereka mungkin berubah di masa mendatang, karena tim Chrome sedang bereksperimen dengan berbagai jarak ambang dan variabel.

Bisakah gambar diatur melalui properti latar belakang CSS mendapatkan atribut pemuatan?

Tidak, saat ini hanya dapat digunakan dengan tag.

Bagaimana cara atribut pemuatan bekerja dengan gambar yang berada dalam ruang lingkup tetapi tidak terlihat (seperti korsel)?

Dalam mode ditangguhkan, hanya gambar-gambar yang dimuat yang berada pada jarak tertentu dari bagian bawah area tampilan perangkat. Semua gambar di atas area tampilan, terlepas dari apakah mereka saat ini terlihat, dimuat secara normal.

Bagaimana jika saya sudah menggunakan perpustakaan atau skrip pihak ketiga untuk menunda pemuatan gambar atau bingkai?

Atribut pemuatan seharusnya tidak memengaruhi kode yang memuat data dalam mode ditangguhkan, tetapi penting untuk mempertimbangkan beberapa poin penting:

Jika bootloader pihak ketiga Anda dalam mode ditangguhkan mencoba memuat gambar atau bingkai sebelum Chrome memuatnya dalam mode normal, yaitu, pada jarak yang lebih besar dari ambang jarak unduhan browser, mereka akan tetap tertunda dan dimuat sesuai dengan aturan perilaku browser normal
Jika bootloader pihak ketiga Anda menggunakan jarak yang lebih pendek untuk menentukan kapan memuat gambar atau bingkai tertentu dari browser, maka perilaku tersebut akan cocok dengan pengaturan bootloader Anda

Salah satu alasan penting untuk terus menggunakan pustaka pihak ketiga secara paralel dengan memuat = "malas" adalah untuk menyediakan polyfile untuk browser yang tidak mendukung atribut ini.

Apakah browser lain mendukung pemuatan malas terintegrasi?

Atribut loading dapat dilihat sebagai peningkatan progresif. Browser yang mendukungnya dapat mengunggah gambar dan bingkai dalam mode ditangguhkan. Yang tidak mendukung - untuk saat ini, unggah gambar seperti biasa. Dari sudut pandang dukungan lintas-browser, atribut loading didukung di Chrome 76 dan browser apa pun berdasarkan Chromium 76. Ada juga bug terbuka tentang penerapan fungsi ini di Firefox.

API yang serupa diusulkan dan digunakan di IE dan Edge, tetapi berfokus pada menurunkan prioritas unduhan alih-alih menundanya sepenuhnya.

Apa yang harus dilakukan dengan browser yang belum mendukung pengunduhan bawaan yang tertunda?

Buat polyfile atau gunakan perpustakaan pihak ketiga untuk mengunggah gambar ke situs dalam mode ditangguhkan. Properti pemuatan dapat digunakan untuk menentukan apakah fungsionalitas didukung di browser:

 if ('loading' in HTMLImageElement.prototype) { // supported in browser } else { // fetch polyfill/third-party library }

Misalnya, lazysizes adalah pustaka JavaScript populer untuk pemuatan malas. Anda dapat menentukan dukungan untuk atribut loading untuk memuat pustaka ini hanya ketika loading tidak didukung. Ini berfungsi sebagai berikut

 <!-- 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/4.1.8/lazysizes.min.js'; document.body.appendChild(script); } </script>

Demonstrasi kerja. Cobalah di peramban seperti Firefox atau Safari untuk melihat fallback beraksi.

Perpustakaan lazysizes juga menyediakan plugin pemuatan bawaan yang menggunakan pemuatan tertunda bawaan jika memungkinkan, dan menggunakan fungsionalitas perpustakaan saat diperlukan.

Bagaimana keterlambatan pemuatan inline memengaruhi iklan pada halaman?

Semua iklan yang disajikan dalam bentuk gambar atau bingkai juga dimuat dalam mode ditangguhkan, seperti gambar atau bingkai lainnya.

Bagaimana gambar diproses jika halaman web dicetak?

Meskipun tidak ada fungsi di Chrome 76, ada masalah terbuka yang segera memuat semua gambar dan bingkai saat mencetak halaman.

Kesimpulan

Menggunakan dukungan bawaan untuk pemuatan gambar dan bingkai yang malas dapat secara signifikan meningkatkan kinerja halaman web.

Jika Anda melihat adanya perilaku yang tidak biasa ketika Anda mengaktifkan fitur ini di Chrome, laporkan kesalahan .

Pemuatan gambar browser yang malas (memuat atribut)