Lazy Loading

Last updated on September 3, 2020

#speed-web-optimization

Lazy loading adalah sebuah tehnik untuk mengoptimasi sebuah halaman konten, baik itu konten di website maupun Web Aplikasi, dengan cara menunda pemuatan gambar ataupun iframe dan merendernya pada waktu yang ditentukan.

Lazy Loading

Lazy Loading image from themerella

Ketika user membuka sebuah halaman website, pada dasarnya akan me-loading banyak konten berisi html markup, teks, gambar, video dalam waktu yang bersamaan.

Dan konsep lazy loading melakukan tugasnya, dia akan memuat sebagian yang diperlukan dan menunda sisanya, hingga dibutuhkan oleh pengguna.

Native Lazy Load

Pada modern browser, contohnya di chrome mulai dari versi 76, kamu dapat menggunakan atribut loading untuk melakukan lazy-load gambar tanpa harus menuliskan kode lazy loading lain dari javascript library lainnya.

Cara menerapkan nya mudah, kamu hanya perlu menambahkan atribut loading di dalam markup image dan mengisi value nya dengan lazy, contohnya:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Mudah bukan?

Nah dalam atribut loading tersebut ada 3 jenis value yang didukung:

Lazy Load Menggunakan JavaScript

Alternatif lain untuk mengantisipasi browser yang tidak mendukung Lazy Load secara native, kamu bisa menggunakan bantuan libray JavaScript untuk menjalankan lazy load.

Pertama, kamu harus mendownload script nya disini, atau menambahkan nya secara langsung dari direcktori CDN yang tersedia, misalnya:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" async=""></script>

Tambahkan sebelum penutup head </head>.

Lalu menambahkan value lazyload pada atribut class, contoh penerapan nya:

<img data-src="flower.jpg" class="lazyload" alt="">

Demikian artikel tentang lazy loading, semoga bermanfaat.

Referensi