Pemuatan lambat adalah pendekatan menunggu pemuatan 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 luar layar selama pemuatan halaman awal adalah kandidat ideal untuk teknik ini. Yang paling penting, ukuran lambat menjadikan strategi yang sangat sederhana untuk diterapkan.
Menambahkan skrip lazysizes ke halaman
- Klik Remix untuk Mengedit agar project dapat diedit.
lazysizes.min.js
sudah 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 memuat gambar secara cerdas saat pengguna men-scroll halaman dan memprioritaskan gambar yang akan segera dilihat pengguna.
Menunjukkan gambar ke pemuatan 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 Lihat Aplikasi. Lalu tekan Layar Penuh .
Buka konsol dan temukan image yang baru saja ditambahkan. Class-nya akan berubah dari
lazyload
menjadilazyloaded
saat Anda men-scroll halaman ke bawah.
- Lihat 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 Lihat Aplikasi. Lalu tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak Performa dicentang pada daftar Kategori.
- Klik tombol Buat laporan.
- Pastikan bahwa audit Tunda gambar di luar layar lulus.
Berhasil! Anda telah menggunakan ukuran lambat untuk memuat gambar di halaman secara lambat.