How to Score 100/100 on PageSpeed Insights

Google’s PageSpeed Insights tool is the hottest website performance application among the professional website speed optimisation crowd. That’s why Sonic SEO swears by it. Let’s be clear, Google knows what it’s talking about when it comes to website metrics. It doesn’t matter whether it’s SEO or general website performance, if Google has a tool you can rest assured it is worth using. Why? Well it’s in Google’s interest that we build fast websites that keep people online. The longer people spend online the more often they come across Google products and adverts.

In my humble opinion the four kings of the website speed testing game are in no particular order – PageSpeed Insights, GT Metrix, Pingdom and WebPageTest. If I had to choose one, it would probably be the later, simply because it has the most comprehensive options list and endless timing criteria to pick from.

Sometimes less is more though and for beginners especially, you might rather have one time thrown at you than several. 

Like anything else in life, the more you familiarise yourself with these tools the better you will be at using them and analysing the data. Read more about PageSpeed Insights data here.

I forgot to mention Lighthouse, which is like Chrome Dev Tool’s version of PSI, but on steroids. It is more for developers than regular website nerds. It’s still an excellent tool, but more in depth than we need really, unless you are running a PWA – progressive web app, which I do on this site actually.

PageSpeed Insights Perfect 100 Desktop

Quick Links to All Headings

  1. Why Performance Data can be Missleading
  2. The Correct Order to View Data
  3. How to Get Amazing Results with Shared Hosting
  4. Using Cloudflare’s Page Rules to Improve Time to First Byte
  5. Configuring Cloudflare’s Three Free Page Rules
  6. Cloudflare Page Rule Number 1
  7. Cloudflare Page Rule Number 2
  8. Cloudflare Page Rule Number 3
  9. The Magic Setting is Cache Everything?
  10. Website Setup to Get Perfect Page Speed Insights Results
  11. Regular WordPress Theme Setup
  12. Native AMP WordPress Theme Setup
  13. PageSpeed Insights in Summary

Why Performance Data can be Misleading

The first complaint you will hear about a website testing application is why is it giving me an A+ grade, but it’s taking fifteen seconds to download?

Think of it like this. A Ferrari is by most people’s recognition a fast car, you could say it’s easily an A grade when it comes to speed. You then take it for a drive through the busy city streets and it’s no faster than a London taxi. So think of performance grades as potential rather than true speed. 

Good grades are telling you that you’re doing things correctly, but you might need to find a faster hosting plan, for example. 

GT Metrix Performance Report

In the above GT Metrix report, we scored 98% on YSlow, but we can easily make that 99% by turning off Rocket Loader in Cloudflare settings. That would reduce the JavaScript files by one, which tweaks our scores slightly. 

The problem with that is while 99% sounds good, it actually gives us a website that is slower on the clock. You see that Rocket Loader defers the JavaScript files and ensures that they are loaded last in the page, which gives you a faster paint time. Faster rendering is even more important than clock times, because it is what the user sees on the screen.

You can always argue that no tool is perfect and every piece of data has to be looked at from various angles, not purely on what it says on the tin.

So this example would be ideal to show a client who is demanding perfect scores from you. It goes without saying that higher scores are better, but when you are getting well into the nineties it isn’t always straightforward. 

 

The Correct Order to View Data

Grades are still important, as long as you don’t get blinded chasing them when it doesn’t make sense. In our opinion there are three ways of looking at your data:

  • Above the fold content – this is what the user sees – and is most important.
  • Various timings – speed index, document complete, etc.
  • Grades – ideally we all want A+ but a fast time and above that fast rendering is what really matters to users.

Perceived speed is what counts and this is where rendering plays a big role. That said, however, fast times and quick rendering will always go hand in hand. What I’m saying is when you get towards the last drop of performance, these are the considerations you will have to make. Quite often you will have to trade one number against another, but don’t beat yourself up if you can’t get 100 every time. Nobody does, especially if you’re using shared hosting.

Web Page Performance Test Summary

If you’ve been into website performance for a while you will no doubt of hear the saying ‘above the fold’. This merely refers to the good old newspaper days, when content printed above the fold was cherished as premium. Advertisers will have paid the most for the top half of the first page.

With websites, it’s the above the fold content that we want to load quickly. While the user is reading or viewing this part of the document the other parts are downloading in the background. Some blog posts are quite long and there are even one-page websites that will take a while to download, but to the user still seem fast, as long as above-the-fold content is prioritised.

 

How to Get Amazing Results with Shared Hosting

In all honesty, it is hard to get 100/100 on both mobile and desktop with PageSpeed Insights. Hard, but not impossible! Out of all the times I’ve tried, I’ve scored top marks on one device and high nineties on the other, but this is the first time I’ve actually scored two home runs.

My setup is WordPress and Bluehost cloud hosting. Bluehost have stopped selling this exact same package, but it isn’t too clever to be truthful with you. At first I upgraded from the regular shared hosting plan and was quite pleased with it. Now though I’m of the thinking that all they’ve done is join three shared servers together and called it cloud hosting. You know how companies can be quite sneaky with re-branding of products, but I’ve recently come across a super neat trick that I’m going to share with you.

PageSpeed Insights Passed 21 Audits Mobile

Even when you’ve tweaked every setting on your website and run it through PageSpeed Insights, there will be one last thing that is hard to overcome. It’s time to first byte or TTFB. There are countless times when I’ve passed all 21 PSI audits, but still got a nasty red line because of poor TTFB.

Initially I though that because I was on shared hosting, until I moved to another hosting provider like SiteGround or Hostinger who use solid state drives, my TTFB was never going to improve. SiteGround get amazing feedback and frequently top customer surveys, whereas Hostinger are also good quality hosts, but offer amazingly low pricing.

The key to improving TTFB is with Cloudflare page rules. What are they you ask? Read on to find out.

 

Using Cloudflare Page Rules to Improve Time to First Byte

Again, if you’re into website speed optimisation I will assume that you have already heard of Cloudflare. If not I’ll give you a brief run down. They started out more as a security company than a content delivery network, but turns out that running a CDN was key to helping them with their security goals. 

They’re an amazing company and offer a free plan that gives you access to their super secure content delivery network, but more importantly for us, they also give you three free page rules. 

Personally I use Cloudflare free version and also Stackpath, which is only £10 per month. They both work great with W3 Total cache.

My TTFB always sucked. On WebPageTest my scores were normally C to F with the occasional A and B thrown in. Since implementing this newfound trick, I constantly get A grades on all ten websites that I’m running. The last twenty or so times I’ve checked it’s been hovering on 200 milliseconds. Essentially giving me virtual private server speeds on a shared hosting plan.

Web Page Performance Test Details

Configuring Cloudflare’s Three Free Page Rules

If you’re on the free plan you’re entitled to three free page rules. This is all you really need to be honest. Like anything, if you have a good income and a booming business then by all means upgrade. For everyone else, you can still have a blazing fast website setup using the free version.

Set up W3 Total Cache on your website including the Cloudflare extension and your other CDN if you have one. It’s not essential, but most people recommend them because the more data centres you have the better.

Bear in mind that only one page rule can be activated at a time, so set them up in this order. That way if you log in to your admin page you won’t have any problems with caching errors, but for all other times you access the website rule number three will still kick in correctly.

On the other hand, if you had rule number three set to fire first, it would fire every single time and the other two would never work. It’s quite simple once you get your head around the concept.

Cloudflare Page Rules

Cloudflare Page Rule Number 1.

addictedtolength.co.uk/wp-admin*

Browser Integrity Check: On, Browser Cache TTL 30 minutes, Always Online: Off, Security Level: High, Cache Level: Bypass, Disable Apps, Disable Performance.

Cloudflare Page Rule Number 2.

addictedtolength.co.uk/*preview=true*

Browser Integrity Check: On, Browser Cache TTL 30 minutes, Always Online: Off, Security Level: High, Cache Level: Bypass, Disable Apps, Disable Performance.

Cloudflare Page Rule Number 3.

addictedtolength.co.uk/*

Cache Level: Cache Everything.

 

The Magic Setting is Cache Everything!

Cache Everything doesn’t sound anything special, but because WordPress pages are dynamic and pull in content from various sources unlike static HTML pages, it takes a while for this to happen. In other words reaching for the HTML every time a web page is called for slows down the TTFB.

With the page rules set to cache everything, that means they now cache the HTML instead of having to grab it from the server every time. Now we can reach into the cache for the HTML. This has a dramatic impact on your TTFB and also your PageSpeed Insight scores.

What it won’t do is give you a perfect 100/100 by itself, but if you tweak all the other settings that go hand in hand with fast websites. This little page rule gem will give you that icing on the cake.

Like most geeky speed nerds, I’ve searched the Internet high and low for ways to speed up a shared-hosting server. The best advice I’ve found was clean your database. Problem being, when you already have a clean database this type of talk is of no use to you; in fact it leaves you even more frustrated and has you dreaming of a new hosting provider day and night.

Now, though, we know better. Not wanting to crow about this little nugget. I have to give credit where it’s due and tell you the truth. I found it in AJ McKay’s WordPress Speed Optimisation Course. Without wanting to dismiss the rest of the course as not worth reading, it definitely is for beginners, but for pros this little nugget alone was more than worth the entrance fee. Of which I only paid £10.99. 

Another stroke of luck because the day previously I nearly paid the regular price of £36.99. As it was I didn’t buy it direct from AJ’s website, but from Udemy instead and got it at the crazy low price mentioned.

PageSpeed Insights Perfect 100 Mobile

Website Setup to Get Perfect PSI Results

With all my writing I try and give people a different aspect to what’s already been talked about on the Internet. A nigh on impossible task these days, you’ll no doubt agree. So it’s a waste of my time and yours to go over every single aspect of how to tweak a website for speed. It’s already been written about countless times prior, but for the sake of accuracy I’ll give you a quick tour of my website set up that I run on most of my sites. 

I have three regular WordPress sites, among which this is one I made for a friend. Then I have another six or so that run Native AMP using the WordPress AMP plugin.

 

Regular WordPress Theme Setup

  1. Fast Velocity Minify – use this for my minification and concatenation of files. Autoptimize is a good alternative.
  2. Gutenberg
  3. Schema
  4. Smush – images are optimised in Photoshop for size and quality before uploading.
  5. UpdraftPlus – Backup/Restore
  6. W3 Total Cache
  7. Warm Cache – 15 minute cron job called from C Panel – runs through SiteMap XML file.
  8. WordFence Security
  9. WP Disable
  10. WP Mail SMTP
  11. WP Optimize
  12. WPForms Lite
  13. Yoast SEO

I used Child Theme Configurator to create a Themify Ultra child theme, along with Stackpath and Cloudflare.

Warm Cache and Cron Jobs are an alternative to using cache preload in W3 Total Cache settings. Apparently it is a bit more reliable, but you need to turn off Object Caching if you want the Warm Cache dashboard to work.

Wherever possible I delete plugins. An example of this is using the Cloudflare extension in W3 Total Cache rather than use the seperate Cloudflare plugin. No doubt, most of you fellow optimiser dudes will have a similar mentality.

PageSpeed Insights Passed 21 Audits Desktop

Native AMP WordPress Theme Setup

  1. AMP WordPress official plugin
  2. Gutenberg
  3. Schema
  4. Smush – images optimised in Photoshop for size and quality before uploading.
  5. UpdraftPlus – Backup/Restore
  6. W3 Total Cache
  7. Warm Cache – 15 minute cron job called from C Panel – runs through SiteMap XML file.
  8. WordFence Security
  9. WP Disable
  10. WP Optimize
  11. Yoast SEO

Again, I use Cloudlflare and Stackpath for my CDNs. Cloudflare is used for minification. All of my websites run on Themify Ultra using a child theme. Can’t believe how easy it is to setup using Child Theme Configurator. Definitely an amazing plugin that everyone should be using.

For AMP websites, it is best to turn on Object Cache in W3 Total Cache settings, so set up Warm Cache first then once it’s working, turn Object Cache back on. Then you just have to live without the Warm Cache dashboard.

With AMP I use PHP snippets for my forms instead of plugins. You can grab them from my Native AMP Guide.

 

PageSpeed Insights in Summary

While this guide hasn’t detailed every single aspect of how to build the fastest WordPress on Planet Earth, I still hope that it’s given you a new way of looking at PageSpeed Insights. For me the Cloudflare page rule really was the final piece of the jigsaw that enabled me to get my first-ever perfect double ton. 

The principles of fast websites will always follow the basic rules of trim, refine, remove, replace. However, there are always new techniques and less obvious angles that even the brightest of people miss for whatever reason. While I don’t claim to have invented this one, it is my pleasure to pass it on to you just as it was passed on to me.

Have a great day and please like, comment and above all share this for me. It would be greatly appreciated. Thank you.