ANALISIS KOMPARATIF PERFORMA IMPLEMENTASI LAZY LOADING DAN CODE SPLITTING PADA FRAMEWORK REACT, VUE, DAN ANGULAR BERDASARKAN SKOR LIGHTHOUSE

Authors

Alwan Alfian Setiawan Universitas Widyatama
Esa Fauzi Universitas Widyatama

DOI:

https://doi.org/10.31539/intecoms.v8i3.15847

Abstract

Optimasi performa aplikasi web sangat penting untuk meningkatkan pengalaman pengguna dan efisiensi akses data. Penelitian ini membandingkan implementasi teknik Lazy Loading dan Code Splitting pada tiga framework JavaScript populer: React, Vue, dan Angular. Metode penelitian menggunakan pendekatan eksperimental dengan membangun aplikasi serupa di masing-masing framework dan mengukur performanya menggunakan Google Lighthouse. Fokus pengukuran meliputi metrik First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), dan Performance Score. Hasil menunjukkan bahwa React memiliki performa terbaik dengan waktu muat tercepat dan unggul dalam stabilitas layout. Vue menawarkan fleksibilitas komponen yang baik, sedangkan Angular menunjukkan konsistensi performa meskipun dengan skor dan waktu muat yang lebih rendah. Temuan ini memberikan panduan bagi pengembang dalam memilih framework dan teknik optimasi untuk aplikasi web yang responsif dan efisien.

References

Aditya Kappagantula. (2025). Optimizing JavaScript application performance: A comprehensive guide. International Journal of Science and Research Archive, 14(1), 1279–1303. https://doi.org/10.30574/ijsra.2025.14.1.0234

Aida, A., Hermina, D., & Norlaila, N. (2025). JENIS DATA PENELITIAN KUANTITATIF (Korelasional, Komparatif, Dan Eksperimen). Al-Manba Jurnal Ilmiah Keislaman Dan Kemasyarakatan, 10(1), 31–40. https://doi.org/10.69782/almanba.v10i1.48

Angular. (2025). Angular versioning and releases. AngularJS Documentation. https://angular.dev/reference/releases

Angular Documentations. (2025). Lazy-loading feature module. Angular. https://v17.angular.io/guide/lazy-loading-ngmodules

Batoon, J. A., & Calizon, J. M. (2025). Comparative Review for the Edges among JS Frameworks: Angular vs React in Web Application Development. International Journal of Multidisciplinary: Applied Business and Education Research, 6(5), 2386–2400. https://doi.org/10.11594/ijmaber.06.05.23

Chrome for Developers. (2024). Analyze runtime performance. Google.

Correia, F., Ribeiro, O., & Silva, J. C. (2021). Progressive Web Apps Development: Study of Caching Mechanisms. 2021 21st International Conference on Computational Science and Its Applications (ICCSA), 181–187. https://doi.org/10.1109/ICCSA54496.2021.00033

Dinh, D., & Wang, Z. (2020). MODERN FRONT-END WEB DEVELOPMENT-How libraries and frameworks transform everything.

Dubey, V., Bhimrao, B., & Verma, S. (2025). Evaluating The Digital Performance and Accessibility of IIT Library Websites Using Google Lighthouse. Article in International Journal of Computer Sciences and Engineering, 13(3), 16–23. https://doi.org/10.26438/ijcse/v13i3.1623

Guo, Z., Lv, S., Li, J., Luo, X., Ji, Q., Zhang, H., Chen, L., & Ma, H. (2023). Design and implementation of transformer state sensing and predictive operation and maintenance system interface based on Ant Design Vue. 2023 3rd International Conference on Electrical Engineering and Mechatronics Technology (ICEEMT), 233–237. https://doi.org/10.1109/ICEEMT59522.2023.10263256

Heričko, T., Šumak, B., & Brdnik, S. (2021). Towards Representative Web Performance Measurements with Google Lighthouse. 39–42. https://doi.org/10.18690/978-961-286-516-0.9

Huotala, A., Luukkainen, M., & Mikkonen, T. (2022). Benefits and Challenges of Isomorphism in Single-page Applications: Case Study and Review of Gray Literature. Journal of Web Engineering, 21(8), 2363–2404. https://doi.org/10.13052/jwe1540-9589.2186

Jain, V. (2022). OPTIMIZING WEB PERFORMANCE WITH LAZY LOADING AND CODE SPLITTING. International Journal of Core Engineering & Management, 7. https://doi.org/10.5281/zenodo.14956631

Khoirurrizal, M. F., Hidayat, C. R., & Ruuhwan, R. (2024). ANALISIS PERBANDINGAN FRAMEWORK FRONT-END JAVASCRIPT SOLIDJS DAN VUEJS PADA PENGEMBANGAN WEBSITE INTERAKTIF. Jurnal Informatika Dan Teknik Elektro Terapan, 12(2). https://doi.org/10.23960/jitet.v12i2.4106

Kryk, J., & Plechawska-Wójcik, M. (2025). Multi-aspect comparative analysis of JavaScript programming frameworks – React.js and Solid.js. Journal of Computer Sciences Institute, 34, 68–75. https://doi.org/10.35784/jcsi.6712

Kuparinen, S. (2023). Improving Web Performance by Optimizing Cascading Style Sheets (CSS): Literature Review and Empirical Findings. http://www.cs.helsinki.fi/

Mehmood, A. (2023). WEB DEVELOPMENT FRAMEWORKS: COMPARING REACT, ANGULAR, AND VUE. Computer Science Bulletin.

Meta Open Source. (2025). lazy. React. https://react.dev/reference/react/lazy

Narender Reddy Karka. (2025). Front-End Performance Optimization: A Comprehensive Guide. International Journal of Scientific Research in Computer Science, Engineering and Information Technology, 11(2), 83–100. https://doi.org/10.32628/CSEIT251112389

React. (2025). React Versions. Meta Open Source. https://react.dev/versions

Sinha, K., & Sinha Jana, D. (2024). The Role of JavaScript Frameworks in Performance Optimization: A Comparative Study (Vol. 10).

State of JavaScript. (2024). FRONT-END FRAMEWORKS. https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/

Syahrizal, H., & Jailani, M. S. (2023). Jenis-Jenis Penelitian Dalam Penelitian Kuantitatif dan Kualitatif. Jurnal QOSIM Jurnal Pendidikan Sosial & Humaniora, 1(1), 13–23. https://doi.org/10.61104/jq.v1i1.49

Tanudjaja, D., & Tanone, R. (2021). Analisis Penerapan Code Splitting Library React pada Aplikasi Penjualan Mebel Berbasis Website. Jurnal Teknik Informatika Dan Sistem Informasi, 7(2). https://doi.org/10.28932/jutisi.v7i2.3493

Tripon, T.-D., Adela Gabor, G., & Valentina Moisi, E. (2021). Angular and Svelte Frameworks: a Comparative Analysis. 2021 16th International Conference on Engineering of Modern Electric Systems (EMES), 1–4. https://doi.org/10.1109/EMES52337.2021.9484119

Tutul Hossain, Md., Hassan, R., Amjad, M., & Rahman, Md. A. (2021). Web Performance Analysis: An Empirical Analysis of E-Commerce Sites in Bangladesh. International Journal of Information Engineering and Electronic Business, 13(4), 47–54. https://doi.org/10.5815/ijieeb.2021.04.04

Verma, D. (2022). A Comparison of Web Framework Efficiency– Performance and network analysis of modern web frameworks. Theseus.

Vue. (2025). Releases. VueJS Documentation. https://vuejs.org/about/releases

Vue Router Documentations. (2025). Lazy Loading Router. Vue Router. https://router.vuejs.org/guide/advanced/lazy-loading.html