Pemuatan lambat adalah pendekatan menunggu untuk memuat resource hingga diperlukan, bukan memuatnya terlebih dahulu. Hal ini dapat meningkatkan performa dengan mengurangi jumlah resource yang perlu dimuat dan diuraikan pada pemuatan halaman awal.
Gambar yang berada di balik layar selama pemuatan halaman awal adalah kandidat ideal untuk teknik ini. Bagian terbaiknya, lazysizes menjadikan strategi yang sangat sederhana untuk diterapkan.
Menambahkan skrip lazysizes ke halaman
- Klik Remix to Edit agar project dapat diedit.
lazysizes.min.js
telah didownload dan ditambahkan ke Glitch ini. Untuk
menyertakannya di halaman:
- Tambahkan tag
<script>
berikut keindex.html
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
lazysizes akan secara cerdas memuat gambar saat pengguna men-scroll halaman dan memprioritaskan gambar yang akan segera dilihat pengguna.
Mengindikasikan gambar untuk dimuat lambat
- Tambahkan class
lazyload
ke gambar yang seharusnya dimuat dengan lambat. Selain itu, ubah atributsrc
menjadidata-src
.
Misalnya, perubahan untuk flower3.png
akan terlihat seperti ini:
<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">
Untuk contoh ini, coba pemuatan lambat flower3.png
, flower4.jpg
, dan
flower5.jpg
.
Lihat penerapannya
Selesai. Untuk melihat penerapan perubahan ini, ikuti langkah-langkah berikut:
Untuk melihat pratinjau situs, tekan View App, lalu tekan Fullscreen .
Buka konsol dan cari gambar yang baru saja ditambahkan. Class-nya harus berubah dari
lazyload
menjadilazyloaded
saat Anda men-scroll halaman ke bawah.
- Perhatikan panel jaringan untuk melihat file gambar dimuat satu per satu saat Anda men-scroll halaman ke bawah.
Verifikasi menggunakan Lighthouse
Terakhir, sebaiknya gunakan Lighthouse untuk memverifikasi perubahan ini. Audit performa "Tunda gambar di luar layar" Lighthouse akan menunjukkan jika Anda lupa menambahkan pemuatan lambat ke gambar di luar layar.
- Untuk melihat pratinjau situs, tekan View App, lalu tekan Fullscreen .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa sudah dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
- Pastikan audit Tunda gambar di luar layar telah lulus.
Berhasil! Anda telah menggunakan lazysizes untuk memuat gambar di halaman Anda secara lambat.