WordPress Page Speed and Site Speed
Tools like Google’s PageSpeed Insights, WebPageTest, GTmetrix and Pingdom are often used by clients and professionals alike to quantify the page speed or site speed of a WordPress website.
Defining Optimize
“Optimize” is 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).”
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 calculator, these are the main contributors to the score:
| Audit | Category Weighting | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| FCP marks the time at which the first text or image is painted. | 15% | < 1s | 1s – 3s | 3s < |
| SI shows how quickly the contents of a page are visibly populated. | 15% | < 3.4s | 3.4s – 7.3s | 7.3s < |
| LCP marks the point in the page load timeline when the page’s main content has likely loaded | 25% | < 2.5s | 2.5s – 4s | 4s < |
| TTI measures the amount of time it takes for the page to become fully interactive | 15% | < 3.8s | 3.8s – 9.6s | 9.6s < |
| TBT measures the total amount of time that a page is blocked from responding to user input | 25% | < 0.3s | 0.3s – 0.8s | 0.8s < |
| CLS quantifies how often users experience unexpected layout shifts | 5% | < 0.1 | 0.1 – 0.25 | 0.25< |
Mobile Page Speed Score
The mobile PageSpeed Insights (with Lighthouse V6) 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.
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, Speed Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time and Cumulative Layout Shift) 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.
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.
- 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. 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 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. I am available for consultation and implementation of site speed optimization strategies.
Leave a Reply
Want to join the discussion?Feel free to contribute!