Restoring speed to a high-traffic React and Next.js application

Project background

As a high-traffic application grew, its React and Next.js frontend became slower to navigate and harder to maintain. The performance issues affected routine user journeys, including navigation to pages with little dynamic content.

Challenges

• Some route transitions took roughly one to two minutes, even when the destination page was largely static.
• Large lists, oversized bundles, and repeated CSS and JavaScript loading increased the work required to display each page.
• Duplicate API requests within and across pages added avoidable network activity.

My contributions

• Led a systematic audit of network activity, route transitions, component rendering, and bundle loading.
• Used Chrome DevTools, React DevTools, and Redux DevTools to identify bottlenecks before prioritizing changes.
• Implemented and reviewed performance improvements across the application.

Solutions

• Applied lazy loading, code splitting, bundle analysis, and tree shaking to reduce upfront JavaScript.
• Optimized image delivery using Next.js.
• Virtualized lists containing more than 10,000 rows so the browser rendered only the visible portion.
• Introduced TanStack Query caching to reduce repeated API requests across workflows.

Outcomes

• Reduced page load time by approximately 70%.
• Reduced redundant network calls by approximately 40%.
• Achieved green Core Web Vitals following the performance audit and improvements.
• Improved the user experience and supported user retention; no retention percentage is claimed.