OK, now we’re into a much more hands-on lesson in this course. This is where you get to test to see how your site is performing.
- Testing with 3rd-party tools
- GTMetrix
- Pingdom
- How to use these tools
- Using Google Lighthouse Instead
- To Access Lighthouse in Google Chrome
You have to know how to test the performance of your website so you can know if the changes you are making are working. This makes sense right?
For example, if you don’t know your website loads in X seconds, how will you know if any tweaks you make are improvements?
In this lesson, you’ll learn how to test the performance of your website. You will use this information to take advantage of what you will learn in the rest of this course.
The basic method is test, make changes, test, make changes, test… And repeat until you’re done making changes.
So let’s get into this.
Testing with 3rd-party tools
We’ll start off with testing using third-party tools because it’s the most common way, it’s easy, and the results are usually good enough to begin with.
GTMetrix
GTMetrix is a good tool that will tell you the most common things wrong with your site — from a performance perspective of course.
It will give you a score based on a percentage on how well it passes tests by Google PageSpeed and Yahoo’s YSlow.
It will tell you if your components are not compressed, combined, or if images are not optimized, if you’re using a CDN, browser cache, etc.
Another nice thing about GTMetrix is it offers advice how to solve/tweak settings needed to resolve their findings. Use this advice along with what you learned in previous lessons and you should have no problems making your site faster.
I like to use GTMetrix for its technical advice, not necessarily for the “time it takes to load” score.
For that I prefer the next tool Pingdom — it’s loading score seems to be more accurate than GTMetrix.
Pingdom
Pingdom used to be better, but they were recently bought out by Solar Winds — which is actually a good company, but the free tools got stripped a little bit.
That said, I feel like it is still a better for the timed score test then GTMetrix. When you want to know more accurately how fast your site loads in seconds, this is the tool.
They will show you a waterfall chart of the components that make up your site so you can see which ones take the most time to load.
They will also offer you advice to improve performance of your site, but won’t tell you exactly which components to use the advice on like GTMetrics does.
How to use these tools
Both tools are very easy to use.
- Enter your website URL into the form
- Optional: choose the datacenter location to test from (choose the one closest to your host)
- Click the Start Test button
From there you review the results and make changes based on what you learned in previous lessons, and the advice of the tools.
For instance, if it shows you have some images that are not optimized, then you need to create optimized versions of those images.
But be careful, you don’t have to hit 100% on these tests. In fact, depending on the purpose of your site, you probably will not reach 100%.
There is a point of diminishing returns on your efforts, so I don’t want you to spend too much time trying to get the last 5-10% to reach a perfect score — especially if it means making big changes. Often the reward isn’t worth the extra effort.
Using Google Lighthouse Instead
Honestly, for most of your needs, GTMetrix and Pingdom are enough. They’ll make sure you discover the glaring issues.
But if you want to really dive in deep and test every nook and cranny of performance for your site — look no further than Google Lighthouse.
But be ready, it goes VERY deep into the most advanced “web performance science.”
You’ll find things like time to first byte, first contentful paint, first meaningful paint, and so on.
While it is a lot of information about very advanced web performance measures, the information can be vital to giving you insights where you can improve performance more than the other tools will offer.
To Access Lighthouse in Google Chrome
- Open an incognito window and load your website
- With your site open, hit ctrl+shift+J on the keyboard to open the Chrome dev tools
- In the menu at the top, click Lighthouse
- Then click Generate Report
Lighthouse will begin auditing your site.
On a side note: I wish WordPress didn’t bundle jQuery — so many plugin developers then rely on it — and it adds some bulk to the payload that’s not warranted. Here you can see it’s adding 33KB and wasting 1,080 precious milliseconds of load time.
Take care,
