Dengarkan

---

Wakool.id - Konten pada sebuah website biasanya berisi teks, image, atau jenis media lainnya seperti video. Menurut HTTPArchive, image adalah aset yang paling banyak diunduh dan biasanya memakan bandwidth yang lebih besar dibandingkan jenis media lainnya.

Sumber: https://httparchive.org/reports/state-of-images

Memuat aset image yang terlalu banyak dan besar pada satu halaman pasti sangat berpengaruh terhadap performa website. Terutama saat website diakses melalui koneksi internet yang kurang stabil.

Apakah ada solusinya?

Ada banyak teknik untuk mengoptimalkan image pada website. Salah satunya dengan cara kompresi agar ukuran image lebih kecil. Adapun cara yang populer digunakan, yaitu teknik lazy loading. Lazy loading pada umumnya memanfaatkan JavaScript dengan cara mengecek posisi elemen image. Jika image berada pada viewport, maka atribut src diisi dengan url yang sesuai.

Loading Attribute

Berdasarkan Caniuse, beberapa browser populer seperti Chrome, Edge, Opera, dan Firefox sudah mendukung attribute loading untuk tag <img loading="lazy">. Dengan menggunakan attribute loading, kita bisa meniru teknik lazy loading tanpa menulis code JavaScript. Mantap!

Apa saja sih dukungan dari attribute loading?

• auto: value default, tidak ada pengaruh terhadap lazy loading.
• lazy: menunda loading image hingga mencapai viewport.
• eager: memuat image secara langsung

Ya, kita akan menggunakan value lazy untuk menghasilkan lazy loading. Berikut ini contoh penggunaaannya:

 

Sangat simple! Kita hanya perlu menambahkan attribute loading="lazy" pada tag <img> yang diinginkan. Hasilnya bisa dilihat pada demo berikut:

Jika kita membuka inspect dan tab network pada browser, maka akan terlihat asset image dimuat satu persatu sesuai urutan tampil pada viewport browser. Hore berhasil!

Tapi, perlu diingat bahwa belum semua browser mendukung fitur ini. Menurut Caniuse, inilah versi browser yang sudah mendukung attribute loading:

Sumber: https://caniuse.com/loading-lazy-attr

Sayang sekali, mayoritas masih berwarna merah. Ini menunjukkan browser pada versi tersebut belum mendukung attribute loading. Walaupun beberapa versi browser sudah berwarna hijau.

Tidak bisa dipungkiri bahwa ini merupakan solusi yang elegan, namun ternyata implementasinya masih sangat terbatas. Pada akhirnya, apapun teknik yang digunakan bertujuan untuk output yang sama, yaitu membuat website kita lebih kencang. Semoga bermanfaat :)

 

Original Post: https://ilhamgunawan.vercel.app/blog/optimasi-loading-image

wkid/ilhamgunawan