Tools like Google’s PageSpeed Insights, GTmetrix and Pingdom are often used by clients and professionals alike to quantify the page speed or site speed of a WordPress website. Unfortunately, how they work and what the results mean are not widely understood, resulting in clients posting jobs to chase impossible metrics and goals.
What Is Measured for Page Speed?
PageSpeed Insights
PageSpeed Insights is one of the Google tools for testing performance of a site.
According to the Lighthouse Score Weighting document, these are the main contributors to the score:
| Audit | Category Weighting | Score of 100 | Score of 99 | Score of 95 | Score of 90 | Score of 80 | Score of 75 | Score of 50 | Score of 0 |
|---|---|---|---|---|---|---|---|---|---|
| First Contentful Paint
Marks the time at which the first text or image is painted. |
20.0% | 1.4s | 1.5s | 2.0s | 2.3s | 2.8s | 3.0s | 4.0s | 12.2s |
| First Meaningful Paint
Measures when the primary content of a page is visible. |
6.7% | 1.4s | 1.5s | 2.0s | 2.3s | 2.8s | 3.0s | 4.0s | 12.2s |
| Speed Index
Shows how quickly the contents of a page are visibly populated. |
26.7% | 2.0s | 2.2s | 2.9s | 3.4s | 4.1s | 4.4s | 5.8s | 17.6s |
| First CPU Idle
Marks the first time at which the page’s main thread is quiet enough to handle input. |
13.3% | 2.0s | 2.2s | 3.0s | 3.6s | 4.4s | 4.7s | 6.5s | 22.4s |
| Time to Interactive
The amount of time it takes for the page to become fully interactive. |
33.3% | 2.0s | 2.2s | 3.1s | 3.8s | 4.7s | 5.2s | 7.3s | 28.4s |
| Max Potential First Input Delay
The duration of the longest task. |
0.0% | 67ms | 76ms | 108ms | 130ms | 163ms | 177ms | 250ms | 965ms |
Mobile Page Speed Score
The mobile PageSpeed Insights (with Lighthouse V5) score is a simulated page load on a mid-tier device (Moto G4 launched in 2016) on a mobile network with a latency of 150ms and a throughput of 1.6Mbps down / 750 Kbps up. It is intended to simulate a connection in the top 25% of 3G and bottom 25% of 4G.
Real Throughput
1B = 8b (1 byte = 8 bits) 1Mb = 1000kb (1 megabit = 1000 kilobit) 1.6Mb = 1.6 Megabits x 1000 (to convert mega to kilo) / 8 bits per byte = 200 Kilobytes
This means that it takes at least one second to transfer 200kB of site data to the device, including code, CSS, JavaScript, fonts and images, not taking DNS resolution and other processes into account.
Reasons for Low Mobile Score
- Limited bandwidth (200kB/s) slows downloading of resources (CSS, JavaScript, Images)
- Limited processor speed and memory slows processing of JavaScript.
Mitigations for Low Mobile Score
There are various options to mitigate a low mobile score in PageSpeed Insights, but they would depend on your particular circumstances. The biggest obstacle is clients who resist advice by the freelancer they hire to do speed optimization.
A common scenario might be:
Job Post: Current ranking on mobile is 21. Current ranking on desktop is 69. I need both to be above 80! (Budget: $100)
Freelancer: Ok, so let’s remove the five unnecessary scripts and two popups and reduce the advertising from four blocks to two.
Client: But those popups are the only way I get people to subscribe to my newsletter! And the advertising pays my bills!
Freelancer: Ok, how many subscribers do you have and how often do you send out a newsletter?
Client: I have about 100 subscribers, and I haven’t sent a newsletter yet, but I’m going to.
Freelancer: Ok… What about one popup, and three adverts, but lower the expectation for mobile speed score to 65.
Client: No, you said you can get it above 80! It must be above 80! And no, I’m not taking off a popup or reducing adverts. You obviously don’t know what you’re doing!
That is the entire reason I don’t take on site speed optimization projects anymore.
YSlow Scores for Page Speed
YSlow has a ruleset matrix by which websites are rated. It is presented with approximate equivalent PageSpeed Insights Audit recommendations, without the six main score metrix (First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive and Estimated Input Latency) discussed earlier.
Brian Dean’s Experiment with Page Speed
While writing this post, Brian Dean of Backlinko did an experiment on page speed. He found that page speed in itself did not affect ranking.
Some Actual Page Speed Job Descriptions from Upwork
Current ranking on mobile is 21. Current ranking on desktop is 69. I need both to be above 80! (Budget: $100)
Site is using WordPress and the Houzez theme. Need a perfect speed score for GTmetrix and Google Page Speed tool! We have WP Rocket plugin and Imagify which are the best plugins! Also we have Cloudflare. (Budget: $150)
I am looking for someone with experience in WordPress Speed Optimization for my website. I only have 21 active plugins and not a lot of pages on my site so it should be a fairly quick job. (Budget: $150)
I have designed 2 websites and need a freelancer to speed them up so that they’d score at least 95/100 on Google PageSpeed Insights. How you do it is your business and I won’t ask you any questions regarding it; all I want to see is that 95/100 number. The turnaround is 24 hours. (Budget: $100)
I need to speed up the page load time for the homepage of [redacted], built with a Divi-like theme on WordPress, significantly, either by implementing AMP or some other kind of static page builder or frontend consolidation. (Budget: $150)
Defining Optimize
“Optimize” is clearly a word people struggle with and understand as “make perfect.” It actually means “make the best or most effective use of (a situation or resource).”
One of my own websites have a mobile PageSpeed Insights score of 47, with a desktop score of 90. I’m happy with that. It is the best it will be, considering what I want it to do.
Who Controls What?
On any website, what you control is what is served by your website. What you do not control, is what is served through your website from another website.
Some of the Things You Control
- Your server (if you’re not on shared hosting). VPS pricing has plummeted over the past decade, enabling anybody with a little bit of skill to host their own websites from $3.50 per month with Amazon Lightsail. A VPS enables you to make use of Apache’s mod_pagespeed module (for Apache and Nginx), which does most of the optimization done by WordPress plugins – and more – on a server-level through a host of configurable filters. (This website runs on an AWS Lightsail WordPress Multisite instance with mod_pagespeed and W3 Total Cache installed behind a Cloudflare CDN.)
- Your CDN. Whether you use a free CDN (like Jetpack Site Accelerator, Cloudflare or one provided by your host) or a premium CDN (like KeyCDN or StackPath), it is your choice which CDN to use. You should (regularly) check that the CDN is actually adding speed to your site, rather than reducing it.
- Your theme. There are some premium themes available with a terrible effect on page and site speed, while there are some great ones as well. It is always best to go with a minimalist theme (a very minimalist theme one of my clients uses is Carbonate) with the options you need, rather than one that tries to be everything to everybody. There is always a balance between convenience and speed: while I am able to code my own themes, I choose the convenience of using themes built by others (Enfold is my favourite) at the sacrifice of some speed. The more features a theme has, the more likely it is to affect your site speed.
- Your plugins. “I only have 21 active plugins and not a lot of pages on my site so it should be a fairly quick job.” You saw that one, right? That’s “only 21 active plugins and not a lot of pages.” Then why 21 plugins?! Here are the plugins you really need: Jetpack (for images only – everything else off, unless you use them) with Akismet (for spam, if you allow comments), Rank Math SEO (or similar, for SEO), a caching plugin (W3 Total Cache, WP Rocket or similar) and WordFence (for security). That’s 5. Any other plugins must have a specific, particular, indispensable reason to be installed, because each plugin adds code (slowing down code execution) and probably CSS and JavaScript (slowing down your site).
- Your Page Builder. Invariably, and even in this day and age, page builders create bloated code. If you don’t have to use one, don’t. If you have to, use it for what is necessary and nothing else.
- Your images. Foodica is a theme I have come across that works very well with Jetpack Site Accelerator, but there may be others. For the rest of us, it is still a good idea to resize images before upload, and to use the appropriate size in our posts. There is hardly ever any reason for an image to be wider than 700 pixels. Jetpack Site Accelerator serves images in the appropriate size (dependent on the theme) and format that the browser is capable of. Cloudflare Pro plans and higher also serves images in an appropriate format, while Business and higher can also resize images automatically.
- Your caching. The caching plugin you use, how it’s set up and how it complements other measures you have in place can have a massive impact on your page speed score in particular and your site speed score in general. Some experimentation is definitely required, as one size does not fit all and there is often duplication, unnecessary settings and plain wrong settings. On an https site served over HTTP/2, it may or may not be beneficial to combine CSS and JavaScript. With a site served through Cloudflare, some settings are better handled by the server (or caching plugin), while some are better handled by Cloudflare.
Some of the Things You May Not Control
- Advertising served through advertising networks, such as Google AdSense, Mediavine, etc.
- Scripts served from external sources to track metrics, such as Google Analytics, Facebook Pixel, etc.
- Fonts served from external sources, such as Google Fonts, Typekit, etc.
- Content from third-party sites such as Instagram, YouTube, etc.
If your site contains these, there is little you can do to improve your page speed score apart from removing them.
Mitigation of the Things You May Not Control
- Some plugins allow DNS Prefetch and Preconnect settings to be added. This speeds up connection time to third party sources by connecting as soon as possible, rather than when needed.
- Some plugins can automatically move CSS to the top of the page and JavaScript to the bottom of the page, dependent on how the CSS and JavaScript is injected into the site.
- Some plugins can automatically change the loading of JavaScript to asynchronous (load when possible, sequence irrelevant, after the rest of the document) or deferred (load in sequence after the rest of the document). This would depend on how the JavaScript is injected into the site and may not work in all cases.
- There are some plugins that can cache external resources locally, such as Optimize My Google Fonts, Flying Analytics and others. This allows greater control over these resources.
Conclusion on Page Speed and Site Speed Tools
Optimization of page speed and site speed is a necessary part of site development, but it must be approached with realistic expectations and a willingness to compromise between the features you want and speed. It is not a simple once-off exercise that should only be performed on the home page.
Understand the limitations, realities and options, choose wisely and make the most of your site speed.
Leave a Reply
Want to join the discussion?Feel free to contribute!