Apa itu Lazy Load – Anda adalah seorang pengguna internet yang sering mengakses berbagai situs web, mungkin Anda pernah mengalami kesulitan saat loading gambar yang terlalu lama. Tak jarang, masalah ini sangat mengganggu pengalaman pengguna. Terutama, ketika Anda ingin mengakses informasi dengan cepat, namun loading gambar yang berat menghambat proses tersebut.
Untuk mengatasi masalah tersebut, pengembang web mengembangkan sebuah teknik yang disebut “lazy loading” atau “lazy load gambar.” Teknik ini membuat loading gambar menjadi lebih efisien dan cepat.
Pada artikel ini, kita akan membahas lebih detail tentang Apa itu Lazy Load Gambar dan bagaimana cara mengimplementasikannya di situs web dengan mudah dan benar.
Apa itu Lazy Load?
Lazy Load Gambar adalah teknik pengoptimalan situs web untuk mempercepat waktu loading gambar. Ketika pengguna mengakses sebuah situs web, seluruh halaman termasuk gambar akan di-download oleh browser.
Hal ini dapat memakan waktu yang lama, terutama jika gambar tersebut memiliki ukuran file yang besar. Dalam teknik Lazy Load Gambar, gambar hanya akan dimuat saat pengguna menggulir ke bagian halaman yang memerlukan gambar tersebut.
Dengan kata lain, gambar yang tidak diperlukan pada halaman utama akan di-load pada saat diperlukan saja.
Cara Kerja Lazy Load
Teknik Lazy Load Gambar dilakukan dengan menggunakan Javascript. Ketika halaman di-load, script Javascript akan memuat gambar dalam mode “diam.” Gambar tersebut tidak akan dimuat pada halaman utama. Namun, saat pengguna menggulir ke bagian halaman yang memerlukan gambar tersebut, script Javascript akan memuat gambar secara otomatis.
Lazy Load Gambar dapat di-implementasikan pada berbagai jenis gambar, seperti JPG, PNG, GIF, dan lain-lain. Namun, teknik ini tidak akan berfungsi pada gambar SVG, karena gambar SVG hanya dapat di-load secara langsung.
Keuntungan Menggunakan Lazy Load
Menerapkan teknik Lazy Load Gambar pada situs web Anda memiliki beberapa keuntungan, antara lain:
Meningkatkan Kecepatan Loading Halaman
Dengan mempercepat loading gambar, teknik Lazy Load Gambar dapat meningkatkan kecepatan loading halaman secara keseluruhan. Hal ini dapat meningkatkan pengalaman pengguna pada situs web Anda.
Menghemat Kapasitas Bandwidth
Dengan memuat gambar hanya saat diperlukan, teknik Lazy Load Gambar dapat menghemat kapasitas bandwidth situs web Anda. Hal ini dapat mengurangi biaya hosting yang diperlukan untuk situs web.
Meningkatkan SEO
Kecepatan loading halaman adalah faktor penting dalam optimasi mesin pencari (SEO). Dengan menerapkan lazy load tentunya ini akan meningkatkan kecepatan website saat dimuat. Google lebih mengutamakan situs web yang memiliki kecepatan yang baik untuk di tampilkan pada halaman pertama pencarian Google.
Cara Implementasi Lazy Load Gambar pada Situs Web Anda
Implementasi teknik Lazy Load Gambar pada situs web Anda dapat dilakukan dengan menggunakan plugin atau script Javascript. Berikut adalah langkah-langkah implementasi Lazy Load Gambar pada situs web yang menggunakan wordpress:
Menggunakan Plugin
Silahkan memilih plugin atau script Javascript untuk mengimplementasikan teknik Lazy Load Gambar pada situs web Anda. Beberapa plugin yang dapat digunakan adalah:
Baca juga: Apa itu Pludin WordPress?
- WP Rocket (Premium)
- BJ Lazy Load
- Lazy Load by WPDevArt
- A3 Lazy Load
Install dan Aktifkan Plugin
Setelah memilih plugin atau script, Anda perlu menginstal dan mengaktifkannya pada situs web Anda. Jika Anda menggunakan plugin pada WordPress, Anda dapat menginstal dan mengaktifkannya melalui menu Plugin di dashboard WordPress.
Konfigurasi Plugin
Setiap plugin atau script memiliki opsi konfigurasi yang berbeda. Anda perlu melakukan konfigurasi sesuai dengan kebutuhan situs web Anda.
Menggunakan Script Javascript
Jika ingin menggunakan script javascript untuk implementasi lazy load gambar, berikut ini langkah mudahnya. Anda dapat menambahkan script berikut ke halaman HTML pada situs web Anda.
- Pengguna wordpress silahkan tambahkan kode ini pada file header.php atau footer.php
<script>
function lazyLoad() {
var lazyImages = document.querySelectorAll('img.lazy');
var windowHeight = document.documentElement.clientHeight;
lazyImages.forEach(function(img) {
if (img.offsetTop < windowHeight + window.pageYOffset) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if (lazyImages.length == 0) {
document.removeEventListener('scroll', lazyLoad);
window.removeEventListener('resize', lazyLoad);
window.removeEventListener('orientationChange', lazyLoad);
}
}
document.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('orientationChange', lazyLoad);
</script>
2. Tambahkan Kelas “lazy” pada Gambar
Tambahkan kelas “lazy” pada tag pada halaman HTML untuk menandakan bahwa gambar tersebut akan dimuat dengan teknik Lazy Load Gambar. Contoh:
<img class="lazy" data-src="gambar.jpg" alt="Deskripsi Gambar">
3. Uji Coba Situs Web Anda
Setelah menambahkan script dan kelas “lazy” pada gambar, uji coba situs web Anda untuk memastikan teknik Lazy Load Gambar berjalan dengan baik. Anda dapat menggunakan alat pengujian kecepatan situs web seperti GTmetrix, Pingdom, atau Google PageSpeed Insights untuk melakukan pengujian.
Apa Beda Lazy Load Gambar dengan CDN?
Teknik Lazy Load Gambar berbeda dengan Content Delivery Network (CDN). CDN adalah layanan yang mengoptimalkan pengiriman konten pada situs web, termasuk gambar, video, dan file lainnya. Sedangkan teknik Lazy Load Gambar hanya mengoptimalkan loading gambar pada situs web.
CDN memungkinkan konten situs web di-load dari server yang paling dekat dengan pengguna, sehingga mengurangi waktu loading konten. Sedangkan teknik Lazy Load Gambar memuat gambar hanya saat diperlukan, sehingga menghemat kapasitas bandwidth dan mempercepat loading halaman.
Lazy Load vs Optimasi Gambar
Optimasi gambar adalah proses mengubah ukuran file gambar untuk mengurangi waktu loading halaman. Sedangkan teknik Lazy Load Gambar hanya memuat gambar saat diperlukan saja.
Baca juga: 8 Situs Kompres Gambar Populer
Kedua teknik tersebut dapat digunakan bersama-sama untuk mengoptimalkan loading halaman situs web. Dengan mengoptimalkan ukuran file gambar dan memuat gambar hanya saat diperlukan, Anda dapat mempercepat loading halaman secara signifikan.
Demikian pembahasan mengenai Apa itu lazy load dan bagaimana implentasi atau penerapannya di situs web Anda. Semoga bermanfaat dan terimakasih.
