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
Check the Javascript frameworks and language twists and turns(such as re-rendering in reactjs) and bla bla bla.
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
Website loads HTML file and if javascript is present it will be fetched, parsed compiled and executed.
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?
So out of HTML, CSS, JS and Image if we exclude the API response here the only thing that will occupy most of the time to be executed on the browser is Javascript.
Understand that images and large-size files are not the culprits every time.
For example, the graph below tells that if the same size image and same size javascript when loads in the browser, the javascript file takes more time to process than the image.