Lazy Loading

By Last updated on

#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:

  • auto: akan menerapkan lazy loading secara default pada browser, ini sama saja dengan tidak menambahkan atribut loading.
  • lazy: menunda loading dari resource tersebut sampai tiba waktunya.
  • eager: meload resource secara langsung.

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

About The Author

About image

Founder Gegeriyadi.com, layanan yang sudah 10 tahun bergerak di bidang Web Development Services yang juga intens update seputar SEO dan juga Web Optimization...