Perbandingan Efektifitas Teknik Code Splitting dan Lazy Loading dalam Meningkatkan Efisiensi Website ReactJS (Studi Kasus: Website Pemesanan Perkemahan Bedengan)

Prakoso, Gideon Aji
Kharisma, Agi Putra
Rahman, Muh. Arif

Jurnal Pengembangan Teknologi Informasi dan Ilmu Komputer
Vol 9 No 8 (2025): Agustus 2025

Performa website merupakan hal yang krusial dalam menilai keberhasilan sebuah website. Sebuah website ReactJS yang memiliki visual kompleks seringkali mempunyai bundle JavaScript besar yang dapat menghambat waktu muat dan interaktivitas. Dua teknik optimasi front-end yang umum digunakan adalah code splitting dan lazy loading. Penelitian ini bertujuan untuk membandingkan efektifitas kedua teknik tersebut dalam meningkatkan performa website ReactJS. Penelitian ini menggunakan pendekatan non-implementatif analitik dengan studi kasus berupa website Pemesanan Perkemahan Bedengan. Website ini dimodifikasi menjadi dua versi: versi dengan code splitting dan versi dengan lazy loading. Pengujian dilakukan menggunakan Google Lighthouse untuk mengukur metrik First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Speed Index. Data hasil dari pengujian dianalisis secara statistik mengunakan uji komparatif ANOVA dan Kruskal-Wallis. Hasil penelitian menunjukkan bahwa baik code splitting dan lazy loading efektif dalam menurunkan waktu pemuatan website ReactJS dibandingkan tanpa optimasi. Namun, lazy loading menunjukkan keunggulan yang spesifik pada Total Blocking Time (TBT). Hasil ini mengindikasikan bahwa lazy loading relevan untuk website dengan banyak aset dan struktur halaman yang panjang. Sementara untuk code splitting efektif untuk website dengan banyak rute yang diakses oleh pengguna.