Micro frontend website optimization to increase load times: techniques, challenges, and best practice
Abstract
In recent years, there has been an increasing popularity of the micro frontend architecture due to its implementation by large companies such as IKEA, Starbucks, and Amazon. Due to its characteristics that similar to microservices, this architecture started to be implemented by various companies to improve their developer experience. However, this architecture has some issues, one of which is the performance of page load time. The objective of this research is to find and determine the best practices for optimizing the page load time of micro frontend applications and to identify the challenge involved. The research is conducted by implementing optimization techniques such as code splitting, lazy loading, tree shaking, minification, and utility modules to micro frontend website. After that, the website is tested with a sample size of 200 which determined by using Lemeshow formula. The research is conducted in both local and server environments using the Google Chrome browser and used "fully loaded" metric. The research use a simple Enterprise Resource Planning (ERP) application consisting of five micro frontends built with React, Vue, and Angular frameworks. The experimental results show that implementing all of the optimization techniques on all micro frontends can improve the application's page load time performance by 31.79% in the local and 47.5% in the server environment.
Downloads
References
S. Peltonen, L. Mezzalira, and D. Taibi, “Motivations, benefits, and issues for adopting Micro-Frontends: A Multivocal Literature Review,” Inf Softw Technol, vol. 136, Aug. 2021, doi: 10.1016/j.infsof.2021.106571.
Y. Prajwal, J. Viren Parekh, and R. Shettar, “A Brief Review of Micro-frontends,” United International Journal for Research & Technology, vol. 02, no. 08, pp. 123–126, 2021.
M. Kroiß, “From Backend to Frontend: Case Study on Adopting Micro Frontends from a Single Page ERP Application Monolith,” Vienna University of Technology, Vienna, 2021. [Online]. Available: www.tuwien.at
F. Rappl and L. Schöttner, The Art of Micro Frontends, 1st ed., vol. 1. Birmingham: Packt, 2021.
S. Newman, Building microservices : designing fine-grained systems, 1st ed., vol. 1. Sebastopol: O’Reilly Media, Inc., 2015.
A. A. Setiawan, A. S. M. Lumenta, and S. R. U. A. Sompie, “Rancang Bangun Aplikasi UNSRAT E-catalog,” Jurnal Teknik Informatika, vol. 14, no. 4, 2019.
B. Pourghassemi, “What-If Analysis of Page Load Time in Web Browsers Using Causal Profiling,” Proc. ACM Meas. Anal. Comput. Syst, vol. 3, p. 23, 2019, doi: 10.1145/3326142.
D. Tanudjaja and R. Tanone, “Analisis Penerapan Code Splitting Library React pada Aplikasi Penjualan Mebel Berbasis Website,” Jurnal Teknik Informatika dan Sistem Informasi, vol. 7, no. 2, Aug. 2021, doi: 10.28932/jutisi.v7i2.3493.
F. Yan, Z. Xu, Y. Shan Zhong, S. HaiBei, and C. Yun Ge, “Research on Performance Optimization Scheme for Web Front-End and Its Practice,” in Lecture Notes in Electrical Engineering, Springer Science and Business Media Deutschland GmbH, 2021, pp. 883–890. doi: 10.1007/978-981-15-8411-4_1.
S. Huang, “Load time optimization of JavaScript web applications,” Blekinge Institute of Technology, Karlskrona, 2019.
J. Koivukoski, “Reducing the loading time of a single-page web application Title Reducing the loading time of a single-page web application,” Thesis, Aalto University, Espoo, 2021. [Online]. Available: www.aalto.fi
S. Lemeshow, D. W. Hosmer Jr, J. Klar, and S. K. Lwanga, “Statistical Methods for Sample Size Determination,” in Adequacy of Sample Size in Health Studies, 1st ed.1990, pp. 1–44.
Setiawan, H., Mukhtar, H., & Soni, S. (2019). Aplikasi Pengenalan Situs Bersejarah Di Kota Pekanbaru Dengan Augmented Reality Markerless Berbasis Android. Jurnal Fasilkom, 3(2), 14–15.
Abstract views: 218 , 
PDF downloads: 184
