PageSpeed Insights Perfection

July 20, 2019

PageSpeed Insights desktop score

So here we go: my view on how to get perfect PageSpeed Insights scores using Gridsome and the Jamstack.

There are plenty of armchair experts in the world, especially when it comes to website performance. Trouble is, though, the vast majority seem to talk a good game rather than regalling you with their proven experience.

Look I'm not saying that I know everything about speeding up your website, but at least I practice what I preach.

In other words, I don't just talk about getting 100/100, I actually achieve it first then talk about it.

You'd think that would be standard procedure, but it's not. People - even famous bloggers - like to get views above all else. To be fair, who can blame them? It's not like they purposfuly lie, but they use their popularity before experience.

Surely your voice is stronger if you can prove your self. That's why people hold job interviews - they want to see what you've done, not what you merely talk about!

Anyhow, I digress. Less moaning and more positivity, eh?

The PageSpeed Insights Double Ton

While I've been tweaking websites for a few years now, it's only recently that I've mastered the field of web performance. You see the thing is, nothing is ever straightforward.

You can often get caught out looking at things in isolation, when really you need to look at the big picture.

It doesn't help that performance benchmarking tools have so many different metrics to choose from. Web Page Test has six main categories, that's not including its Speed Index, which was introduced to try and simplify things somewhat. In truth it's just another barometer and can be misleading.

It can be baffling for the most experienced of web professionals.

You can score highly one one metric and low on another, this is why you need to concentrate on the values that make sense to your site. The more you test, the better you will get to know your site's speed range.

Time to First Byte is Super Important

There are certain categories that can't be argued against, such as TTFB of time to first byte. That's super important and a time of 0.2 seconds is desirable. That's what all my sites achieved using Bluehost shared hosting, but I'm now on Hostinger and achieve exactly the same results.

The reason being is I run my site through Cloudflare - the free version - and set the page rules up to cache everything. This ensures my TTFB is 200 milliseconds.

This little trick enables me to acheive VPS speeds at shared-hosting prices.

Although Cloudflare has a lot of settings, which I'll get to in another blog post. You can get the important stuff from the screenshot below.

David Elstob Blog Cloudflare Page Rules

What counts is perceived performance. Similar to the car industry's perceived quality. If someoene believes something is expensive, it's all that matters.

Another quick - but important tip - is when you're mixing and matching plugins. Some sit better with others and you'll feel more comfortable with certain plugins, make sure that you don't have multiple instances of the same thing.

For example, only have minification on once. It won't get any faster turning it on in three different ways; if anything it might break your website and slow it down.

Look at the Big Picture and Test, Test, Test!

Situations that make perfect sense in isolation, don't always add up the same way when combined with everything else. You see, I also use Stackpath on top of my Cloudflare setup on most of my sites.

It's awesome value for a respected CDN.

For WordPress most speedsters recommend it with W3 Total Cache, but you can also use it for static sites like Gridsome and Gatsby. Although most static site owners use Netlify for hosting becasue it's like the Swiss Army knife of web hosting. The way it syncs with Github and automatically builds and deploys your site is amazing. It's also free and a CDN.

Netlify makes Cloudflare redundant for static sites, as they're secure by default. For most other websites, though, Cloudflare is great because it's a security service that morphed into a CDN.

If you're into websites, they are two of the best services available regardless of whether you use the free tier or paid options.

Should You Run Two CDNs Together?

I came across a comment that said: if you run two CDNs together it will slow your site down because of the double hop, when it connects a second time. This was an old comment, but it made me think am I wasting my time with Stackpath on my WordPress sites? This blog isn't using Stackpath at the moment, though Addicted to Length is.

Addicted to Length Stackpath Performance

On the one hand, when you check the results, it does take a few hundred milliseconds to connect to the CDN. Most observers would think that this time could be saved if you simply removed Stackpath and settled for Cloudflare on top of your regular website.

Like I mentioned, it's never that simple with website performance testing.

Immediately I ran a few tests to check things over. It turned out that although I did save 0.2/3 seconds from the initial connection. Overall time remained relatively stable, if not slightly slower. Hence, I chose to stick with Stackpath and Cloudflare.

So the guy who made this comment was probably being short sighted. Unfortunatley, I couldn't explain this to him and the person he'd given 'wrong' advice to because the comment section is now closed. Sad face.

Gridsome Delivers out-of-the-box Performance

Without the slightest exagerration, I've spent literally hundreds of hours testing WordPress websites to achieve top benchmark results. With Gridsome, it's been the exact opposite.

The only thing that I've done to hit a perfect double ton on PageSpeed Insights is to self-host 2 x Google fonts.

Gridsome - like most other static Jamstack websites has performance baked in. It's not a luxury, it's a given. In truth we should expect nothing less in 2019. The web has gotten bloated and it's about time we took back control.

Gridsome rocks the PRPL Pattern - created by Google:

  • Push critical resources for the initial URL route.
  • Render initial route.
  • Pre-cache remaining routes.
  • Lazy-load and create remaining routes on demand.

Gridsome gives you:

  • G-Link - smart link pre-fetching of resources.
  • G-Image - automatic progressive image support.
  • Vue.js - single page app for ultra-fast browsing without page refreshing.
  • Automatic code splitting.
  • It's supremely fast by default - you don't need to be a perfomance king.

Take a look at this snapshot of a quick test - I didn't spend ages cherrypicking a golden test. This was the first one I run through Web Page Test.

David Elstob Web Page Test Results

Summarising PageSpeed Insights for the Jamstack

Although PageSpeed Insights is one of several key testing environments, alongside Web Page Test, GT Metrix and Pingdom. It is super respected simply because it's Google. Big G don't play about when it comes to software and especially the web.

After following an Andre Madarang tutorial to build this blog. My initial setup was on Netlify; it was speedy enough while using the free domain name Netlify provided. However, when I pointed my own domain name at the site, it really slowed down. Well by about 300 milliseconds. That's a lifetime to me. :)

While I was reluctant to remove the site from Netlify, I eventually decided to do so and stick it with the rest of my websites on Hostinger. They're my new hosting provider.

I've recently moved over from Bluehost to Hostinger. Bluehost were fine, but they are a bit pricey in comparison to Hostinger, who are surely the cheapest big-brand web host out there.

The Results Speak for Themselves

Yes, I've had perfect mobile and desktop scores a few times with WordPress. In fact, I'm so good at speeding up my sites that my 'regular' WordPress sites are quicker than the 'AMP' enhanced ones. That annoyed me somewhat, as I really bought into the AMP hype, but AMP gets a slight SEO boost form Google, which makes up for any real-or-imagined deficencies.

Even the AMP inventor has said that AMP isn't so fast on a really small website, as it has to calculate the page layout, but it really comes into its stride on bigger sites when the savings add up.

I suppose it's like going to a budget store, spending $1 and complaining about the prices. You really have to do a weekly shop to feel the benefit. You get the picture.

What makes Jamstack sites special is they're benchmark ready fresh out the gate. Leaving you to concentrate on the content.

Compared side by side, Gridsome and Gatsby aren't much quicker than other fast sites. In fact, in my initial testing I was disappointed. Though when I started to dive deeper it all made sense. You need to forget the test results for a minute, even though they are by no means shabby...

What counts is real world performance. This is where the Jamstack shines. Start clicking through the navigation and you'll see what I mean. They're so instant it's embarrasing comparing other sites to them - even optimised ones. It's like night and day. You'll never feel like going back to a regular website again.

In case you don't believe me, here's another image to prove it.

David Elstob Mobile PageSpeed Insights

WordPress might have the numbers game sown up for popularity, but as I mentioned popularity doesn't mean you are the best. Whereas talk comes cheap. So does website performance. In fact it comes for free with the Jamstack - because it's built in from the start. It's not an afterthought or plugin uprade. It is at the very core of the Jamstack philosophy.

So is this the End for WordPress?

No not really. That's the sharp answer. WordPress is stronger than ever, even though it's looked down on by the development community because it enables non-techies to do what usually takes lots of training. It's a childish outlook, thankfully not everyone is so small minded.

Remember though that there are far more ordinary users than web design professionals. WordPress isn't going anywhere in a hurry.

Although speed is hugely important. Dynamic sites with polished content management systems have plenty to offer. They can run complex programs and handle forms much better on the back end. They are supremely easy to use and configure, but the Jamstack is catching up. Companies lke Netlify - whose CEO Matt Billman - coined the term JAMstack are doing their bit to help speed up the growth.

Netlify CMS is relatively easy to set up. It's highly configurable, which is nice, and is already growing with a community that is thriving. This isn't just because of the free hosting. It's especially appealing to developers, but still easy enough for the average web developer to jump onboard.

Form handling can be a problem for static sites, but with Netlify all you need to do is add the 'Netlify' attribute and they parse the HTML for you and store your form data on their servers until you log in.

Gatsby is huge - the biggest of all the static site generators.

Gridsome, based on Vue.js, is supremely approachable for JavaScript beginners.

In fact, take your pic, the choice is vast and whatever you decide, you won't be disappointed. Not forgetting that smashing the PageSpeed Insights double ton is an absolute breeze.