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

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

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

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 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 atribut src perlu diubah menjadi data-src. Jika atribut ini tidak diubah, semua gambar akan langsung dimuat, bukan dimuat lambat. data-src bukan atribut yang dikenali browser, sehingga saat menemukan tag gambar dengan atribut ini, gambar tidak akan dimuat. Dalam hal ini, itu adalah hal yang baik, karena kemudian memungkinkan skrip lazysizes untuk memutuskan kapan gambar harus dimuat, bukan browser.

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

1. Untuk melihat pratinjau situs, tekan View App, lalu tekan Fullscreen .
2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
3. Klik tab Lighthouse.
4. Pastikan kotak centang Performa sudah dicentang dalam daftar Kategori.
5. Klik tombol Buat laporan.
6. Pastikan audit Tunda gambar di luar layar telah lulus.

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