To motivate is further, the winning team would win a small prize and eternal worship of our peers.
Long version of this post : https://www.the-reference.com/en/blog/jeroenvantroyen/2019/google-hackathon
Expectations
I'm used to using PageSpeed Insights. Most of our projects already score in the 80 range. So, to be honest, I didn't anticipate huge improvement in score.Boy, was I in for a surprise!
Turns out Google recently changed the scoring system and is now expecting a lot more from us.
The tool we were to measure speed with was Lighthouse, built into Chrome DevTools (F12).
Lighthouse immediately makes a bunch of suggestions on how to improve your score.
Techniques
If you're interested in the techniques we applied to our project, you can read the technical details here : https://www.the-reference.com/en/blog/jeroenvantroyen/2019/google-hackathon
The result?
The resulting score at the end of the day was very satisfying. We now scored 90% on performance.
Putting theory to practice
After all we'd learned, I was itching to put my newfound knowledge to good use, so I revisited my last project (Skyn) and checked it's initial score and suggestions.
Wait, 17%? AND I forgot to check minimization of Javascript AND css?
With an effort of less than 2 hours, the result is below. The site also feels more snappy than it used to.
When there's more time, I plan to split scripts in a critical and a non-critical bundle, then defer the last one. Split CSS in critical inline and loadCSS the rest.
Good luck!
Wait, 17%? AND I forgot to check minimization of Javascript AND css?
With an effort of less than 2 hours, the result is below. The site also feels more snappy than it used to.
When there's more time, I plan to split scripts in a critical and a non-critical bundle, then defer the last one. Split CSS in critical inline and loadCSS the rest.
Play with it!
How about you? Let me know if a few simple tricks, a couple of hours well-spent, can improve your pagespeed.Good luck!
