Porsi gambar dan video dalam payload umum situs bisa sangat signifikan. Sayangnya, pemangku kepentingan project mungkin tidak mau memotong resource media apa pun dari aplikasi yang ada. Jalan buntu semacam ini menjengkelkan, terutama ketika semua pihak yang terlibat ingin meningkatkan performa situs, tetapi tidak dapat menyepakati cara mencapainya. Untungnya, pemuatan lambat adalah solusi yang mempersingkat payload halaman awal dan waktu pemuatan, tetapi tidak mengefisienkan konten.
Apa itu pemuatan lambat?
Pemuatan lambat adalah teknik yang menunda pemuatan resource yang tidak penting pada waktu pemuatan halaman. Sebagai gantinya, resource yang tidak penting ini dimuat pada saat yang diperlukan. Dalam hal gambar, "tidak penting" sering kali identik dengan "di luar layar". Jika Anda telah menggunakan Lighthouse dan memeriksa beberapa peluang peningkatan, Anda mungkin telah melihat beberapa panduan di area ini dalam bentuk Tunda audit gambar offscreen:
Anda mungkin sudah pernah melihat penerapan pemuatan lambat, dan prosesnya akan seperti ini:
- Anda tiba di sebuah halaman, dan mulai men-scroll saat Anda membaca konten.
- Pada titik tertentu, Anda men-scroll gambar placeholder ke area pandang.
- Gambar placeholder tiba-tiba diganti dengan gambar akhir.
Contoh pemuatan lambat gambar dapat ditemukan di platform publikasi populer, Medium, yang memuat gambar placeholder ringan saat pemuatan halaman, dan menggantinya dengan gambar yang dimuat secara lambat saat di-scroll ke area pandang.
Jika tidak terbiasa dengan pemuatan lambat, Anda mungkin bertanya-tanya seberapa berguna teknik ini, dan apa manfaatnya. Baca terus untuk mengetahuinya.
Mengapa harus memuat gambar atau video secara lambat, bukan hanya memuat gambar atau video tersebut?
Karena mungkin Anda memuat sesuatu yang mungkin tidak pernah dilihat pengguna. Hal ini bermasalah karena beberapa alasan:
- Hal itu menyia-nyiakan data. Pada koneksi tidak berbayar, hal ini tidak dapat terjadi hal terburuk (meskipun Anda mungkin menggunakan bandwidth berharga tersebut untuk mendownload resource lain yang memang akan dilihat oleh pengguna). Namun, pada paket data yang terbatas, memuat hal-hal yang tidak pernah dilihat pengguna dapat menghabiskan uang mereka secara efektif.
- Memboroskan waktu pemrosesan, baterai, dan resource sistem lainnya. Setelah resource media didownload, browser harus mendekodenya dan merender kontennya di area pandang.
Gambar dan video pemuatan lambat mengurangi waktu pemuatan halaman awal, berat halaman awal, dan penggunaan resource sistem, yang semuanya memiliki dampak positif pada performa.
Menerapkan pemuatan lambat
Ada sejumlah cara untuk menerapkan pemuatan lambat. Pilihan solusi Anda harus memperhitungkan browser yang didukung, dan juga browser yang Anda coba muat dengan lambat.
Browser modern menerapkan pemuatan lambat tingkat browser,
yang dapat diaktifkan menggunakan atribut loading pada gambar dan iframe.
Untuk memberikan kompatibilitas dengan browser lama
atau untuk menjalankan pemuatan lambat pada elemen tanpa pemuatan lambat bawaan,
Anda dapat menerapkan solusi dengan JavaScript Anda sendiri.
Ada juga sejumlah library yang ada untuk membantu Anda melakukannya.
Baca postingan di situs ini untuk mengetahui detail selengkapnya tentang semua pendekatan ini:
Selain itu, kami telah menyusun daftar potensi masalah terkait pemuatan lambat, dan hal-hal yang harus diperhatikan dalam implementasi Anda.
Kesimpulan
Jika digunakan dengan hati-hati, pemuatan gambar dan video yang lambat dapat mengurangi waktu pemuatan awal dan payload halaman secara signifikan di situs Anda, termasuk Data Web Inti. Pengguna tidak akan menimbulkan aktivitas jaringan yang tidak perlu—termasuk pertentangan jaringan pada koneksi yang lebih lambat—dan biaya pemrosesan resource media yang mungkin tidak pernah mereka lihat, tetapi mereka masih dapat melihat resource tersebut jika mereka mau.
Selama teknik peningkatan performa berjalan, pemuatan lambat cukup kontroversial. Jika Anda memiliki banyak gambar inline di situs, ini adalah cara yang sangat baik untuk mengurangi download yang tidak perlu. Pengguna situs Anda dan pemangku kepentingan proyek akan menghargainya!