Why websites are slow — Importance of bundle size
Not Reactjs, not a framework or the servers, or API , nor the internet is the reason behind it.
Under the Hood
The story begins way back exactly one year ago. When I was covering stories on react and react native apps optimisation.
I have covered more than 15 ways in a single story on how to improve react app performance.
This is the beauty of software development it’s never stagnant or monotonous. Because today even after one year, I read a new story that tells the impact of bundle size on application performance and a mind-boggling story to understand why websites can be slow.
Right under the nose
For one year I have covered so many stories on react application optimisation but today I have got a new perspective on seeing react applications.
Bird EYE perspective — Find the root cause of problems
See it’s not rocket science but let me explain with the story -
We first create an application in Reactjs
Then we use Framework and packages and add code
If our senior developer requests us to improve our React app performance, we always proceed in the so-called universal direction as explained
Check the image size
Check the internet
Check the API
Check the code structure architecture or size of the repository
But what if I told you to follow Bottom to Top approach instead?
Let’s start with the question —
How browser loads the website?
The server sends the app bundle or response such as HTML to the browser
Followed by loading of CSS
Lastly, images are loaded or being lazy loaded
Cool, so, what really can be the reason for the entire website being slow?
Ofcourse, the things which will take time, isn’t it?
Understand that images and large-size files are not the culprits every time.