How to improve PageSpeed and WPT metrics on WordPress

On a previous post, I talked about changes I had to make to the way DNS is handled on CloudFlare. The whole reason for utilizing CloudFlare in the first place was to protect the site from DDoS attacks and to speed it up its responsiveness. CloudFlare has edge servers all over the world and that allows you, the site owner, to use them to provide your users with a faster experience on your site by reducing the latency between them (the users) and your application.

With that said, there are two popular web performance metrics to keep in mind; PageSpeed and WebPage Test. Your goal is to have as high a score as possible. PageSpeed provides you a numerical score up to 100 and they individualize it between mobile and desktop. WebPage Test (WPT) provide a letter-score for various metrics; A being the best and F being the worst.

My testing began with CloudFlare enabled and with this metrics baseline:

WebPage TestPageSpeed
First Byte Time: F
Keep-alive Enabled: A
Compress Transfer: A
Compress Images: A
Cache Static Content: F
Load Time: 3.0s
First Byte: 1.6s
Start Render: 3.0s
Mobile: 25
Desktop: 53

In my experience, in order to improve the metrics, I had to use two different solutions; local caching and JS/CSS optimizing.

The WP ecosystem is full of plugins. There are so many plugins that address the issues above. The trick is to find the simplest, lightest, plugin that can do the job. To address WPT metrics I chose Simple Cache. To address the PageSpeed metrics I used Autoptimize.

Simple Cache, like the name implies, is a simple caching plugin. There is very little in the form settings. You simply enable it and that’s it. By enabling Simple Cache I was able to reduce First Byte Time by 300%, Load Time and Start Render time by 200%.

My new WebPage Test metrics looked like this:

WPT Before Simple Cache WPT After Simple Cache
First Byte Time: F
Keep-alive Enabled: A
Compress Transfer: A
Compress Images: A
Cache Static Content: F
Load Time: 3.0s
First Byte: 1.6s
Start Render: 3.0s
First Byte Time: B
Keep-alive Enabled: A
Compress Transfer: A
Compress Images: A
Cache Static Content: C
Load Time: 1.5s
First Byte: 0.4s
Start Render: 1.1s

My PageSpeed metrics remained pretty static. They hovered around mobile 25-29 and desktop 55-61. That’s where Autoptimize came in. Autoptimize has more features than Simple Cache, but less than most other tools that perform the same functions (hence I like it). I spent a lot of time playing with Autoptimize and the simplest, most effective, settings were as follows:

Main (checked)Extra (checked)
Optimize HTML
Optimize JS Code
Aggregate JS Files
Optimize CSS Code
Aggregate CSS Files
Save aggregated script…
Also optimize for logged in user
Remove Google Fonts
Remove query strings …

With those settings I was able to improve PageSpeed’s mobile score by 150% and the desktop score by almost 90%.

PageSpeed Before AutoptimizerPageSpeed After Autoptimizer
Mobile: 25
Desktop: 53
Mobile: 63
Desktop: 99

One thing for which I could not find a solution, without breaking ads, was a PageSpeed error you get on mobile regarding Preload key requests. If you are using ads, the Google script you need to include on your pages cannot be modified to satisfy the recommendation from PageSpeed. I tried various options, but each option, while it resolved the suggestion on PageSpeed, resulted in broken ads on my pages. Somehow, this is not an issue on desktop.

Overall, using those two simple plugins I was able to improve the performance of the website by an average of 2x.

Let me know what you think and if it helps you make your site more responsive and better to use for your users.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.