dev-resources.site
for different kinds of informations.
Troubleshooting slow page loads
Published at
5/22/2024
Categories
webdev
performance
beginners
react
Author
amythical
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
- 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
- Slow APIs (Adding to #1)
- Some CSS and Images served from the server (Adding to #1)
- 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
- Big chunk sizes (ReactJS + Webpack)
Steps I took to fix these
- Low hanging fruit move all CSS and images to a CDN like cloudfront or cloudflare
- 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.
- Slow APIs - Tweak my DB query which was serving some data unused by the clients.
- 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)
- Slow APIs - It might be worth looking at moving some APIs to AWS Lamda so that they can be served well in all regions
- 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
- Measure before you fix
- Cache where necessary
- Dont serve un-needed data in your APIs
- Apply compression to outbound data in express
- Look at webpack tuning (uglify, terser)
- Look at chunk sizes - refactor code
- 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.
Articles
12 articles in total
A rec, CNAME, TXT recs
read article
Troubleshooting slow page loads
currently reading
Call C binary from javascript WITHOUT process.exec
read article
Unresponsive UI and a busy main thread?
read article
My mistake with resolve and return resolve
read article
AWS Cognito terms that confused me
read article
Nodejs axios certificate error
read article
Webpack4 fix for .mjs files
read article
Lazy loading components in ReactJS
read article
Lazy loading images using JS & ReactJS
read article
Simple function to print table in browser console
read article
New to DEV.to - About me
read article
Featured ones: