Optimizing startup of web app
Recently I read an article on HN on how to Get 100/100 Google Page Speed Score,
and wondered how high score I can get with my online text editor/IDE ...
What I started out with
A test run of webide.se gave me a Google PageSpeed Insights score of 33 / 100 for mobile and 40 / 100 for desktop, and the overall rating of, quote: "Poor".
Google uses page speed to sort search results, so improving the score would be good for Search Engine Optimization (SEO).
Lets fire up Chromium dev tools and the Performance tab to see what's going on ...
That's around 1000ms (one second) to load the app, which isn't bad, but it's idle for ca 700ms, and we can probably do something about that.
If you look at the waterfall we can see that the browser loads six files at a time, as the editor has a lot of JS files, that's a lot of time wasted.
I also tested it in production where HTTP2 is enabled, but it still looks like the waterfall, although smoother.
The idle time has now gone from 700ms to 10ms and the total load time from 1000ms to around 230ms!
Lets see what PageSpeed Insights say now when we've made it 3 times faster:
65 / 100 (+32) on mobile and 79 / 100 (+39) on Desktop, with the overall rating of, quote: "Needs Work" ...
This is what PageSpeed Insights suggests I should do:
- Prioritize visible content
- Minify HTML
- Enable compression
- Minify CSS
This is the Nodejs script I use to make the bundle:
When it comes to optimizations - do not take things for granted!
Never do premature optimizations. Always measure the result of the optimization!
74 / 100 (+9) on mobile and 89 / 100 (+14) on Desktop. It gave us an reward for the lowering the file size!
That tiny CSS file is still slowing us down though, as the app needs to wait for it to render.
Inlining CSS requires some extra work as we have to change all the relative paths ... What else can we do ?
Idle time and total load time went up ca 40ms, not as expected.
Inline the CSS
I made this Nodejs script to do the inlining, same as above, but also inlines CSS. It doesn't minify the CSS or HTML, but there's modules for that, so it shouln't be that difficult to add.