- Vital for Optimization.
- All easy to use.
- Plenty of information.
- Take a while to master.
- Some use old tech!
- Can be overwhelming.
1. Page Speed Testing – Why?
Most people website owners don’t have the luxury of a featherweight website that’s built with performance in mind. So what’s the answer?
The first part of improving your site speed is benchmarking your site. For this we’ll be covering the top 5 most popular speed testing tools.
It doesn’t matter whether you’ve got a car, a bike or a website. Technology needs maintaining to run as its creator intended – in its optimum state. In other words: as fast as possible.
Regarding websites specifically, the hundreds of well-worn anecdotes can be summed up in two words.
The Twitter version is #PerfMatters, but the message is the same. If you don’t keep your beloved website’s speed up, it will cost you money.
Google’s even created a tool called Think With Google – Test My Site . You can use the online configurator to calculate the loss of earnings from your slow website.
It’s more of a multi-tool that does page-speed, revenue and can compare aginst industry rivals; the data is gleaned from the Chome UX Report.
You can get an overview of how to use it from this Google Dev’s article on performance in the field.
For the eco-warriors among us, emissions from data centers have now overtaken the airline industry. So, yeah, performance matters. Data saving matters, especially when using things like hyper-lightweight websites that spit out identical-looking webpages.
Gaz-guzzling cars get the brakes taxed off them, so why should data-hungry websites get a pass?
It’s more than a tad ironic that the people doing environmental research are doing it on websites that are data-hungry emissions machines.
Step forward hyper-light websites…
2. Hyper-light Websites
People often forget that we might live in the West and have the luxury of fast Internet, but there are other places where download speeds are atrocious.
One way of encouraging new users, who are still on 2G connections, is to use a hyper-lightweight website.
Chris Zacharias, an ex-YouTube engineer, and the creator of YouTube Feather – a sub-100 KB version of YouTube they released back in 2012.
You can read up on this interesting subject via Chris’s blog – it’s also on YouTube and Slideshare
What’s baffling is that hyperlight websites are wayyy faster, but offer almost the same experience when done correctly. Why wouldn’t a smart CEO prefer a website that loads up to 30 x faster and that’s a real 30 x not a marketing one.
The results below are from this hyper-light website example that Chris made of a Road & Track web page. It is a static web page, but the techniques used are universal.
Some ideas aren’t as useful now as they once were, but mix and match to suit your goals.
The reason I’m mentioning this is to show that we can apply some of this wizardry to WordPress.
If the sites we build are as performant as possible, then we really don’t need to sacrifice the flexibility of the platform for a static website.
Many of us are fortunate to live in high bandwidth regions, but there are still large portions of the world that do not. By keeping your client side code small and lightweight, you can literally open your product up to new markets. – Chris Zacharias
This section isn’t strictly necessary with regard to Cloudflare Workers, but it’s still relevant for obvious reasons.
- Static websites still load faster if they’re intelligently put together.
- Workers aren’t a magic wand to cure inneficient and unoptimized code.
- Increasing viewership is hugely beneficial for all website owners.
I’m sure you’ll agree it’s super important that we keep our websites optimized and everything that entails; then, you know what, we can stick to our beloved WordPress and leave static websites to people who think they need them.
Chris has some excellent tips that you can use for website improvements that will help take your site to the next level – static or dynamic.
He’s also the founder and CEO of Imgix image processing CDN.
3. Think with Google: Test My Site
Now this isn’t one of the top 5 benchmarking tools that I’m going to show you. Test My Site is more of a multi-purpose tool that helps you ‘think with Google’.
Yes, that might be marketing mumbo jumbo, but it’s got an important message. You can use this tool to think about your potential revenue losses related to site speed or lack of it.
Essentially it’s all about web peformance and your revenue stream.
Let’s see what all the fuss is about then.
Damn! Average. How dare they? The problem is down to the website itself. For whatever reason, they’ve capped the fastest time at 1.3 seconds, which is very un Google like.
My guess is that they’ve done this to put the emphasis on saving money rather than accurately benchmarking your site like the top 5 page-speed tools I’m going to show you.
Don’t believe me, well have a look at the next examples.
Jake Archibald is a Developer Advocate for Google. Safe to say he knows a thing or three about website speed. His blog is lightweight and runs how it should do – lightning fast.
Still unsure, then this next guy actually works as a performance consultant. Yep Jeremy Wagner knows a little bit about webiste speed, too. In fact, I was so impressed that I stole his simple-yet-effective navigation design.
Why hide your links behind a digital burger anyway?
So I’m in good company then with my ‘average’ site speed.
Let’s have a look at one more. Not trying to be a smart-ass, but merely pointing out that even people who truly care about web performance don’t get perfect results.
Online Media Masters is a great resource for speeding up your website. I’ve learned a few things from Tom’s site over the last few years.
Another thing is, if your website is in the Chrome UX Report, that’s a good thing. Why? Because it means you’re getting enough traffic for Big G to take notice.
The moral of the story is that it’s seemingly impossible to get pristine results when they’re averaged out. However, that doesn’t mean that we shouldn’t constantly improve our websites.
Performance testing is a journey, not a destination!
There’s one other tool that Test My Site let’s you do before sending you a report is to compare your site to industry leaders… so I had to give it a whirl.
You won’t be able to add anyone – they have to be an industry leader. Another way of saying that is they have to be in the Chrome UX Report that we mentioned.
Without the Crux report, Google doesn’t have any information to compare.
You might not like the fact that anyone can stick your website into the comparison tool, but websites are some of the most publicly available assets we own.
Anyway if you’re in the Chrome UX Report take it as a blessing because slow or fast – at least you’re getting traffic.
Without traffic even the fastest website in the world can’t make money.
4. Test My Site – Revenue
Now you’re probably aware that Page Speed Tweaks is only a baby. We didn’t start the site till November 2019. You can imagine that our real revenue is a big fat ZERO.
So grant me some artistic license with the figures. I tried to keep them relatively sane. It’s not like I’m dreaming about being the next Google, just the next successful blogger.
Now I didn’t make all three samples the same, which would have made more sense, but they’re only to give you an idea of what is possible. That’s why I chopped them up a bit.
You can see that reducing your page loading time by 2 seconds can save you almost $27,000.
- 10,000 monthly visitors.
- 2% conversion rate.
- $100 average order value.
- 3 down to 1 second.
- $26,578 total savings.
You might feel that’s a huge number, but it’s likely applicable to countless regionally successful business owners out there.
The problem with money you lose through a slow website is that it’s hard to comprehend. It’s not the same as losing money on replacing machinery, for example, so it doesn’t hit home.
It should definitely be something more website owners are aware of because the resulting impact on the business is exactly the same. You’re losing money.
We’ve lowered the stakes somewhat now, but it’s still hard cash going down the plug hole.
- 5,000 monthly visitors.
- 2% conversion rate.
- $50 average order value.
- 3 down to 1.5 seconds.
- $4,109 total savings.
Hard to grasp that a simple reduction of 1.5 seconds could save you nigh-on 5 grand.
Finally let’s have a look at this example.
We’re back up to 10,000 monthly visitors now, but the speed target is reduced. Instead of going all out for that Usain Bolt speed, it’s more like your mum’s school race.
Still a pesky second is a second faster to the bank.
- 10,000 monthly visitors.
- 2% conversion rate.
- $100 average order value.
- 3 down to 2 seconds.
- $9,257 total savings.
I’m sure you’ll agree that it’s a bit of an eye-opener when you see what’s possible.
Once you’ve filled in the form, Google will email you a report with all of the information in it. To be honest, it is useful, but further proof that they’re capping the fastest time at 1.3 seconds is so they can effectively include everyone as a potential customer.
Here’s the recommended fixes for my ‘average’ website.
Oh, that’s strange. They’re saying there’s no fixes. Why would they say that? It’s because I’ve already done every fix that all the Google page-speed testing tools ask for.
It’s no big deal, but it just seems like Google are bending the facts somewhat. Not anything to be too concerned about at the moment, but definitely be mindful of this type of thing.
Most people would take Google’s word on stuff like this, but it’s only because I know my website better that I could smell a kipper on this one.
Now I know the conspiracy crew will say you can’t trust Google at all. I’m more lenient towards them, with stuff like this it may be well intended.
Anyhow you’ve got the message – page speed is important. Hugely important. Slow sites are bad for your wallet and the environment.
Now let’s find out the pros and cons of the world’s most popular page testing tools.
5. PageSpeed Insights
Google’s PageSpeed Insights is a tool that reports on both the mobile and desktop versions of your website. It also suggests improvements and always offers lab data, but if your site is in the Chrome UX report it will also show RUM data – real world user monitoring.
The PageSpeed Insights tag line is: make your web pages fast on all devices.
To be fair to Google, PageSpeed Insights is a well-rounded tool that offers a data set that doesn’t overwhelm beginners, but still offers the majority of metrics to suit a professional speedster.
Like most Google products, the software is always relevant. You wouldn’t expect a multi-billion dollar company to be pushing old-school software, unlike some tools we’ll come to shortly. Taking this into account, it does strike me as odd when I see industry pros complain about the accuracy of the results.
What people don’t seem to grasp is that the network is the road and data is the traffic. Just like your Lamborghini can get stuck in traffic, your superfast website can also get stuck in the busy Internet. This is often why you can score highly, but have a slow time.
Scoring 100/100 on PageSpeed Insights – same as any speed testing tool – doesn’t guarantee that your website will load fast. Moreover, it’s an indicator of potential speed.
A good grade is letting you know that you’re doing things right.
Usually the mobile test is harder to pass due to synthetic network throttling and you’ll be starting off with a mobile score slightly lower than the desktop one. This is perfectly normal, so don’t panic. Google applies this to make the test more realistic.
PageSpeed Insights is based on the Lighthouse engine, as are all the Google page-speed tools. If you feel that you need a deeper level of scrutiny then see our Lighthouse review below. Realistically, though, you’ll probably want to check out all five and then see which one you like best.
By default it only runs the performance section from desktop, but you can configure it for mobile. If you neeed more options you can sign up for an API key, too.
For a more detailed description of PSI check out the PageSpeed Insights About page.
6. GT Metrix
GT Metrix is a Canadian company that’s a subsidiary of GT.net – a performance hosting brand. They’re seasoned veterans, having been in the website performance game since 2009, according to the GT Metrix About page.
Tag line: we want to make a consistently fast web for everyone.
The GT Metrix dashboard is easy to use, with some great tips. If you search through their articles there’s plenty to go at, especially for beginners.
In my opinion, for what it’s worth, the only downside to GT Metrix is it runs on YSlow, which was originally created by Yahoo and pioneered by Steve Souders. Yep, there’s an old name. In Internet years they’re like real world dinosaurs, not to be confused with Google’s downasaur. *Rubbish joke alert.*
YSlow scores are explained in more detail on the YSlow FAQs grading page.
Some things like the cookie score aren’t really relevant nowadays, GT Metrix mentioned this when I reached out to them about it. If you use Cloudflare like me, then it’s hard to avoid them. The only real way is to use a secondary CDN, but that causes a slight time delay.
It all depends what is your priority – perfect scores or ultimate website speed. You can read about this more in my detailed Cloudflare setup guide.
One thing that has absolutely baffled me is that Cloudflare sets cookies on all domains be it top level https or the www subdomain. Yet I’ve seen someone else who’s on Cloudflare and he doesn’t get errors for his cookies. His name isn’t lucky, but that’s what I think he is.
I’ve analysed the headers to death, but still can’t solve it. Even GT Metrix themselves couldn’t give me an affirmative answer.
Such is life when you’re a wannabe website-optimization guru.
Pingdom know their way around speed testing. I mean, how couldn’t they with over 22 billion + tests performed each month. Wowzers!
Tag line: with our powerful web performance monitoring tools, we pride ourselves in helping make the internet a better place. For everyone.
Although Pingdom Tools is a superb website for optimization audits, they’re very similar to GT Metrix. Reason being, they started out in 2007 so they’re also running on the same tech as the Canadians. Yep, you guessed it – they’re YSlow boys, too.
Only Pingdom give you Page Speed for the free version and save YSlow for the paid option. GT Metrix give you both for free.
When I emailed Pingdom to why they don’t recognize Brotli compression, even though it’s more modern than GZip, they explained that the plan is to move over to Google Lighthouse at some point.
Confession time – yeah, I did turn Brotli off to get it up to 99. At least I’m honest. 🙂
Pingdom does stress me out, though. What with the blank screen when the test isn’t rendered properly, but people still post images of it as if it’s a proper test. SMH.
Then there’s the GZip/Brotli annoyance, but other than that it’s a neat tool that you will find useful. It’s especially easy to read the headers in Pingdom, which speaks strongly towards what matters in benchmarking.
It’s not about the perfect PageSpeed tool, it’s using each tool for its strengths and avoiding it for its weaknesses.
Lastly I can cope with errors that are my fault – then they’re correctable. If the test doesn’t show the downgrade details, it’s impossible to overcome. Pingdom have probably done this, in contrast to GT Metrix who use the same basic scoring system, because in reality it doesn’t matter.
For example, you can score 90+ and it’s rounded up to an A.
So Pingdom, quite rightly if I’m being honest, are saying “look you’ve scored an A” it doesn’t matter about the minutiae. The pedant side of me says otherwise.
Lighthouse is the engine that runs almost all of Google’s web performance tools. It’s got five main sections that it tests your website against:
- Best practices.
- Progressive web apps.
The first four sections have a maximum score of 100 and the PWA audit gives you a badge instead of a number. Not sure why that is; possibly to draw more attention to it and ecourage the uptake of progressive web applications.
We’ve got a guide on progressive web apps if you’re interested in converting your website to a PWA? If not you can grab yourself a Google Easter Egg like in the screenshot below.
How to find Lighthouse and run an audit? It’s super easy and there’s lots of different ways.
- Open Chrome DevTools on your website with right click and inspect.
- Install the Chrome Lighthouse extension – then click the icon to run the audit.
- Run the Lighthouse audit from WebPage Test.
- For developers install the Node command line tool or Node CLI.
- There are other ways to set up Lighthouse audits, but they’re more detailed and geared towards developers so I’ll leave it at that.
You can even set up your own test instance, if you have an Internet business it could be worthile.
Lighthouse offers a report viewer so you can share reports with friends or colleagues. The list of things that you can do with the tool is pretty amazing, but most of us will be content with the standard test.
The test itself is now run on Google’s servers, rather than your local machine as it was before.
According to this Google Dev’s video – Page Speed is 3 x more important to users than website design. Think about that for a moment.
Due to the popularity of Lighthouse there are plenty of other tools out there running on the exact same internals. For those that don’t like PWAs and hate the empty badge, how about Measure from Web Dev.
If you don’t want to use Measure, you can simply turn on the audits you prefer using the checkboxes in the Lighthouse settings tab.
Remember all you need to do is be using Google’s Chrome browser then right click to access Lighthouse’s configuration panel.
Another cool thing you can do is set performance budgets and set up Lighthouse to run audits for you. To set a budget up the easy way you, use this tool created by Katie Hempenius from Google.
The tool is available online at peformance budget calculator.
Remember that Steve Souders guy who I mentioned earlier? Yep, the one who invented YSlow and PageSpeed at Yahoo? The performance pioneer with a CV that nobody can touch? Well he has his own production monitoring company called Speed Curve and on their about page they explain – what I’ve already been saying – that these old Yahoo based tools aren’t up to the job.
So, yeah, smartphones were only a pipedream when Yahoo were in their prime. No small wonder that the tools are now well past their best. Credit to Steve Sauders for making them so popular that people don’t want to give them up.
Now I’m not out to knock anyone, but it’s important that we say it how it is. Here’s more proof that Lighthouse is the best option for page-speed testing.
SpeedCurve themselves actually use the LH engine, as you can see from my free trial that I set up on their website. The screenshot is from the dashboard metrics.
9. WebPage Test
WebPage Test is probably the best loved speed testing tool among serious website optimizers. It’s easy to use, but has a wealth of information for investigating your website. Patrick Meenan is the dude that looks after everything – @patmeenan.
They then go on to say that the online version if for the benefit of the performance community.
You can even download your own copy of WebPage Test and run your own instance
There are endless useful features that you can dig into. So many in fact that it’s hard to take them all in. For most users, though, the standard test is good enough to give you a snapshot of your website’s health down the wire.
The request map is a neat tool that shows the proportions of all your assets. It’s a good way to quickly see the size of items; request map differs from the waterfall chart in that it prioritizes size and relationship over speed.
Here’s a request map for WordPress.org.
You can either access request map directly or perform a test and then access it from the navigation panel in the dashboard.
Pro tip: creating an account with most speed testing tools will enable you to jump the queue. You’ll be able to slide right past all the other guests to do your thing. Definitely worth considering. Once you try it there’s no going back – it seems a right pain waiting in line afterwards.
A full explanation of a watefall chart really needs a seperat article, but for now let’s take a peek at the most important features – in my humble opinion.
- TTFB – Time to First Byte – how long it takes for the server to respond.
- Speed Index – when the above-the-fold content is displayed on screen.
- Document complete – usually when the browser has downloaded all the static assets.
The most important part is without doubt above-the-fold content, as it’s what is displayed in the viewport – your device’s screen. Real-world users see above the fold, not merely numbers on a page like us performance geeks.
It’s real-world user metrics that matter – RUM – not synthetic benchmarks.
WebPage Test covers above-the-fold content using the Speed Index. So a low score on the Speed Index indicates that your website is quickly visible for your users.
Secondly the TTFB is super critical. While it is only a component of the overall performance package, it is like getting a good start at the races.
A fast start won’t guarantee that you’ll win the race, but a slow one will mean you are up against it. Plus it has a knock-on effect for the rest of the race. In our case even if everything else is lightning quick, when TTFB fails, it ensures everything else in the pipeline fails with it.
The third most important line is the blue one, as it states that the document is complete. Yes the page might still be loading assets, but they’re less important after the blue line. On my site for example, you can see that I’m loading several features that don’t impact performance.
- Service worker.
- Open Search form.
- PWA icons.
Turning off Stackpath CDN will also save me maybe 150 ms, as it’s not really necessary with Cloudflare. It’s just helpful for my PageSpeed scores, which are obviously important to me.
Speed is more important than scores any day of the week, but this blog is built upon teaching people how to get the highest score and it’s not as if my site is slow either way.
Here’s a quick snapshot of how all the Google tools integrate with one another.
It was from a Chrome Developers YouTube video – Demystifying Speed Tooling by @paul_irish and @egsweeney from Google. This is a great talk for anyone interested in learning about Lighthouse.
10. Hubspot Website Grader
Website Grader is a tool that I’ve just come across on my Google travels. It’s not so powerful that I’d like to consider it in the top five speed tools, but it’s still useful for certain things. For example, it quickly scans your site for script tags – something that the other’s don’t seem to do directly.
The big five look at the problems themselves, if something is render blocking or not, rather than just picking out script tags. This makes sense because an inline script tag with a few lines of code – for analytics, say – isn’t going to be a problem.
However, I moved all my scripts to the footer and it seems to have made a slight difference. Although this is classed as best practice, it wasn’t something that I’d done on simple things like analytics or for registering my service workers.
Seen as though it wasn’t flagged by the big five I hadn’t bothered, but it’s definitely making a slight improvement to my First Contentful Paint (FCP) metric.
It’s just another option for you to try.
11. Page-Speed Tools – Summary
We’ve covered the top five most popular speed testing tools and also established a way to measure lost revenue with the brand new Think with Google Test my Site. This should stand you in good stead when you set out to improve the performance fo your website.
Performance and revenue go hand in hand.
However, there are some basic principles to stick to when carrying out optimization work. Let’s see how you can make life easier or yourself.
Always start a performance optimization session with an audit for the following reasons:
- Speed-testing tools give you a baseline to work from.
- Most tools will offer you guidance and actionable tips.
- Use incognito mode or a private browser window for a cleaner audit.
- Make one change at a time and then audit to check the result.
- Start with highest impact suggestions first for quick wins.
Pro tip: don’t forget to make a backup before carrying out any work on your website. Even if your hosting provider backs your site up daily or weekly, it’s still safest to do it yourself. Not so much of a concern if you only work on your site once a fortnight, for example, as it’s easier all round.
If you’re constantly tweaking your website and your hosting provider is in a different time zone, it can get tricky. So always better to be safe than sorry. Back up and sleep well.
Remember what we said earlier, that optimization is a journey and not a destination. Think I heard that on a video somewhere?
Anyhow, that’s about all there is to it. If you have any questions or think we need to improve something then hit us up in the comment section below.
Until next time, guys. Stay lucky and keep it fast!