The Process I Followed to Optimise the Performance of a React App

A case study of improving our React Progressive Web App (PWA)

Photo by Jaromír Kavan on Unsplash

Context

The Process

Metrics and Measurements

First Contentful Paint (FCP) -> Perceived Load Speed, First Input Delay (FID) -> Load and Runtime Responsiveness, etc.
First Contentful Paint (FCP) -> Perceived Load Speed, First Input Delay (FID) -> Load and Runtime Responsiveness, etc.

Tooling, Auditing, and Knowledge Sharing

Lab metrics

Field Metrics

Performance Improvements

Landing page

Analyzing the JavaScript bundle size using Webpack Bundle Analyzer.
Analyzing the JavaScript bundle size using Webpack Bundle Analyzer.
Bundle size after our simple fix.
Bundle size after our simple fix.
Result from running the bundle analyzer again.
Result from running the bundle analyzer again.
The AnnounceYourHouse landing page was reduced to 90 KB.
The AnnounceYourHouse landing page was reduced to 90 KB.
Performance improvements: Before: 90 KB. After: 48 KB.
Performance improvements: Before: 90 KB. After: 48 KB.
The total size of the landing page reduced drastically: -2.16 MB.
The total size of the landing page reduced drastically: -2.16 MB.
The Lighthouse Performance Score went up from 73 to 97
The Lighthouse Performance Score went up from 73 to 97
The Largest Contentful Paint was improved by one second.
The Largest Contentful Paint was improved by one second.
When running npm run bundle:analyzer, we also noticed a big dependency in our vendor chunk.
we prevented the full import of the library in the vendor chunk.
we prevented the full import of the library in the vendor chunk.
Performance improvements: Vendor: ~2.83 MB. Main: ~530 KB.
Performance improvements: Vendor: ~2.83 MB. Main: ~530 KB.

Main Chunk

Running the bundle analyzer on the main chunk.
The main chunk is way smaller, and webpack created more page-specific chunks as well.
The main chunk is way smaller, and webpack created more page-specific chunks as well.
Performance Improvements: Vendor: ~690 KB, Main: ~700 KB.
Performance Improvements: Vendor: ~690 KB, Main: ~700 KB.

Caching the Biggest Dependencies

Biggest dependencies: firebase, @braze, transit, @material-ui, react-dom, aplitude-js, immutable-js
Along with CommonsChunkPlugin, we just needed to iterate through this list to create each chunk.
Along with CommonsChunkPlugin, we just needed to iterate through this list to create each chunk.
Running the application, we can also test the download of each separate chunk.
Running the application, we can also test the download of each separate chunk.
Performance improvements: Vendor: 1.2 MB
Performance improvements: Vendor: 1.2 MB
As expected, we saw a huge improvement in the JavaScript size: -1.43 MB.
As expected, we saw a huge improvement in the JavaScript size: -1.43 MB.
Decreasing the JavaScript size also had an impact on the total time the user is blocked to interact with the page: -1.2s.
Decreasing the JavaScript size also had an impact on the total time the user is blocked to interact with the page: -1.2s.
We improved the page’s loading speed by 2.2 seconds.
We improved the page’s loading speed by 2.2 seconds.
And the Largest Contentful Paint went from 6 seconds to 3.75 seconds.
And the Largest Contentful Paint went from 6 seconds to 3.75 seconds.

Recap

Next Steps

Resources

Get the Medium app