How to score 100/100 on Google PageSpeed Insights

Maximum Google PageSpeed Insights score

Properly developed website with the good amount of content, lots of traffic and good credibility of your website are some of the keys for good SEO. But if your website speed is slow you might loose on SEO and lose potential customers. Google tool called PageSpeed Insights which you can use to measure your website performance and see which parts of your website needs to be fixed. In this article, I will show you on real example how you can with few tricks speed up your WordPress website and get a high score on Google PageSpeed Insights tool.

 

Scoring 100/100 Score

Perfect scenario for you website speed and SEO would be to score highest Google PageSpeed Insights score which is 100. While this can be achieved it is not something that you need to strive for because achieving that score can sometimes break your website functionality, user interface and user experience. Having the highest score on PageSpeed Insights tool won’t help you too much if your website is broken and your customer cannot finish checkout process on your website. Google has developed this tool mostly as a guideline on best website performance practices which we can use to get insights on which part of the website needs improvement.

 

Case Study – koekkenbutikken.dk

This presentation website is built for a furniture store in Denmark with an idea to have plenty of product images on the website so that customers can better see what is offered in the store. There are all sizes of images from 68x68px images used in main navigation to 1920x350px images used as hero images. Having a lot number of images on the website can usually hurt website speed performance but that can be easily avoided.

Before optimization, Google PageSpeed Insights score was 86/100 for Mobile and 84/100 for Desktop.

Google PageSpeed Insights results

Optimize Images

One of the thing that the Google PageSpeed Insights tool suggested was to optimize images and because this website has a plenty of them I’ve decided that this will be the first thing to do.

Optimization of the image means that we reduce her quality in order to reduce the file size of the image and because of that we need to make sure to not reduce the image quality too much or it will not look good. There are many way and tools to optimize the image, you can ask your designer to optimize the image in Photoshop or you can do it by yourself by using online tools like compressor.io or some of the many WordPress image optimization plugins. In this case, I’ve used WordPress plugin called EWWW Image Optimizer. The process of optimizing images with this plugin is quite easy.

After optimizing images with EWWW Image Optimizer, I’ve runned the Google PageSpeed Insights tool again to see results. The test showed that there are five images which needs to be optimized which is not bad if we consider that at the initial test there was total 32 images which needed to be optimized. I can say that EWWW Image Optimizer did a good job on this website, but since I wanted to reach better results I’ve tried to optimize this five images manually with compressor.io tool. I’ve managed to optimize three out of five images. Two of them didn’t looked good when I’ve tried to optimize them so I’ve thought that it would be better to leave them to look good than to force few more points on Google PageSpeed Insights tool.

Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content

This recommendation usually warns us that there are Javascript or CSS files which are loaded in the head of our website. On most of the WordPress websites, you will find that some of that files are style.css, jquery.js and jquery-migrate.js scripts. On this website it was only one CSS file which was rendering above the fold. To eliminate that problem I’ve used the plugin called Autoptimize.

After installing this plugin there are few sets that need to be adjusted. For eliminating CSS which rendered above the fold I’ve turned on “Optimize CSS Code?”, “Also aggregate inline CSS?” and “Inline all CSS?” settings.

CSS optimization

2. CSS optimization

After enabling optimization of CSS first thing that needs to be done is to make sure that website layout and design is not broken. The setting that I’ve turned on will combine CSS files and load them as an inline style in the head which can sometimes lead to broken website.

Reduce server response time

Google PageSpeed Insights tools reported that server which running this website has responded in 0.34 seconds and because of that the website was penalized for few points.

Reduce server response time

3. Reduce server response time

In order to reduce the server response time, I’ve decided to install cache plugin called Cache Enabler by KeyCDN. This plugin requires minimal setup time and offers great results by creating static HTML files which are stored on server disk. After the installing plugin and setting cache duration time in settings, the website was ready to pass another Google PageSpeed Insights test and score higher points.

Leverage browser caching

The most common reason for this warning is that web server doesn’t have appropriate headers in place and static files served from the server have a low expiry date because of which Google PageSpeed Insights tool fires warning. Because the server on which koekkenbutikken.dk is hosted already have proper headers in place, I didn’t get any warning for static files server from this server. I did however get this warning which means that something was not right.

Leverage browser caching

4. Leverage browser caching

As you can see in the image above, the files that fired this warning are the ones needed for Google Analytics, which are served from Google servers. You might think that it doesn’t make sense that Google will fire warning in PageSpeed Insights tool on its own files but it’s true. These files are served with low expiry date and because of that, the warning is fired. The reason because these files have a low expiry date is that when Google releases a new version of this files, it want’s to everyone receives a new version of this files as soon as possible.

There is a way to fix this warning by serving Google Analytics scripts from the server on which we have control to change expiry date, but since I’ve managed to get a pretty good score on Google PageSpeed Insights tool I’ve decided to not to concern with those two scripts.

 

Conclusion

Having big Google PageSpeed Insights score means that our website is performing very well and that Google will give it better SEO score, but there’s no need to strive for 100/100 score always. Especially on websites where having the maximum score can break website functionality or design. After all, the humans are the one which will use your website to buy your products, not the machines.

There are plenty of different tools which can be measured website performance and you need to consider using them also instead of only Google tools. In this article, I’ve covered only a few steps which can increase overall page speed and Google PageSpeed Insights tool score. Ther results can be seen in the image below.

98/100 on Mobile and 90/100 is a pretty good score.

Final results Mobile

Final Results Desktop

About the Author

Freelance WordPress developer who offers full stack web development services. Occasionally writes about business and WordPress development. When not in front of the computer can be found on a bicycle or enjoying other outdoor activities.

Leave a Reply 0 comments

Leave a Reply: