Listen, let’s keep it real, I don’t think you should use PageSpeed Insights unless you’re a developer. PageSpeed has its heart in the right place, but it’s not intended for the average WordPress site owner and the reports it provides are ripe for misinterpretation.
Have you ever watched the show Silicon Valley? One of the main characters is Richard, the CEO of a tech startup. He’s a programming genius but socially inept. He has great intentions and a grand vision, but as a leader, he doesn’t do the best job at communicating his vision and is notoriously ineffective at public speaking.
PageSpeed Insights has a lot in common with Richard: they both have great ideas and communicate them poorly.
The basic message of PageSpeed Insights could be translated as follows:
Keep your pages light and simple.
Avoid unnecessary fanciness.
Consider mobile users, particularly those who pay for every byte of data.
However, it goes about communicating these very solid principles in obscure and unhelpful ways.
Since the actual verbiage is hard to understand people instead fall back on the parts that seem clear: the grade and the color. Misunderstanding and confusion abounds!
So let’s take a common sense look at what this tool does and how to interpret it’s socially awkward communication.
The underlying problem
In recent years, the popularity of WordPress and other content management systems has made it really easy for people with minimal, or no development skills at all, to build overloaded sites that violate all the basic rules of performance. Web pages have become bloated and slow.
PageSpeed is basically saying, “Look, if you’re gonna put all that junk on your page, here’s what to look out for and how to mitigate the godawful performance impact.”
The fact is, if you just build a simple, lightweight page, it will automatically score better, and more importantly, your site will be faster.
The fact is, if you just build a simple, lightweight page, it will automatically score better, and more importantly, your site will be faster. Click To Tweet
What does PageSpeed do?
PageSpeed Insights evaluates every website according to a few rules. The same rules are applied to every website, no matter its audience, content or purpose.
What PageSpeed Insights does not do, is measure the loading time. So it doesn’t actually tell you if your page is fast. It only tells you if you’re obeying the rules or not. In theory, obeying the rules would get you a fast site, but that’s not always the case and in reality the situation is far more nuanced that the story PSI tells. It’s the equivalent of saying that someone who doesn’t perform well on high pressure standardized tests, isn’t intelligent. Of course, we know that’s not the case.
PageSpeed’s focus on specific rules abstracts and masks some underlying issues. It makes people focus on a superficial grade rather than on fixing the issues that affect performance at a foundational level.
Let’s have a closer look at the rules, what they mean, and how much you should care about obeying them.
To make any sense of the reports it gives you, you must click on the specifics of each message, by clicking “Show how to fix” to see the details. Do not just stop at the score without digging deeper, this won’t help you at all.
A note about data
I’m writing this article admittedly from my own perspective as someone who lives in a place where data is currently inexpensive. I’m a site owner whose primary audience is in first world countries where data is also cheap and who are overwhelmingly using desktop computers to access my site. However, if the audience for your site consists of people who rely on mobile devices for internet access and for whom data is expensive, you will need to take some of the recommendations more seriously. I may not worry about removing an extra 20KB of data from my page, but you may have to.
A note about 3rd party content
I’m going to refer to 3rd party content a lot in this post. 3rd party content means files loaded on your site from domains that are not yours. When you click “show how to fix” and are presented with a list of files, simply look at the domain to determine if the content is served from your own domain, or external, 3rd party sources. The most common types of 3rd party content are social media widgets/buttons, tracking scripts like Google Analytics, and ad scripts. Too much 3rd party content is going to make your site slower.
And now, the rules…
Avoid landing page redirects
What it actually means: Basically, test the right version of your URL. If it’s https, use https not http
If you use www, use that version of the url, not the version without www.
In reality it’s fine that the other versions of your URL redirect to the primary one – that’s desirable so that if a visitor for some reason tries to use the wrong one, they do end up at the correct version.
But since those redirects take time, as much as possible all links to your site should use the primary version so that users don’t experience any unnecessary delays. When testing your site on any tool, you should use the primary version to avoid adding unnecessary time.
Here’s an example. The primary version of my url is https://webtrainingwheels.com
Note the https and lack of www.
So if I test http://www.webtrainingwheels.com, I’ll get this message:
How much should you care?
A lot because you should be aware of what the main version of your URL is. Otherwise all the speed tests you do will be skewed. Fortunately it’s very easy to fix – just type in the correct URL!
Improve server response time
What it actually means: your server is slow.
The faster your server responds, the faster the webpage can be delivered to the visitor. There are a lot of possible reasons why the server would be slow. As far as WordPress sites go, the most common are:
Lack of caching
If you do already have caching and get this message, try running the test again in case it hit an uncached page previously. If you don’t have caching at the server level (ask your host), then definitely add a page caching plugin (e.g. WP Rocket, Fastest Cache etc).
How much should you care?
A lot! Although PageSpeed isn’t doing a full speed test, a slow server response can be the beginning of a slow load time and can indicate underlying issues. Even an Olympic sprinter will find it hard to make up the time against the rest of the field if she gets a slow start.
What it actually means: the file sizes of the images on your page are too large.
Big, chunky images are one of main causes of web page slowness, but fortunately it’s easy for you to control. This recommendation is very important except when it’s complaining about a few bytes of data. So you really have to pay attention to the amount of data it says you can save. This can be especially true if you’ve already optimized your images, it may still complain about a few bytes here and there. Look at the total amount to be saved and then the savings per image to decide if you can and should take action. Chances are, if you haven’t done anything already to optimize your images, you will need to take action here.
In the following example the savings is 699 bytes which is tiny and I’m not going to worry about it.
PageSpeed will flag any and all images on your site, even if they come from 3rd parties. For example, if you have an Instagram widget on your site those images will likely be listed. But you can’t optimize those because you have no control over them, only Instagram does. So either remove them from your site, reduce the quantity, or accept they are going to slow down your page and PageSpeed will always warn you about them.
How much you should care?
A lot! Optimizing your images is an easy win. If you have too many 3rd party images, you should certainly consider removing them. In a case where PSI is splitting hairs about a few bytes of data, then don’t worry and go about your life.
What it actually means: Compression, either using GZIP or Brotli, is a way to reduce the size of files as they are transferred from the server to the visitor’s browser.
How much should you care?
If the files are served from your domain then you should care a lot! Smaller files means faster transfer and faster loading time. So this is a very important feature to have on your site. Most caching plugins will apply the necessary directives to compress your files, and most servers support this by default these days, and if they don’t you should seriously consider moving hosts – it’s that important and rudimentary.
However, you can’t apply compression to files from 3rd parties. If the list of external files is short, don’t worry and move on. But, the longer the list of 3rd party files, the more you should try to reassess if you need those at all.
Leverage browser caching
What it actually means: Browser caching improves performance for visitors who visit multiple pages on your site or visit your site multiple times. It allows their computer to store commonly used files in the browser which means pages can be displayed faster on those repeat visits. Most servers support it by default.
How much should you care? If the files are served from your domain you should care a lot! Like compression, it’s a foundational optimization technique. Most caching plugins will apply this for you. But as with other rules, it can only be applied to files served from your own site, not those from 3rd parties.
If the list of 3rd party files is long then it’s an indicator that you have too much 3rd party content and you should consider removing some.
How much is too much? This can really vary depending on what the content is, but if there’s more than say, 4 files listed, it could be something to look at.
Minify resources – HTML, JS, CSS
Because it does have the ability to reduce file size, it’s considered to be a best practice. In reality it’s unlikely to save a significant enough amount of data to really have an impact on loading time. More and more themes and plugins are minifying their files so you don’t have to. Sometimes minification can break something on your site, so you also have to watch out for that.
Again, you have to click the details to see how much data can be saved, and in many cases, it’s very minimal.
How much should you care?
It’s very easy to do – many plugins exist for this purpose, including caching plugins – so you may as well try it. The more data that can be saved, the more you should care about it. But in most cases it doesn’t affect the actual load time of the page, so unless the overall savings is significant, don’t lose sleep about it.
The next three messages are essentially attempts to mitigate the negative performance impact of building overly complex pages.
Prioritize visible content
What it actually means: This is a tough one to wrap your head around if you’re not a developer. Imagine your webpage is like a jigsaw puzzle. The pieces are HTML, CSS and JS files. Your theme and every plugin each provide multiple puzzle pieces. The browser has to retrieve all the pieces and then fit them together to form the whole picture of your page and that takes time. The top part of your page, that which the user sees without scrolling, is the most important for perceived performance, that is, how fast it feels for the visitor.
Now imagine that top part of the puzzle is 1 single piece that could be identified and displayed quickly, and the rest could be assembled after because the user already has something to look at. The site would feel faster to the visitor.
This is the goal of this rule. PageSpeed wants the top part of your site to display using as few pieces as possible – ideally just 1 – a block of HTML that contains enough info to display and style the visible part of the page. If the browser has to go find other pieces from the box to complete the top part of the puzzle, you’ll get the “Prioritize visible content” message.
A popular site that suffers from this issue is Mashable.com. That’s because the content that is ultimately displayed at the top of the page doesn’t load in until after other elements, so you’re left waiting with a partially blank screen and no real content to view while the page is assembled: http://recordit.co/uQrrsA9pu2
In more technical terms, if the critical path CSS for your site is not accurate and other CSS files, or JS files are required to display the visible part of the page, you’ll see this message. This article has one of the better explanations I’ve found of why this message is displayed.
How much should you care?
This message is mostly about perceived performance, and user experience, not overall load time. So you should test your site on desktop and mobile and see how bad the issue is. If the site feels fast, don’t worry. This could be hard to fix as a non-developer if you don’t have the skills, or the money to pay someone who does have the skills. I mean, Mashable.com can’t even fix it ;)
Optimize CSS Delivery
What it actually means: The visual display of your site is controlled by CSS files. Your theme and plugins will all load their own CSS files. Going back to the puzzle analogy, each CSS file is a puzzle piece that needs to be retrieved, so the more you have, the longer it could take to compose the puzzle. But we know Google wants that first puzzle piece to contain all the necessary info. So it wants you to figure out which CSS is needed only for the top of the site, and instead of loading it in its own file, or puzzle piece, instead integrate that into the that first puzzle piece. This is called the Critical Path CSS. This will give the fastest perceived loading time. All the other stuff will still be loaded, but later.
When you have a WordPress site with multiple components – theme, plugins etc it’s pretty hard to achieve this without being a developer. The difficulty lies in the fact that not all sites play well with this optimization technique. You can easily break the display of your site by doing this and it’s hard for non-developers to troubleshoot.
The effects can be useful particularly for mobile, improving perceived performance by 0.5 seconds or more, per my own tests (your mileage may vary).
But due to the complexity, if an automated tool, like a plugin, doesn’t work for you, either pay a developer or focus your energy on the things you can more easily control.
How much should you care?
This is not where you should spend the most time or energy. In fact almost everything else on the list should be prioritized over this. Having a heavyweight page but trying to apply this technique is like trying to patch up a dam with a band-aid, and it has the potential to cause display issues. Simplifying your page would be the better way to approach this.
How much should you care?
Final Word on PageSpeed
In general, PageSpeed is a tool that can wave its hand generally in the direction of some issues on your site, while missing some very important rules like applying caching, reducing page weight etc. It’s best used by developers; the average user will probably come away with the wrong impression of their site’s performance. So make sure you’re using a real speed testing tool as well.
Measuring the loading time of your WordPress site is obviously a critical step in optimizing for speed. You have to be able to find where the bottlenecks are and where you can achieve the easiest and biggest performance “wins”. There are numerous tools, such as Pingdom, GTmetrix etc, available for measuring the performance of your site, each of them providing a different result, which is understandably confusing. Which one is “right” and which one should you use?
The answer depends on exactly what you want to measure and the level of detail that you want. They each provide different metrics which is why they provide different results, but it doesn’t mean that any of them is more “right” than the other.
However, no matter which tool(s) you use, what’s more important is understanding what information you’re actually getting, and being consistent with the tool you use. It’s not useful to compare results between tools – for example, between GTmetrix and Pingdom. It doesn’t matter if Pingdom says 2 seconds and GTmetrix says 5 seconds. You should only compare multiple results from the same tool, before and after you’ve made some changes.
Guidelines for Testing
Before you get started, a few ground rules for useful testing:
Run multiple tests every time to get an average and, if your site has any type of caching (plugin, server-side etc), discard the first result since it could be uncached and therefore misleading.
Geography matters – the further away the testing location from the location of your server, the longer the load time.
Choose a server location close to your host, which should also be close to your target audience
If there isn’t one, at least make sure to run all tests using the same server location for a consistent comparison
Loading time is the only metric you should be looking at, not the grade. Here’s an example of why that is. The grade does not correlate to speed:
The grade is great (88 and green) but it loads in 9+ seconds which is terrible!
OK, now let’s look at the top choices in free speed testing tools and see what the pros and cons are, to give some context to your decision.
Of all the tools, I think this is the most visually appealing – it’s easy to read and comprehend.
The summary at the top gives you an at-a-glance overview of the important info – load time, page size and requests:
Pingdom’s waterfall chart (the chart that breaks down each component of your site and how long it takes to load) is definitely the easiest to read of all the tools, and has some handy sorting features.
Tip: sort by Load Time to find any specific files causing a significant drain on load time:
I’ve blurred out the domain being tested for privacy, but you can see in the screenshot below that less than 50% of the content on this site is actually coming from the site itself. Everything else is coming from an external source.
There’s a choice of a few server locations (no account required)
The server selection has been reduced over recent months and at times there’s a long wait to run a test.
There’s no option to test mobile speed.
Does not support HTTP/2, so if your site uses HTTP/2, real life results in most modern browsers should actually be a little faster than reported.
What does it measure?
Technically speaking it uses a metric called “onload”. This is the time at which the browser has processed the page and all assets have been downloaded. It is usually shorter than “fully loaded” which is used by GT Metrix and why Pingdom typically gives faster results. You could say that this is a closer result to how the page appears for the user, since the page will be usable by the visitor by the time “onload” is reached, even if it’s not yet “fully loaded”.
On a site with a lot of external content like ads or huge videos streamed from a 3rd party vendor, you tend to see fluctuating load times. That’s because some of this activity happens after the ‘onload’ marker.
Great for a quick and easy assessment of issues.
Not good for specific use cases like mobile or http/2
Gtmetrix defaults to the “fully loaded” time, which as described above will give a longer result than Pingdom. Per their website :
” [Fully loaded] is the point after the Onload event fires and there has been no network activity for 2 seconds.”
Fully loaded can be considered more comprehensive since it waits for everything to download and execute. On a site with lots of ads etc you’ll really see a big difference in the load time. Now that could be misleading because if you site is developed well, it’s possible for the top part of your page to load quickly and be usable to the visitor, while the other stuff loads in the background, not interrupting the experience too much. But getting a comprehensive picture of the weight of the page and the impact of 3rd party content, is very useful. If your audience is in a place where mobile phone usage is prominent or where data is expensive, the total page weight could seriously affect them since they’re paying for all that data to download.
If you’re going to use GT Metrix, I strongly suggest signing up for a free account because that’s where this tool becomes really useful.
This list pertains to the free account:
Choice of several server locations
One mobile option available
Throttle network connection option – this allows you to test your site on slower internet connections
Ad block option – very handy to enable if you want to see the impact that ads have on the performance of your site
Saves a history of tests allowing for comparison – this makes it easy to track your site’s progress
Uses browsers that support HTTP/2
Timings tab gives you deeper metrics like Speed index, first contentful paint etc:
Tests are run using browsers that support HTTP/2, but the recommendations provided are not tailored for HTTP/2
Recommendations are bit outdated, and some of them are simply quite useless. “Remove query strings” is outdated and won’t have an impact on the load time of your site.
The waterfall is not as easy to read or sort as Pingdom’s:
A free account is a must-have
Provides a fair balance between ease-of-use and more advanced options
This is the grandaddy of all speed testing tools and it’s still the most comprehensive. It just looks like it’s right out of 1998. But if you can get past that, you can get a lot of great information from it. If you’re a hardcore performance junkie you’ll probably want to use this since it has the most technical and comprehensive set of details.
Largest choice of server location
Largest selection of mobile testing options
Most configurable – for power testers it has the most options
Very detailed reports showing multiple metrics such as time to first byte, start render, speed index etc:
Could be a little overwhelming for optimization novices
This is a trick because this is not a speed testing tool.
Let me just say that again in case you weren’t listening. This is not a speed testing tool.
It does not measure the load time of your website so you cannot use it to see how fast your site is. It does have some uses, but speed testing is not one of them.
The score it gives you is not related to the speed of your site, it’s just based on some generic rules which may or may not impact loading time. the score does not affect your SEO or ranking – only the actual load time does that.
Based on some recent changes they’ve implemented, you may start to see some actual speed metrics, but so far these are only showing for larger sites with a lot of traffic. For the average site, the report is still heavily based on adherence to their ruleset and not actual speed.
In short, don’t use it to measure the speed of your site.
This is a mobile-specific tool. Don’t be horrified by the long load times of your mobile page. It’s normal for your site to take longer to load on a mobile device than on a desktop.
Easy to use
Nicely designed interface and results summary
Very quick way to see how your mobile site performs
The analysis is a little bit limited. You can opt to receive a report via email which provides a few more details, but it’s not especially comprehensive.
Some of the recommendations are dubious. Since it’s a Google tool, they of course use it as a way to push AMP for example, which may not be a good solution for every site.
Good for a quick at-a-glance report on mobile performance
But if your site is not performing well in this test you would then need to use a more in-depth tool to find out why.
So now that you know a little about these tools you can try them out and see which one suits you best. It’s not necessary to use all of them to test your site. Pick one and use it consistently to benchmark the before and after results of changes you’re making on your site, and you’ll be in good shape. I personally use Pingdom and GTmetrix the most, with Webpagetest begin my go-to if I want to get really nerdy with the results.
Google Search Console, formerly known as Webmaster Tools, is a must-have for your WordPress site. It is a free account which will give you a lot of useful information about the search health of your site. Additionally you’ll get valuable SEO data about keywords, click through rates etc, which you could not otherwise get in Google Analytics alone. There are other uses and features of Search Console, but in this and the next post, I’ll be focusing on the marketing uses of Search Console.
The next step is to “Add a property.” A property just means a website (or app).
You should use the primary version of your URL. Most sites are accessible whether you type in your domain with or without the www in front of it. But usually one version is primary meaning that, no matter which other version you type in, you get redirected to the primary version. If the www version of your domain is the primary one, it means that if you type in your domain without www, you will get redirected to the www version. You can simply visit your site and see at which version you end up. The same can be true of http and https. If you use https, but type in your website using http, you should be redirected to the https version.
Google needs to make sure you actually own the website you’re trying to set up. You’ll be presented with a few possible methods for this step. The easiest way is with Google Analytics, assuming you have that set up on your site (you should!):
If you can’t do it that way and you’re not tech-savvy, the easiest way is probably to choose the HTML tag method because you can use a plugin like Yoast SEO to help you do that.
After selecting the HTML tag option, copy the meta tag provided, it looks something like this:
Whichever one you use will generate an XML sitemap for you and provide you the URL.
It will be something like example.com/sitemap.xml
Once you have that, go to Crawl > Sitemaps in Search Console
Integrate search console into Google Analytics
This is a very important step since it will provide you with a lot of valuable SEO information, such as which search terms your site ranks for, what the click through rate is etc. You can’t get this from Analytics alone.
Log into Analytics, go to Acquisition > Search Console, click on any sub menu and you will see the prompt for search console integration
Click on Set up Search Console data sharing
You can also get to it by clicking the Settings icon at the bottom left and then clicking on Property Settings.
You don’t need to worry about most of the settings for now, you can always go back and activate advertising features, for example. For now, you have to click on “Adjust Search Console”:
Click Add, and a new tab will open. Select your site from the list (if multiple are listed), then click Save at the bottom.
Your site will now be listed in your search console account.
Go back to the Analytics window you started in and click Done.
You won’t see any data immediately but after a period of time, you’ll start to get some valuable information.
By completing the integration with Analytics it allows you to see the search engine related info inside your Analytics account. If you don’t complete the integration you would have to log in to Search Console to see everything.
Additionally, by using search console info within Analytics, you can see it within the context of other factors like conversion rates, bounce rates and other metrics that you only get in Analytics.
In the next post we’ll get into the fun stuff of how to use the data search console gives you, to improve your SEO.
GET TARGETED TRAFFIC: The Beginner's Guide to SEO for Business ebook shows you how