Wanting to improve your Google Page Speed rating is great! It shows that you care about your visitors and their time, but clocking a green 90-100 score is only one step on the journey to better page performance
You want a better user experience, and Google Page Speed is only part of that story.
It may not be the whole picture, but it is still a great place to start.
How to improve Google Page Speed
When you run the Google Page Speed test, the returned results are accompanied by recommendations on what to do to improve your score
This is great, but what if a lot of the recommendations go beyond your technical knowledge? There are some tools you can use to get started, while avoiding heavy coding, on the road to better performance.
Front-end assets
The first tool is Cloudflare, which has a good range of options for improving your front-end assets, even at the free tier level. After you switch your domain to using Cloudflare’s DNS, these are the improvements you can do right away:
- Auto Minify (CSS, JavaScript, HTML)
- Activate Rocket Loader to load your JavaScript asynchronously (being in Beta at the time of writing so it requires proper testing). Google Adsense is known to have problems with this, hence the recommendation (thanks Ahmad Awais) to use the data-cfasync=false on its tag to disable Rocket Loader on it.
- Adjust Browser Cache Expiration to something longer than a month
None of the above require you to do any code changes to your site and they will have a measurable improvement to your site’s speed.
Image optimization
Image optimization should be part of your process, and here’s a good starting point.
- Use the right image format for the job:
- JPEGs for photos or rich colored imagery
- PNGs for images with few colors or which require transparency
- Compress your images, as the visual perceived difference between 100% quality JPEG and 50% quality JPEG can be minimal. Reducing quality by 50% will actually decrease the file size to a lot less than half of the original.
- Losslessly optimise the graphics using tools like ImageOptim.
- If you’re building your own theme, you should have this process automated.
Activating the Image Performance feature from the Jetpack plugin can give you another quick win as it not only applies lossless compression to your content image, it also delivers them using the new webp image format when your visitors are coming from a browser supporting webp.
These improve the delivery of assets, but it’s worth remembering that removing an asset request completely is always the fastest option. This is why removing the assets that don’t add much value to the user, or might not even be used any longer is one of the top strategies to improve your scoring. Ask yourself whether adding that extra custom font is worth the extra wait for your visitors.
Server-side
If you’re being flagged with the “Reduce server response time” recommendation, adding a caching layer would come in handy. You can check out this comparison of the most popular WordPress Caching Plugins for potential next steps. If things are slow in this area even with a caching plug-in enabled, you might need to look at either upgrading your hosting or look for another host altogether. The hosts we partner with abstract this layer so if you’re already on WP-Engine or Pantheon, it’s something you don’t need to worry about.
Another optimization where the server configuration plays a role is file compression. The widely adopted standard is gzipping of the assets, but the Brotli algorithm has gained popularity and offers even smaller file sizes, which makes it a solid contender for further decreasing the network payload. Take this up to with your hosting company as adding this type of features in can benefit all of their customers.
Beyond Google Page Speed
The recommendations from GPS are only a set of best practices, but there are other actions you can take that can have an even greater impact on your site’s speed.
Use HTTPS
If you haven’t already, moving to HTTPS has great performance benefits, as all major browsers have HTTP/2 support only while on HTTPs. This allows for a faster transmission of assets making concatenation less of a necessity. This helps with caching, as when a single asset of a few KB is changed, it won’t require expiring a large concatenated file.
Care for Time to Interactive
The Lighthouse tool from Chrome computes this metric representing the time it takes for the browser to finish all of the CPU intensive processing. Beyond the time to first paint (which is a metric GPS caters for), this is the next one in importance for the user experience.
One of the major causes for a slow time to interactive is having too much JavaScript in a web page – even if it’s loaded in a not render-blocking way.
This often results in a visitor being unable to click or use the interactive components on the page for a significant amount of time after the page is painted, which can be a major cause for user frustration.
Look for rendering problems
Google Chrome offers an easy way to spot animation jank. Scroll through your site with these tools turned on and click on interactive elements to uncover areas where the user experience might need some love and attention.
Third party assets can sometimes keep running in the background and make your website feel sluggish. So even though CSS would be the primary logical area to look for improvements when discovering visual jank, scripts can slow down the browser enough for it to not have enough resources left to maintain 60fps while interacting with the site. Aim at butter-smooth interactivity.
Test on low powered devices
Although in some parts of the words the internet is becoming faster by the day and the devices are being increasingly more powerful, that’s not necessarily the norm world-wide.
Things will most likely be very fast on flagship devices (if your site is slow even on such a device, you need to urgently invest some time into improving your site), but you need to look beyond them. Take your old phone, dust it off and see how fast (or slow) your website loads on an average device.
Manual analysis
Automated tools can only do so much, and their input is definitely useful in highlighting areas with the biggest problems, but there’s nothing more useful in order to bring all performance efforts home as a thoughtful and thorough analysis of all the pieces that make a website and how they work together.
Even though testing your website against the plethora of online web performance testing tools available is a good starting base, taking it a notch further is definitely worth it and your users will appreciate it – by staying longer on your website and coming back again and again.
So, you’ve done all of the above and are ready to hit your home run? Well, now it’s time to really flex your muscles and turn your website into a Progressive Web App… but we’ll talk about that some other time.
This is a good one, Mike.
One minor suggestion, though, activating Rocket Loader from CloudFlare can cause issues with Google AdSense. Both rev wise and loading wise. You might wanna look into that.
Peace! ✌️