How to Score 90+ on Google Page Speed
January 7th, 2018 by Allen Brady
Your site's page speed is pretty important. Not only is slow page speed a poor user experience, it also affects your SEO. Google has stated that it's part of their algorithm when ranking pages in search indexes. Slow loading pages also lose visitors, contributing to higher bounce rates and lower conversions.
Here's how to fix some of the most common factors that contribute to these low scores.
Optimize Your Images
One of the easiest things you can do to boost page performance is optimize your images. Popular tools like TinyPNG make it as easy as drag-and-drop. If you're on WordPress you can install their plugin to automatically optimize any JPEGs or PNGs you upload. Awesome!
SVGs can (and should) be optimized as well. SVGOMG (a GUI for the popular SVGO optimizer) makes this incredibly simple and even allows you to make further edits all within the browser. If you use Sketch to create SVGs there's even a native plugin you can install to automatically run your SVGs through SVGO on export.
Minify Your CSS and JavaScript
This is another optimization that takes little effort but can have a decent impact on performance. If you can make edits directly to your website's files then it's as easy as running your scripts through an optimizer, such as Minifier. Just paste your JS/CSS in the box, hit Minify and you're good! Bonus: if you search for "minify CSS/JS" in DuckDuckGo you can minify your code right in the search results. Cool!
Of course, manually minifying your scripts isn't great. This is even more true you're frequently making changes. If you develop locally you have a few options to automation a number of optimizations to your website. My personal choice is Codekit for macOS. You can minify the output of all your files, compile any language or preprocesser you choose to work with such as Sass and Typescript, has built in linting tools to help you code better, and other great tools to assist with development.
If you're on Windows or would rather use the terminal for your task running needs you can check out Grunt, Gulp, Webpack, or just native NPM scripts. We won't go into detail here of what task runner to choose (that can be a whole article in itself!) but it's best to pick something to compile and optimize your assets before sending them to production.
Not everyone has access to the source files though. If you find yourself in such a situation you still have some options. If you're on WordPress check out Hummingbird by WPEMU DEV. This plugin will run through a checklist of optimizations your site might need and will walk you though each one. It'll also handle minifying, deferring and inlining CSS and JS automatically. Be cautious though since you can break WordPress sites meddling with scripts like this. Always make backups!
Eliminate render-blocking JavaScript and CSS in above-the-fold content
This one can be a real head scratcher. The other issues Google lists for page speed optimization are fairly straightforward: minify your output for smaller file sizes. However, to really address the issue of render-blocking Javascript and CSS you'll have to (likely) rethink how you structure the pages themselves.
The general rule of thumb is that stylesheets should load in the <head> and scripts in the footer just before the closing </body> tag. Sticking all your scripts in the footer only solves part of the problem though. To fully eliminate this issue you'll need to be mindful of the "critical rendering path" and inline your critical CSS.
There are a number of tools online that can help you manually and automatically inline your critical CSS: Critical will help you automate the process with Gulp, while Critical Path CSS Generator will give you the output manually. Going about the process manually is fine for quickly optimizing existing sites, but for long-term projects you should look into a build process.
Leverage Browser Caching
If you're using a number of external tracking scripts on your website chances are you'll run into this issue. To be honest, you can likely ignore this one. The general rule of thumb still applies though: only have what scripts are true necessary and get rid of the rest.
Sometimes you do need all those external scripts and you still want that perfect page speed score. If so you can combine your tracking scripts into one and then load them after the rest of the page has finished loading. Varvy explains this technique well and we've used in on our clients' websites with great results.
But that's not all!
While these are the most common performance issues that websites run into, they're not the only ones. To reduce server response time you'll want to make sure you're rolling with a great web host, preferably on a VPS instead of traditional shared hosting. Gzip compression (or Brotli) should also be enabled and HTTPS should be the default. For larger, on-going projects you might even want to set a performance budget.