Salah satu cara untuk mempercepat kecepatan load sebuah website adalah dengan menerapkan Lazy Load Image. Jika cara Lazy Load Image digunakan, gambar-gambar yang ada di website kita akan di load ketika area gambar terlihat. Jadi misalnya ketika kita akses sebuah website yang menerapkan Lazy Load Image, di website nya terdapat 10 gambar, namun ketika pertama kali kita datang ke website nya, area gambar yang terlihat hanya 3 saja. Maka gambar yang akan di load oleh website hanya 3 itu saja, 7 sisa nya akan di load ketika user melakukan scroll ke bawah sampai area 7 gambar itu terlihat.

Jadi bisa disimpulkan juga, dengan menerapkan fitur Lazy Load Image kita bisa menghemat bandwidth website. Apalagi jika user tidak ternyata tidak melakukan scroll ke area 7 gambar tadi, jadi menghemat bandwidth sebanyak ukuran 7 gambar tadi. Karena website yang tidak menerapkan fitur Lazy Load Image akan melakukan load ke semua gambar yang ada di website walaupun area nya belum terlihat.

Berikut beberapa cara yang dapat digunakan untuk menerapkan fitur Lazy Load Image.

01. Native
Cara termudah untuk menerapkan fitur Lazy Load Image adalah dengan cara native dari browser. Kita hanya perlu menambahkan attribute “loading=’lazy'” pada tag HTML image (tidak memerlukan kode JavaScript). Berikut contohnya code:

<img src="image_source.jpg" loading="lazy">

Namun perlu diingat kalau cara native ini baru disupport untuk browser-browser terbaru saja. Kita perlu liat juga target user dari website kita apakah kita masih akan mensupport user dengan browser lama. Jika tidak maka cukup dengan cara native ini saja. Jika ya, maka bisa menggunakan cara selanjutnya yaitu dengan menggunakan library 3rd party.

02. Menggunakan Library JavaScript Lazysizes
Salah satu library JavaScript yang saya rekomendasikan adalah Lazysizes. Selain size nya yang kecil, hanya 7Kb, Lazysizes juga sangat mudah untuk digunakan. Selain itu untuk penggunaan yang lebih advanced, library tersebut menyediakan banyak opsi yang bisa disesuaikan dengan kebutuhan kita. Berikut contoh penggunaan code nya.

<!-- import lazysizes script -->
<script src="lazysizes.min.js"></script>

<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />

<!-- responsive example with automatic sizes calculation: -->
<img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" />

Untuk pemakaian standar, code diatas cukup untuk menerapkan fitur Lazy Load Image di website kita. Untuk penggunaan yang lebih advanced, silahkan untuk melihat langsung dokumentasi nya di Github library nya. Link nya saya sertakan di bawah ini.

https://github.com/aFarkas/lazysizes

03. Plugin Lazy Load WordPress
Bagi pengguna WordPress, kita bisa melakukannya dengan mudah dengan cara menginstall plugin saja. Kita bisa memilih beberapa rekomendasi plugin dibawah ini. Sesuaikan dengan kebutuhan ya.

Itu saja pembahasan mengenai Lazy Load Image. Semoga bermanfaat dan website kita menjadi lebih cepat.