This is part of my journey on understanding performance,
Behaviour right now ( CPU throttled X4 ) Screenshots are from Chrome’s Performance Tab
After 4.7 sec, The first glimpse of the layout if rendered:
As you can see Some of the icons are missing, the Top bar is white because the background asset didn’t arive yet, and its basically a mess.
I looked in
navigation.scss over this line
And I changed it to
background: #01749d url('navbar.png');
Now the background has a default color before the img asset arrives, but still 4.7s is a lot. What more can be done in the client side? So i tried
react-loadable which dynamically loads a component, while rendering a loading component in the mean time.
I wrote this helper file that can help us:
Now exporting components dynamically is easy.
index.js of the
Layout looks like this:
Behaviour with the Changes (Still X4 Throttle)
After 4.00 sec we see the loading layout:
Thats an improvement of 700ms!
After this we see the rendered Component without assets but with a Topbar at least thanks to the CSS change
And finally the Full layout renders as we all know it.
I think these changes open up doors for
react-loadble resulting in a much more pleasant way of full page reloading . I’m still learning and trying to understand how to fetch the assets faster from the server side but this is a good start. Thoughts?