How To Score 90+ on PageSpeed Insights


Download PDF

Share


Trying to Score 90+ on PageSpeed is a process that consumes a lot of developer patience and energy.

Plenty of theories exist on the internet on how to do this but the effectiveness and longevity of many are questionable.

A prime example is the experts on MOZ that show you how to achieve 100 but fail to mention the long term problems that arise from inlining the Google Analytics javascript.

At Leader Internet, we invest heavily in researching and testing future proof Web Performance techniques because our research has shown that PageSpeed Matters for user experience, search rankings and ultimately revenue. This puts us in a good place to offer actionable advice that works.

This guide will explain the most important problems to solve that will allow your site to score 90+ on PageSpeed. You will acquire all the benefits that come with it, without jeopardizing the long term health of your domain.

Score 90 On PageSpeed

Compress Images

The first and easiest win you will have when trying to Score 90 or above on PageSpeed is compressing the images on the site.

Graphics contain a huge amount of unused data that is not needed to render a reasonable quality version of the image. Using a service like Kraken.io strips out all of this wasted information without any loss of quality or sharpness. They have a free Web Interface where you simply drag and drop your images and then download the compressed version underneath.

Thinking of the future

The Web Interface will solve your current image problems but websites are constantly receiving new content so you should automate the process of compressing images that are added in the future without having to manually upload them to Kraken. There are a variety of Kraken plugins for the major CMS’s and if your platform is not listed, integrating with their API is simple. It has excellent documentation, lots of code snippets for every language and works perfectly.

If you focus on one thing, make that image compression.

Enable Compression

Second on the list is GZIP compression.

This instructs your server to compress assets as they leave so the data in transit is smaller and the browser on the other end can download them quicker. The best thing about GZIP is that is simple to turn on and requires no code changes on the site.

Turning on GZIP is quick if you have Nginx and access to the nginx.conf file. Just add the following snippet:

gzip on;

Once this is done you should set further configuration options to make sure that the correct resources are compressed and an appropriate level is used to avoid problems. You also need to prevent the compression of anything that has already been compressed and unlikely to benefit from further processing.

We have a detailed guide on Enabling Compression with Laravel Forge that explains all of these considerations so you can follow that if your server is Nginx and take another step towards a 90+ Score On PageSpeed.

Users with Apache servers will not be able to lift these exact code snippets but the same principles apply.

Testing your site performance?

Try PageSpeed Plus. Like PageSpeed, but better

Leverage Browser Caching

A further change can be made on the server level to Score 90 With PageSpeed by Leveraging Browser Caching.

This is where your server tells browsers to cache certain files on the client side for a specified duration.

Again, you just have to add the following snippet to your nginx.conf file:

location ~*  \.(jpg|jpeg|png|gif|ico)$ {
    expires 7d;
}

For example, there is no point in browsers downloading a fresh version of the CSS every time they load a new page as most sites only update their CSS monthly at most.

Instead, if the browser caches the CSS for one week, it reduces the data that is downloaded from your server and the amount consumed by their browser. After 7 days the browser will see that its version of CSS has expired so it will fetch a new copy during the next request. If you have pushed updated CSS in the meantime, the user will receive it and if not, the previous version will be downloaded again.

Mobile

This is also important if your traffic is mobile as you don’t want to consume needless chunks of the user's monthly data limit.

If this process is new to you, we recommend you follow our step by step guide on how to Leverage Browser Caching at the server level.

Eliminate Render Blocking Javascript and CSS

The final trick on our list is Eliminating render-blocking Javascript and CSS. The topics discussed already will give you significant performance increases so you may already have a PageSpeed Score over 90.

Therefore, we purposely left this technique until the end because it requires code changes and planning to execute cleanly.

For many years best practices in Web Development have encouraged developers to place their JavaScript and CSS in external files because it allows for cleaner code and separation of concerns. This, however, means browsers need to make at least two additional HTTP requests to fetch the resources and a lot has to happen behind the scenes for those requests to complete.

In response, developers started putting the JavaScript in the footer so at least the style and layout would load with any interactive functionality provided by JavaScript deferred for a few seconds. Things went one step further with the arrival of CDN’s as they allowed developers to place assets in data centres all over the world so users always downloaded files from a node closest to them instead of the location of the origin server.

The solution

None the less, these techniques are just patches to an old problem that HTTP requests are time and resource intensive. The solution, therefore, is to reduce the number of requests a browser needs to make to fetch and render a webpage.

A very effective way to do that and achieve a 90+ PageSpeed score is inlining JavaScript and CSS. This means the code is inserted directly into the initial HTTP response and the browser can parse it immediately without having to make extra requests to pull down external files.

Inlined JavaScript

It takes some knowledge of Gulp and your website structure to pull off so follow our tutorial on Eliminating render-blocking Javascript and CSS for an end to end guide with screenshots.

PageSpeed Problems? Let us solve them. Talk to the pro's and speed up your site.

Contact

How To Score 90+ On PageSpeed Insights, Answered

Now you know How To Score 90 on PageSpeed. Firstly compress all existing images and those added in the future. Enable GZIP compression on the server and leverage browser caching of static assets. Finally, eliminate Render Blocking Javascript and CSS by inlining them. These four pillars of performance will keep your PageSpeed score high.

Conclusion

Usually, Scoring 90+ in PageSpeed is a feat that only skilled performance aware developers can achieve but with this guide, you have the tools, code snippets and step by step instructions to do it yourself.

Try it for yourself and let us know in the comments below if your site Scores 90+ on PageSpeed.

If you want to take a shortcut and where not aware of What CloudFlare Does, put it in front of your site for an isntant page speed boost.

If you found this article useful, sign up for our mailing list to get battle tested Web Performance and PageSpeed tips direct from the front line.

Bonus Content

Enter your email for access to the Web Performance and PageSpeed techniques we use to make our clients sites fast.

We’ll send you a PDF with our best tactics for creating blazing fast websites that rank highly in search engines.

Posted in Web Performance on Aug 28, 2017

Comments


Empty

Leave a Comment: