Salah satu faktor SEO yang cukup penting adalah waktu loading yang cepat. Hal ini bisa Anda dapatkan, salah satunya menggunakan cara lazy load. Lazy load adalah cara untuk menunda loading beberapa konten tertentu. Nantinya beberapa konten seperti gambar atau video tidak akan dimuat sampai saat tertentu. Proses inilah yang bisa meringankan dan mempercepat waktu loading secara keseluruhan.
Apa itu Lazy Load?
Secara singkat bisa dijelaskan jika lazy load adalah sebuah cara untuk menunda pemuatan beberapa konten yang ukurannya besar. Teknik ini akan membuat pemuatan konten tersebut menjadi tidak sinkron dengan konten lainnya.
Proses sederhananya bisa dijelaskan seperti ini. Gambar atau video yang terletak pada bagian bawah tidak akan langsung dimuat ketika website terbuka. Gambar atau video tersebut baru akan dimuat ketika user melakukan scroll ke lokasi di mana gambar atau video tersebut.
Teknik ini biasa digunakan pada website yang banyak memuat gambar kualitas tinggi. Itulah mengapa teknik ini juga dikenal dengan lazy load image.
Mengapa Lazy Load Penting?
Penggunaan teknik ini sendiri memang memberikan banyak manfaat. Dengan waktu loading yang lebih singkat maka hal tersebut secara otomatis juga akan meningkatkan performa dari website.
Berikut adalah beberapa alasan lain tentang pentingnya penggunaan lazy load.
- Waktu loading akan menjadi lebih cepat karena gambar dan video hanya akan dimuat saat terlihat di viewport saja.
- Penerapan lazy load image juga bisa menghemat bandwidth dan juga resources.
- Jika website Anda menggunakan JavaScript, maka penggunaan lazy load ini bisa mempersingkat pembuatan DOM.
- Penggunaan lazy load akan berpengaruh pada kecepatan waktu loading website. Hal tersebut tentunya akan berpengaruh pada user experience.
Contoh Penerapan Lazy Load
Pertanyaan selanjutnya adalah bagaimana cara penerapan lazy load dalam sebuah website? Berikut adalah langkah yang bisa Anda lakukan untuk menerapkan lazy load dalam website
1. Lazy Load dengan Native HTML
Cara pertama yang bisa Anda gunakan untuk membuat lazy load adalah menggunakan native HTML. Anda bisa menggunakan atribut loading untuk melakukan lazy loading image. Penggunaan atribut ini membuat Anda tidak perlu menuliskan kode lazy loading lain dari JavaScript library.
Penerapan attribut ini juga cukup mudah. Setelah menambah atribut loading, maka Anda tinggal mengisi valuenya dengan lazy. Adapun contoh script yang bisa Anda gunakan adalah
<img src="image.png" loading="lazy" alt="…" width="200" height="200">Dalam atribut loading, maka Anda bisa mengisinya dengan 3 value, yaitu:
- Auto. Value ini akan menerapkan loading secara default. Value ini sama saja dengan tidak menggunakan atribut loading.
- Lazy. Value ini akan menunda loading dari resource sampai waktunya tiba.
- Eager. Akan meload resource secara langsung.
2. Lazy Load dengan JavaScript
Cara lainnya yang juga bisa Anda gunakan untuk memasang lazy load adalah menggunakan bantuan JavaScript. Cara yang perlu Anda lakukan adalah sebagai berikut.
- Download scriptnya, atau Anda juga bisa menambahkan secara langsung dari direktori CDN yang ada. Contoh scriptnya adalah:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" async=""></script>- Simpan script tersebut sebelum penutup head </head>.
- Selanjutnya, tambahkan value lazy load pada atribut class, contohya:
<img data-src="flower.jpg" class="lazyload" alt="">Optimalkan Kecepatan Website dengan Lazy Load!
Masalah kecepatan memang akan sangat berpengaruh pada performa, termasuk dalam faktor SEO. Hal inilah yang membuat banyak orang mencoba berbagai cara untuk mempercepat performa websitenya. Termasuk salah satunya menggunakan teknik lazy load.
Dengan cara ini, beberapa konten yang belum diperlukan tidak langsung dimuat, sehingga bisa mempersingkat waktu load.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development