Cara Menerapkan Native Lazyload Gambar, Sangat Mudah!

Lazy Loading merupakan sebuah teknik yang memuat source seperti gambar dipaling akhir setelah halaman dimuat atau dimuat saat diperlukan saja. Lazy loading juga bisa disebut on-demand loading.

Apa Itu Native Lazyload Images

Lazyload images atau gambar ialah sebuah fitur yang sudah tertanam pada sebuah browser modern seperti Google Chrome dan Firefox, browser berbasis Chromium seperti Opera, Edge (versi terbaru) dan Brave Browser juga sudah terdapat fitur tersebut. Sedangkan untuk safari saya kurang tahu, dan di blognya web.dev mengatakan "akan segera hadir" yang mungkin masih dalam tahap pengembangan. Native Lazyload tidak memerlukan plugin apapun seperti javascript, karena sudah tertanam di browser pengguna.
Native Lazyload images akan memuat gambar seperlunya, jika gambar tersebut terbaca dilayar maka gambar tersebut akan dimuat sedangkan jika tidak terbaca dilayar misalkan ada di paling bawah halaman maka gambar tersebut tidak akan dimuat dan akan dimuat ketika pengguna menscroll browser hingga bagian gambar tersebut.

Lihat video berikut, ketika di bagian atas gambar lain tidak ikut dimuat sedangkan ketika di scroll ke bawah hingga bagian gambar lain maka akan memuat gambar lainya.

Keuntungan Native Lazyload

Keuntungan dari menggunakan native lazyload diantaranya adalah sebagai berikut.

1. Sangat mudah diterapkan

2. Tanpa plugin apapun

3. Membuat memori pengguna lebih enteng

4. Mempercepat loading halaman

Cara Menerapkan Native Lazyload

Untuk menerapkan native lazyload kamu hanya perlu menambahkan atribut loading="lazy" saja pada gambar. Contohnya:

<img src="/image.jpg" loading="lazy">

Namun lebih bagus jika menambahkan atribut height dan width, supaya ketika gambar belum tampil terdapat white space pada gambar sehingga ketika pengguna menscroll hingga pada bagian gambar maka text tidak akan pindah.

<img loading="lazy" width="1000" height="1500" src="./img.jpg" />

Dan tambahkan style berikut sehingga gambar tidak ditampilkan keluar dari body halaman.

img {
max-width: 100%;
height: auto;}

Akhir kata

Sangat mudah bukan? Bahkan orang yang baru saja tahu bahasa html akan langsung bisa menerapkan native lazyload images tersebut.