Updated on Oct 02, 2019
Trying to Score 90+ on PageSpeed Insights 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.
For example, it’s not hard to find tutorials that explain how to achieve 100/100 but some require you to inline all javascript files including Google Analytics, which would introduce an unmeasurable amount of technical debt into your codebase.
We invest lots of time into 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 you need to solve that will allow your site to score 90+ on PageSpeed Insights. You will acquire all the benefits that come with it, without jeopardizing the long term health of your domain.
The first and easiest win you will have when trying to attain a high PageSpeed Insights score is compressing the images on the site.
Graphics contain a huge amount of unused data that isn’t 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.
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 or any other service. 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.
Second on the list is server 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. There are various types of compression:
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;
gzip_comp_level 5;
gzip_min_length 256;
gzip_proxied any;
gzip_vary on;
gzip_types
application/atom+xml
application/javascript
application/json
application/ld+json
application/manifest+json
application/rss+xml
application/vnd.geo+json
application/vnd.ms-fontobject
application/x-font-ttf
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/opentype
image/bmp
image/svg+xml
image/x-icon
text/cache-manifest
text/css
text/plain
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;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.
If you serve your site through Cloudflare, enabling compression is even simpler. Just go to the Speed type and toggle the switch for Brotli compression. Brotli is a compression algorithm created by Google that can be faster than GZIP. Best of all, if a browser doesn’t support Brotli, Cloudflare will default back to GZIP.
A further change can be made on the server level to Score 90 With PageSpeed by Serving Static Assets With An Efficient Cache Policy.
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.
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 Serve Static Assets With An Efficient Cache Policy at the server level.
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.
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.
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.
Now you know How To Score 90 on PageSpeed and achieve good Web Vitals scores. 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.
Usually, Scoring 90+ in PageSpeed is a feat that only 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.