Perbandingan Teknik Pemuatan Awal Eager Loading dan Lazy Loading Intersection Observer Terhadap Performa Website

Abstract

Abstrak— Perkembangan teknologi informasi mendorong kebutuhan website dengan pengalaman pengguna optimal, khususnya pada konten visual dominan. Penelitian ini membandingkan performa teknik Eager Loading dan Lazy Loading Intersection Observer pada website Pusat Informasi Keamanan Siber (CSIC) berbasis Laravel. Pengujian menggunakan Chrome DevTools pada enam skenario dengan metrik First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Load Time, Total Request, dan Total Page Size. Hasil pengujian halaman utama menunjukkan Lazy Loading Intersection Observer unggul pada FCP (1,13 detik) dan load time (162 request, 238 MB), sedangkan Eager Loading unggul pada LCP (3,66 detik) berkat atribut fetchpriority dan preload. Pada halaman dashboard, Lazy Loading Intersection Observer mendominasi seluruh metrik dengan load time 0,68 detik, 16 request, dan ukuran halaman 1,7 MB, dibandingkan Eager Loading yang mencapai 157,33 detik, 261 request, dan 241 MB. Pengujian ukuran aset gambar menunjukkan perbedaan performa semakin signifikan pada gambar berukuran besar (>1 MB). Pada halaman berbasis teks (Berita), ketiga teknik menghasilkan performa yang relatif serupa dengan LCP identik 2,23 detik karena tidak bergantung pada konten gambar. Pengujian orientasi layar menunjukkan mode portrait menurunkan performa Lazy Loading Intersection Observer secara signifikan pada halaman utama, dengan TBT mencapai 253,33 ms dan LCP hingga 28,57 detik. Kesimpulan penelitian menunjukkan tidak terdapat satu teknik yang unggul secara mutlak. Lazy Loading Intersection Observer lebih optimal untuk halaman berkonten visual padat dan interaksi berbasis scroll atau tab, sedangkan Eager Loading lebih sesuai untuk halaman yang membutuhkan konsistensi tampilan menyeluruh.

Kata Kunci— Eager Loading, Lazy Loading, Intersection Observer, Laravel, Web Performance.