Studi Perbandingan Lazy Loading Native dan IntersectionObserver JavaScript Dalam Pengelolaan Konten Gambar Pada Pengembangan Website

Abstrak

Dengan meningkatnya penggunaan aplikasi web, optimasi performa halaman menjadi krusial, terutama dalam memuat elemen gambar dalam jumlah besar. Salah satu teknik yang digunakan untuk mengatasi permasalahan ini adalah lazy loading, yang memuat gambar hanya ketika elemen mendekati viewport pengguna. Penelitian ini membandingkan performa dua teknik lazy loading, yaitu Native Lazy Loading dan IntersectionObserver, pada halaman web yang identik dengan 20 gambar berukuran total 12 MB, diuji dalam kondisi jaringan yang sama selama 30 kali pengujian. Performa kedua teknik diukur berdasarkan tiga parameter utama: waktu pemuatan halaman, konsumsi memori, dan penggunaan bandwidth. Pengujian dilakukan menggunakan Chrome DevTools, serta dilengkapi dengan analisis statistik. Uji normalitas diterapkan untuk menentukan distribusi data, dilanjutkan dengan uji t jika data berdistribusi normal, atau uji Mann-Whitney jika data tidak normal. Hasil penelitian menunjukkan bahwa IntersectionObserver secara signifikan lebih cepat dalam waktu pemuatan gambar dan lebih efisien dalam konsumsi bandwidth dibandingkan Native Lazy Loading. Sebaliknya, Native Lazy Loading menunjukkan efisiensi lebih tinggi dalam penggunaan memori. Kesimpulannya, pemilihan metode lazy loading harus disesuaikan dengan kebutuhan optimasi spesifik dan prioritas kinerja aplikasi web.