What we learned getting 100/100 score from Google pageSpeed insights

Topic: Case Study

 

Note: By the time some of you will be reading this, our score might be lower than 100 for reasons explained further into the article.

First things first, here’s a proof of our achievement:

page-speed-mobile

 

this will not be a technical article explaining how to improve your score in detail, the purpose of this article is to discuss if a score of 100 is worth the sacrifice. For those interested in technical details of how to achieve a higher pageSpeed score check this article or hit us up in comments section or via email.

If you would follow any guide that tells you how to improve the page speed, the most common and most effective things that you will see will be:

  • optimize images
  • remove render blocking javascript
  • enable compression
  • enable caching

if you would do 4 points above you would easily get to around 80 to 85 points. the real trick is to get the extra 15 though..

the main thing you will notice after solving all of the above that your css is counted towards render blocking scripts. this happens because all css files are being imported and thus while they are being downloaded rendering is being blocked.

the second main issue that you will notice is going to be caching issue – you will see that all your external scripts like google analytics reduce your page speed score even though they are loaded asynchronously.

So the main dilemma that you going to have is weather it is  practical to remove external scripts and cram your css directly to head using something like php include in order to have a nice round score of 100.

The reason why you have to put inline css is because google pageSpeed measures mainly above the fold content and it expects that it will have only the css that you need for that part of the page and the rest will be loaded via js – which for a wordpress site is a bit impractical to say the least.

so basically, to keep it short – don’t sweat about high page speed score as it measures only above the fold content, if you do the main optimizations right you will have around 85 with minimal effort anyway and retain the ease of managing css and ability to have external scripts.