Google PageSpeed Insights – A Common Sense Guide for WordPress Users

Google PageSpeed Insights – A Common Sense Guide for WordPress Users

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.
Spread the love

Google PageSpeed Insights Guide for WordPress Users

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.

PageSpeed - grade and colorSince 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 an attempt to mitigate that.

For more background on this issue in the context of another Google project,  AMP,  do yourself a favour and read Caspar Hübinger’s post for his enlightening take on that.

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.

BONUS PDF: Demystify the jargon! Download this guide to common speed optimization terms.

The PageSpeed Rules

For reference, you can find all the PageSpeed Insights Rules here.

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.

PageSpeed - show how to fix

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:

Google PageSpeed- Avoid landing page redirects

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
  • Poor hosting
  • Slow plugins

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.

Optimize images

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 Insights - Optimize images

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.

Enable compression

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

What it actually means: Minification is the process of stripping out extraneous whitespace and comments from HTML, CSS and JavaScript files. In theory this can reduce the file size, which in theory could make the files faster to download. You could liken it to using single spacing instead of double spacing when writing a document, to save paper.

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.

Google PageSpeed - Minify recommendation

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.

It’s often paired with the “Eliminate render-blocking JavaScript and CSS”  messages described below. If you’ve tried to apply those render-blocking optimizations using automated plugin solutions, but the results aren’t 100% right for your site, you’ll likely see this message. If you haven’t tried any of those optimizations, it could be the way your theme is coded and that wouldn’t be an easy fix.

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 😉

What you can try to do is to simplify your page. The kinds of sites most likely to be flagged are those that are unnecessarily fancy – that have sliders or other Javascript-dependent features at the top. So if you do have something like a slider at the top, try replacing it with a static image instead.

Optimize CSS Delivery

Almost every WordPress site owner will see this message, along with  the render-blocking JavaScript message (below). It’s also one of the most technically advanced recommendations, particularly when you’re using a system like WordPress where almost everything is pre-built and not completely under your control (at least not without development chops).

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.

If you simplify your page in general, this will be less of an issue.Again, something like a JavaScript slider at the top of your page could be the reason this optimization method won’t work well. So switching that to a static image will be better all around.

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.

Remove render-blocking JavaScript

What it actually means: This is another a very developer-centric one.  JavaScript files are another type of puzzle piece  which take time to find and arrange. Not only that, but nothing else can be done on the page while those pieces are being arranged. So this optimization method is a way to delay the arranging of these pieces so that the rest of the puzzle can shape, making the page feel faster for users, and these pieces will be slotted in at the end. Implementing this technique mostly helps the perceived speed on mobile devices. Lots of plugins exist to help you do this easily, but it can break things and in that case, it takes some technical skill to fix. The technical name for this technique is deferring the loading of JavaScript files.

How much should you care?

Along with Optimize CSS Delivery, I put this in the category of things to do only if you have the know-how. But it shouldn’t be your priority. Try it, but if it causes functionality problems, don’t sweat it.  Most of the time, just making a simpler page will solve this message at a fundamental level and that’s the approach I’d recommend. Deferring the loading of JavaScript files is a band-aid solution to the issue of having too many JavaScript files in the first place.

BONUS PDF: Demystify the jargon! Download this guide to common speed optimization terms.

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.

Facebook Comments
Spread the love

Posted by News Monkey