Teknik Lazy Loading untuk Gambar dan Video

Pernahkah kamu membuka sebuah website dan harus menunggu lama hanya untuk melihat semua gambar dan video muncul? Itu adalah masalah yang sering terjadi jika website tidak menerapkan teknik lazy loading. Lazy loading adalah strategi pengoptimalan performa website yang menunda pemuatan resource (gambar, video, iframe) hingga resource tersebut benar-benar dibutuhkan atau akan terlihat oleh pengguna.

Dengan kata lain, konten yang ada di luar area pandang pengguna (di bawah "lipatan" halaman atau off-screen) tidak akan dimuat sampai pengguna menggulir (scroll) ke bagian tersebut. Hasilnya? Waktu loading initial yang jauh lebih cepat dan user experience yang lebih baik.

Baca Juga : Cara Membangun Website dengan Voice Search

Bagaimana Lazy Loading Bekerja?

Secara umum, saat browser memuat halaman web, ia akan mencoba memuat semua gambar, video, dan resource lainnya secara bersamaan. Jika ada banyak resource visual, ini bisa sangat memperlambat loading halaman.

Dengan lazy loading, skenarionya berbeda:

Awalnya, Hanya Konten Terlihat yang Dimuat: Ketika halaman dimuat, hanya gambar dan video yang berada di viewport (layar yang terlihat oleh pengguna tanpa scroll) yang langsung dimuat.
Placeholder atau Low-Quality Image Placeholder (LQIP): Untuk resource yang belum dimuat, seringkali ditampilkan sebuah placeholder kosong atau versi gambar berkualitas rendah/buram (LQIP) yang sangat ringan.
Mendeteksi Guliran Pengguna: Ketika pengguna mulai menggulir ke bawah, browser atau script JavaScript akan mendeteksi bahwa resource yang sebelumnya tidak terlihat kini akan masuk ke viewport.
Memuat Resource Asli: Pada titik inilah resource asli (gambar atau video resolusi tinggi) akan mulai dimuat dan menggantikan placeholder atau LQIP.

Kelebihan Lazy Loading

Peningkatan Kecepatan Loading Initial: Ini adalah manfaat paling signifikan. Pengguna tidak perlu menunggu seluruh halaman dimuat sebelum mereka bisa berinteraksi dengan bagian above the fold.
Penghematan Bandwidth: Pengguna hanya mengunduh resource yang benar-benar mereka lihat. Ini sangat bermanfaat bagi pengguna dengan koneksi internet terbatas atau kuota data.
Penghematan Sumber Daya Server: Server tidak perlu mengirim semua resource sekaligus, mengurangi beban kerja server.
Peningkatan Skor SEO: Kecepatan halaman adalah faktor peringkat penting bagi mesin pencari seperti Google. Lazy loading berkontribusi pada skor performa yang lebih baik di tool seperti Lighthouse dan PageSpeed Insights.
Pengalaman Pengguna yang Lebih Baik: Halaman terasa lebih responsif dan interaktif karena elemen-elemen penting muncul lebih cepat.

Baca Juga : Tips Optimasi Performa Website dengan Lazy Loading

Teknik Menerapkan Lazy Loading

Ada beberapa cara untuk menerapkan lazy loading, mulai dari yang paling sederhana hingga lebih canggih.

1. Lazy Loading Natave (Atribut `loading="lazy"`)

Ini adalah cara paling mudah dan direkomendasikan karena didukung langsung oleh browser modern (Chrome, Edge, Firefox, Safari). Kamu tidak perlu JavaScript tambahan.

Untuk Gambar: Tambahkan atribut loading="lazy" pada tag <img>.

HTML

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

Untuk iframe (termasuk Video YouTube/Vimeo): Tambahkan atribut loading="lazy" pada tag <iframe>.

HTML

<iframe src="https://www.youtube.com/embed/videoID" loading="lazy" allowfullscreen></iframe>

Kelebihan: Sangat mudah diimplementasikan, performa tinggi karena ditangani oleh browser secara native.
Kekurangan: Tidak didukung oleh semua browser lama (meskipun dukungan saat ini sudah sangat luas).

2. Lazy Loading Menggunakan JavaScript (Intersection Observer API)

Untuk kontrol yang lebih halus atau dukungan browser yang lebih luas (terutama untuk browser lama yang tidak mendukung native lazy loading), kamu bisa menggunakan JavaScript, khususnya dengan Intersection Observer API. Ini adalah API modern yang efisien untuk mendeteksi kapan suatu elemen masuk atau keluar dari viewport.

Logika Dasarnya:

Atur gambar/video dengan placeholder atau thumbnail di atribut src (atau data-src untuk gambar asli).
Gunakan JavaScript untuk membuat IntersectionObserver.
Ketika resource masuk ke viewport, IntersectionObserver akan memicu callback yang akan mengambil URL resource asli (misalnya dari atribut data-src) dan memuatnya.

Contoh Sederhana untuk Gambar:

HTML:

HTML

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

JavaScript:

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazyload");
  var lazyloadThrottleTimeout;

  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }

    lazyloadThrottleTimeout = setTimeout(function() {
      var scrollTop = window.pageYOffset;
      lazyloadImages.forEach(function(img) {
          if(img.offsetTop < (window.innerHeight + scrollTop)) {
            img.src = img.dataset.src;
            img.classList.remove('lazyload');
          }
      });
      if(lazyloadImages.length == 0) {
        document.removeEventListener("scroll", lazyload);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
      }
    }, 20);
  }

  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

(Catatan: Kode di atas adalah contoh dasar dan bisa dioptimalkan dengan Intersection Observer API yang lebih efisien dan modern).

Kelebihan: Kontrol penuh atas logika loading, kompatibilitas dengan browser lama jika di-polyfill. Kekurangan: Membutuhkan coding JavaScript, sedikit lebih kompleks.

3. Menggunakan Library Pihak Ketiga

Jika kamu tidak ingin menulis lazy loading script sendiri, ada banyak library JavaScript yang sudah jadi:

lozad.js: Library yang sangat ringan dan efisien menggunakan Intersection Observer API.
vanilla-lazyload: Opsi lain yang populer dan ringan.
yall.js (Yet Another Lazy Loader): Dikenal karena performanya.

Cara Kerja: Instal library, tambahkan kelas CSS khusus ke elemen yang ingin di-lazy load, dan inisialisasi library.

4. Lazy Loading untuk Video

Video adalah resource yang sangat berat. Menerapkan lazy loading pada video sangat direkomendasikan.

Atribut loading="lazy": Seperti <img> dan <iframe>, elemen <video> juga mendukung loading="lazy" untuk native lazy loading.

HTML

<video controls loading="lazy">
  <source src="video-asli.mp4" type="video/mp4">
  Browser Anda tidak mendukung tag video.
</video>

Video YouTube/Vimeo: Untuk video yang di-embed dari YouTube atau Vimeo, gunakan atribut loading="lazy" pada iframe seperti contoh di atas.
Thumbnail dan Klik untuk Memuat: Untuk performa terbaik, tampilkan thumbnail gambar dari video yang bisa diklik. Saat diklik, barulah iframe video (atau tag <video> asli) dimuat. Ini menghindari pemuatan JavaScript dan aset video dari pihak ketiga sampai pengguna benar-benar ingin menontonnya.

Baca Juga : Dasar-dasar Penguasaan Pemrograman Web

Tips Tambahan untuk Implementasi Lazy Loading yang Optimal

Berikan Dimensi: Selalu berikan atribut width dan height pada <img> dan <video> (atau CSS yang menentukan dimensinya). Ini membantu browser memesan ruang untuk resource tersebut dan menghindari "layout shift" yang buruk bagi user experience dan skor Lighthouse (Cumulative Layout Shift - CLS).
Gunakan Placeholder Visual: Hindari placeholder yang hanya berupa kotak kosong. Gunakan low-quality image placeholder (LQIP) atau warna latar yang sesuai agar halaman terlihat lebih menarik saat resource sedang dimuat.
Pertimbangkan Gambar Penting: Jangan menerapkan lazy loading pada gambar yang berada above the fold atau sangat penting untuk initial render halaman. Gambar-gambar ini harus dimuat segera.
Uji Performa: Setelah menerapkan lazy loading, gunakan tool seperti Google PageSpeed Insights atau Lighthouse untuk mengukur dampak pada kecepatan loading dan user experience.

Dengan menerapkan lazy loading secara bijak, kamu bisa secara drastis meningkatkan kecepatan website-mu, memberikan pengalaman yang lebih baik bagi pengguna, dan mendapatkan nilai plus di mata mesin pencari.