Tips dan Trik untuk Meningkatkan Performa Halaman dengan Lazy Load Gambar

Lazy load adalah teknik yang digunakan untuk memuat gambar secara bertahap sesuai dengan kebutuhan. Dengan menggunakan lazy load, gambar hanya akan dimuat ketika diperlukan, sehingga dapat mengurangi beban server dan meningkatkan kecepatan loading halaman. Ini juga dapat menghemat kuota data bagi pengunjung yang mengakses situs menggunakan jaringan mobile.

Untuk mengimplementasikan lazy load pada gambar, kamu dapat menggunakan kode HTML seperti berikut:

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy">

Di kode di atas, placeholder.jpg adalah gambar placeholder yang akan ditampilkan sebelum gambar asli dimuat. Sedangkan real-image.jpg adalah gambar asli yang akan dimuat ketika diperlukan. Kamu juga perlu menambahkan atribut class="lazy" pada elemen img untuk menandakan bahwa gambar tersebut akan dimuat secara lazy.

Untuk menjalankan lazy load pada gambar, kamu perlu menambahkan kode JavaScript sebagai berikut:

// Ambil semua elemen gambar yang memiliki class lazy
var images = document.querySelectorAll(".lazy");

// Buat fungsi untuk memuat gambar ketika diperlukan
function loadLazyImages() {
    // Loop setiap elemen gambar
    images.forEach(function(img) {
        // Cek apakah elemen gambar berada di dalam viewport
        if (img.getBoundingClientRect().top < window.innerHeight) {
            // Ganti src elemen gambar dengan data-src
            img.src = img.getAttribute("data-src");
        }
    });
}

// Muat gambar saat halaman pertama kali dimuat
loadLazyImages();

// Muat gambar saat halaman di-scroll
window.addEventListener("scroll", loadLazyImages);

Kode di atas akan mengambil semua elemen gambar yang memiliki class lazy, kemudian memeriksa apakah elemen tersebut berada di dalam viewport. Jika elemen gambar berada di dalam viewport, maka kode akan mengganti src elemen gambar dengan data-src yang menyimpan URL gambar asli. Hal ini akan menyebabkan gambar asli dimuat dan ditampilkan pada halaman.

Dengan menggunakan teknik lazy load pada gambar, kamu dapat meningkatkan kecepatan loading halaman dan menghemat kuota data bagi pengunjung. Semoga membantu!