Penerapan Lazy Loading Gambar untuk Optimasi Resources

Oleh: Dimas Janotama

Saat pengguna mengunjungi situs web kamu, browser harus mengunduh dan memproses berbagai sumber daya seperti HTML, CSS, JavaScript, gambar, dan font. Semakin banyak dan semakin besar sumber daya ini, semakin lama waktu yang dibutuhkan situs kamu untuk dimuat sepenuhnya. Ini dapat mengakibatkan pengalaman pengguna yang buruk, tingkat bounce rate yang tinggi, dan bahkan memengaruhi peringkat SEO kamu. Di sinilah strategi pemuatan sumber daya berperan. Tujuannya adalah memastikan bahwa sumber daya penting dimuat secepat mungkin, sementara sumber daya yang kurang penting atau yang tidak langsung terlihat dapat ditunda pemuatannya.

Lazy loading adalah teknik di mana gambar atau elemen media lainnya baru dimuat saat mereka akan terlihat di layar (atau mendekati terlihat). Bayangkan kamu memiliki halaman blog yang sangat panjang dengan banyak gambar. Tanpa lazy loading, browser akan mencoba mengunduh semua gambar sekaligus, bahkan yang berada jauh di bagian bawah halaman dan mungkin tidak pernah dilihat pengguna. Dengan lazy loading, gambar-gambar tersebut hanya akan dimuat ketika pengguna scroll ke bawah dan gambar-gambar tersebut mendekati area pandang (viewport) mereka.

Mengapa Menggunakan Lazy Loading?

Peningkatan Kecepatan Initial Load: Browser tidak perlu mengunduh semua gambar sekaligus, yang berarti konten di bagian atas halaman dapat ditampilkan lebih cepat.
Penghematan Bandwidth: Jika pengguna tidak scroll ke bagian bawah halaman, gambar-gambar yang tidak terlihat tidak akan diunduh, menghemat bandwidth baik untuk pengguna maupun server.
Pengurangan Permintaan Jaringan: Lebih sedikit HTTP request saat initial load.

Cara Menerapkan Lazy Loading Gambar

Ada beberapa cara untuk menerapkan lazy loading:

a. Atribut loading="lazy" (Native Browser)

Ini adalah cara paling mudah dan direkomendasikan karena didukung secara native oleh sebagian besar browser modern.

HTML

<img src="gambar-placeholder.jpg" data-src="gambar-asli.jpg" alt="Deskripsi Gambar" loading="lazy">

src : Ini adalah gambar placeholder atau gambar yang sangat kecil yang akan ditampilkan terlebih dahulu. Kamu bahkan bisa membiarkannya kosong jika ingin gambar muncul begitu saja saat dimuat.

data-src : Atribut ini menyimpan URL gambar asli yang akan dimuat saat gambar mendekati viewport.

loading="lazy" : Ini memberi tahu peramban untuk menunda pemuatan gambar ini sampai mendekati viewport.

b. Menggunakan JavaScript (Intersection Observer API)

Untuk dukungan peramban yang lebih luas atau kontrol yang lebih spesifik, Anda bisa menggunakan JavaScript, khususnya Intersection Observer API. API ini memungkinkan Anda mendeteksi kapan suatu elemen memasuki atau keluar dari viewport.

HTML

<img src="gambar-placeholder.jpg" data-src="gambar-asli.jpg" alt="Deskripsi Gambar" class="lazyload">

Javascript

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazyload");
          lazyImageObserver.unobserve(lazyImage); // Berhenti mengamati setelah dimuat
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    lazyImages.forEach(function(lazyImage) {
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove("lazyload");
    });
  }
});

Penjelasan script di atas:

1. Mendapatkan semua gambar dengan kelas lazyload .

2. Mengecek apakah IntersectionObserver didukung peramban.

3. Jika didukung, membuat IntersectionObserver yang akan memuat gambar asli ketika gambar tersebut bertemu dengan viewport.

4. Jika tidak, memuat semua gambar secara langsung sebagai fallback.

Kesimpulan

lazy loading memastikan bahwa gambar hanya dimuat saat mereka benar-benar dibutuhkan (yaitu, ketika mereka mendekati atau masuk ke area pandang pengguna). Ini berbeda dengan pemuatan standar di mana semua gambar akan diunduh sekaligus saat halaman pertama kali diakses, terlepas dari apakah gambar tersebut terlihat atau tidak.

Dengan mengadopsi lazy loading gambar, kamu tidak hanya membuat situs web lebih cepat dan efisien, tetapi juga menciptakan pengalaman yang lebih baik dan lebih ramah bagi semua pengguna.