Troubleshooting slow page loads

Recently I encountered a slow loading page (ReactJS/webpack/node/express) ...
I did manage to pull the load time to a decent time.

I am sharing my findings on my page and the fixes I applied.

Know what is slowing it down

Dont make assumptions, measure it.
I loaded the page and used chrome developer tools to check what was slowing it down

My findings

1. Too many requests to my express server - At a time Chrome will open about 6 connections to a domain/ip and the rest of the requests to the same domain will be queued
2. Slow APIs (Adding to #1)
3. Some CSS and Images served from the server (Adding to #1)
4. Geography - I used browserstack and accessed it from different regions and I found some apis to be slower from geographies far away from my region
5. Big chunk sizes (ReactJS + Webpack)

Steps I took to fix these

1. Low hanging fruit move all CSS and images to a CDN like cloudfront or cloudflare
2. Slow APIs - Some APIs were serving the same data to all users. This data was periodically updated. I created a static json for these and hosted these on the CDN.
3. Slow APIs - Tweak my DB query which was serving some data unused by the clients.
4. Big chunk sizes - Removed unused imports, components not needed on the first render imported them dynamically, applied a terser in the webpack, enabled compression in express server (Separate post on this coming up soon)
5. Slow APIs - It might be worth looking at moving some APIs to AWS Lamda so that they can be served well in all regions
6. The smaller chunk sizes helped overall with the other geographies and also data on the CDN helped load the page faster on the other geographies

Key Takeaways

1. Measure before you fix
2. Cache where necessary
3. Dont serve un-needed data in your APIs
4. Apply compression to outbound data in express
5. Look at webpack tuning (uglify, terser)
6. Look at chunk sizes - refactor code
7. Do not import anything that needs a user action or which doesnt need rendering on the initial load, dynamically load the components also remove unused imports.

Link to my post on Dynamic loading components in ReactJS.
Also a post on late loading images in Chrome.