Pemuatan lambat untuk gambar di balik layar dengan ukuran lambat

Katie Hempenius

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

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 ke index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

Catatan: File lazysizes.min.js sudah ditambahkan ke project ini, jadi Anda tidak perlu menambahkannya secara terpisah. Skrip yang baru saja Anda tambahkan dapat menggunakan skrip ini.

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 atribut src menjadi data-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.

Catatan: Anda mungkin bertanya-tanya mengapa perlu mengubah atribut src menjadi data-src. Jika atribut ini tidak diubah, semua gambar akan langsung dimuat, bukan dimuat dengan lambat. data-src bukan atribut yang dikenali browser, sehingga saat menemukan tag gambar dengan atribut ini, atribut tersebut tidak akan memuat gambar. Dalam hal ini, ini adalah hal baik karena kemudian memungkinkan skrip lazysizes memutuskan kapan gambar harus dimuat, bukan browser.

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 menjadi lazyloaded 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.

1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .
2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
3. Klik tab Lighthouse.
4. Pastikan kotak Performa dicentang pada daftar Kategori.
5. Klik tombol Buat laporan.
6. Pastikan bahwa audit Tunda gambar di luar layar lulus.

Berhasil! Anda telah menggunakan ukuran lambat untuk memuat gambar di halaman secara lambat.