An Experimental Evaluation of Lazy Loading and Code Splitting for React.js Performance Optimization

Abstract

React.js-based single-page applications often suffer from large initial bundle sizes, leading to degraded performance, particularly on mobile and low-bandwidth networks. As application complexity grows, large JavaScript bundles must be fully downloaded and parsed before any content is rendered, resulting in slower startup times and a poor user experience. Although lazy loading and code splitting are widely adopted in practice, controlled experimental validation within React.js environments remains limited. This study implements these techniques using React.lazy(), Suspense boundaries, and Webpack’s SplitChunksPlugin, and evaluates their combined impact under three simulated network conditions (Fast 4G, Slow 4G, and 3G) using Google Lighthouse in mobile simulation mode. A controlled prototype application comprising multiple functional pages and realistic third-party dependencies was developed in both baseline and optimized configurations. Experimental results demonstrate a 47.3% reduction in initial JavaScript transfer size, a 39.8% improvement in First Contentful Paint (FCP), and a 52.1% reduction in Total Blocking Time (TBT). Performance benefits are most pronounced under constrained 3G conditions, where absolute FCP gains exceed 2,200 ms. Statistical analysis using paired t-tests confirms that these improvements are significant (p < 0.01). Despite a limited sample size (n = 5), the controlled experimental design ensures consistency and reproducibility. The findings provide empirical evidence supporting lazy loading and code splitting as effective, production-ready frontend performance optimization strategies for modern React.js applications.