Pentingnya Lazy Loading di Website

Pentingnya Lazy Loading di Website

Sebelumnya kita mesti mengenal dulu, apa itu Lazy Loading ? Lazy Loading adalah sebuah konsep dimana kita menunda pemanggilan (load) pada sebuah objek sampai saat kita membutuhkannya. Atau istilah Lazy Loading ialah menunda pemanggilan objek ketika objek masih belum dibutuhkan. Atau Lazy Loading adalah sebuah teknik untuk mengoptimasi sebuah halaman pada konten, mau konten di website ataupun Web Apps, dengan cara menunda pemuatan iframe atau media dan merendernya pada waktu tertentu.

Jadi Lazy loading itu, ketika si pengguna membuka sebuah halaman web, sebelumnya pasti akan me-load seluruh konten yang dimana berisi html, teks, gambar video secara serentak bersama.

Simak dibawah ini ada 2 jenis Lazy Loading, sebagai berikut :

1. Lazy Loading Menggunakan JavaScript

jenis Lazy Loading ini bisa langsung menggunakan library JavaScript untuk me-running Lazy Load. Pertama, pastikan kalian mendownload scriptnya pada link https://afarkas.github.io/lazysizes/lazysizes.min.js berikut. atau menambahkannya secara langsung dari direktori CDN yang tersedia, contohnya pada script dibawah ini :

Script diatas ditambahkan sebelum penutup head atau

Lalu jika ingin menjalankannya, kalian tinggal menambahkan value lazyload pada atribut class, contohnya penerapannya dibawah ini :

 

2. Native Lazy Load

Pada browser chrome versi 76, kalian dapat menggunakannya dengan atribut loading untuk melakukan Lazy-Load media tanpa perlu menuliskan kode lazy loading lain dar javascript library.

cara menggunakannya sangat mudah, kalian tinggal menuliskan atribut loading di dalam markup image dan mengisi value dengan lazy, seperti pada contoh dibawah ini :

Mudah kaaaan…

Nah pada atribut loading itu ada 3 jenis value yang didukung, sebagai berikut :

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

Untuk pentingnya menggunakan Lazy Loading sebagai berikut :
a. Meminimilasi waktu start up aplikasi
b. Aplikasi membutuhkan memory yang lebih sedikit karena objek hanya di load ketika dibutuhkan.
c. Pemanggilan Query database yang tidak diperlukan dapat dihindari.

Demikian pembahasan pentingnya menggunakan Lazy Loading untuk website, semoga bermanfaat penjelasannya. Terima kasih



Leave a Reply