WordPress Speed Optimization Glossary

See this post for more info on various testing tools.

onload could be considered closer to the user experience because usually you can start using a page before everything has executed.

But fully loaded is useful if you want to find out the entire page size and get the most complete picture of performance.

Perceived performance / speed

This isn’t a metric in itself but a term for the user experience of loading time. Even if the fully load time is longer, if your site can display the critical content quickly, users will perceive it as being fast. The next term tries to accomodate this as a metric.

First contentful paint / first meaningful paint

These are very similar and it’s basically the time it takes before something useful appears on the screen – a “hero” image, some content etc. As a visitor to a site, if you’re staring at a blank screen, the site will feel slow. But the faster you start to see some content, the faster you’ll feel the page is, even if the entire page hasn’t loaded yet.

Performance grade/score

These are the vanity grades given by tools like PageSpeed Insights, GT Metrix etc. You should largely ignore these since they are not correlated to load time. That means it’s possible to have a mediocre score and a fast site and vice versa. The only metric that affects SEO and user experience is the load time, so you should ignore the score – it’s a gross over-simplification of your site’s performance and is often misleading.

Optimization Techniques

Page Caching

There are several types of caching available (object, browser, PHP etc). When you read guides about optimizing WordPress and they recommend using a caching plugin, it’s typically for the purpose of page caching.

WordPress has several moving parts that have to run when a visitor goes to a page on your site. Caching helps your site work smarter, not harder. Caching runs that process once per page, then it takes the finished page and stores it on the server. When the next person comes to the page, they get the pre-assembled page which can be delivered much faster.

When someone comes to your house, do you wait for them to arrive before assembling that IKEA chair? That’s what WordPress does if you don’t have caching – it creates that page from scratch every time someone wants to see it.

Or do you have some furniture already assembled that they can sit on? With caching, the page is already generated and saved, ready to deliver to the visitor.

See this post for a more detailed, but easy-to-understand description of page caching.

This type of caching can be provided by any one of a number of WordPress plugins (WP Rocket, Fastest Cache, Super Cache etc)

Varnish

Technically Varnish is a “reverse proxy HTTP accelerator.” Yeah, I know, what does that even mean? Basically it’s a type of server-side full page caching that stores the cache in the server memory.
Mmmm, yeah, what does that even mean?

It’s performing a similar pre-assembly process for your pages as described above, but because it runs at the server-level, it means you can’t add Varnish to your site with a WordPress plugin. Your host has to provide it. A lot of managed WordPress hosts provide this kind of caching. Although it can run at the same time as a WordPress caching plugin, if configured correctly, server-side caching should be faster.

Browser caching

Imagine your web page is like a puzzle. The puzzle pieces are CSS, JavaScript and image files. When you visit a web page, the browser has to retrieve all those puzzle pieces from the server, then assemble them correctly to make your web page.

Browser caching allows the browser to keep some of those puzzle pieces in place, that is, stored in the browser itself (on your computer), so that the next time you visit that page, it doesn’t have to fetch them again from the server.

The purpose of browser caching is to make repeat visits to the same site much faster for the visitor.

Compression

There are 2 main compression methods – GZIP and a newer one called Brotli. The purpose is the same – to compress all the puzzle pieces so that they download faster from the server to your browser. Smaller files = faster download from server to browser = faster page. Many caching and optimization plugins provide rules to apply compression for various file types, but it has to be enabled on the server in order to be applied.

Minification of HTML, JS, CSS

Minification is the process of stripping out extraneous whitespace and comments from code, to reduce the file size.
Smaller files = faster download from server to browser = faster page.
It’s similar to reducing the amount of paper you would use by using single-spacing instead of double-spacing. It won’t make too much difference to files that are already efficient, but can make a difference for bigger ones.

Concatenation / Combination

The process of joining together multiple CSS or JS files into 1 file. This reduces the number of puzzle pieces the browser has to fetch from the server. The advent of HTTP/2 (see below) reduces the necessity for this technique but it can still be useful.

Render-blocking CSS/JS

When the browser is assembling the puzzle pieces to display, or render, the web page, there are some files which stop the process until the browser deals with them. That means these files are “render-blocking”. It’s bad for perceived performance to have too many files which are render-blocking.

Deferred loading of JavaScript

To prevent your JavaScript puzzle pieces getting in the way while the browser builds the web page, i.e to prevent render-blocking, you can use this optimization technique. It lets the rest of the page load first then processes these files at the end. It helps with perceived load time.

Above-the-fold

In the days when people read newspapers, above the fold referred to the content that was visible at the top when the paper was folded in half.

With responsive websites and a multitude of devices, each with different screen sizes, the “fold”, that is the visible part of the page before you scroll, doesn’t have a set size. The fold on one device is different than another. So it’s not fixed anymore but the concept still relates to “content the visitor can see without scrolling.”

For perceived performance, above-the-fold content should be displayed as quickly as possible.

Image optimization

Chunky images are one of the most common factors in slow pages. Your images should be optimized in 2 ways:
1. Sized to the correct dimensions. ie. don’t use a 2000 pixel wide image when only a 500 pixel size is needed.
2. Compressed to reduce file size further. You can do this with your graphics editing program or with a WordPress plugin.

Other Services

CDN

A Content Delivery Network is a service that provides servers all over the world that can store your website’s assets, then deliver it to the visitor from the closest server to them, making it faster. This is typically a paid service, through a company like KeyCDN, Stackpath, CDN77 etc.

Cloudflare

Cloudflare is a service that can improve the performance and security of your site. They do have a free plan with many benefits. Many people refer to it as a CDN and it does fulfill a similar function, but technically it’s different because it works at the DNS level.

HTTP/2

This isn’t a service per se. What this actually is, is super-techy and boring to explain. What you need to know is that it’s a new and improved, that is faster, method used to deliver web pages from the server to the browser. There are 3 conditions:

• Browsers have to support it – most of them do now.]
• Servers have to support it. Many do, ask your host about it. If they don’t, using Cloudflare will enable HTTP/2
• Your site has to use https.

After that, you don’t really need to do anything specific – your site is just faster. I’m mentioning it because there are some optimization techniques which may have been applicable before (HTTP/1) which are no longer applicable when HTTP/2 is enabled for your site.