Module 6 · 6.2

English

Nederlands English Deutsch Français

Caching

Module 6: Speed · Reading time: 9 minutes

Learning objective: After this lesson, you can explain which types of cache exist and set up and check a page cache correctly.

Key concepts: page cache, browser cache, Cache-Control, object cache, Redis, OPcache, CDN, cache plugin, LiteSpeed Cache, exceptions (logged in, shopping cart, checkout), clearing the cache, duplicate cache plugins

Cache: don't do the work twice

A cache stores the result of work, so it doesn't need to be done again next time. On a WordPress website, this happens in four places, from biggest to smallest:

Type	What is stored	Where	Effect
Page cache	The complete HTML of a page	On the server (or at a CDN)	The biggest gain: PHP, plugins and the database are skipped
Browser cache	Stylesheets, scripts, images, fonts	In the visitor's browser	A second page loads faster, because the files are already there
Object cache	Results of database queries	In the server's memory (Redis, Memcached)	Helps where a page cache can't, such as for logged-in users and webshops
OPcache	The compiled PHP code	In PHP's memory	PHP doesn't need to read files again for every request; enabled by default at most hosting providers

The page cache

Lesson 1.2 showed it: without a cache, WordPress rebuilds the whole page on every visit. With a page cache, the first visitor generates it, and subsequent visitors get the stored HTML. A TTFB of one second can drop to a few hundredths of a second this way, and your package can handle far more visitors at once.

How you get a page cache depends on your web server:

LiteSpeed (many shared hosting setups, including WebOké): the web server has its own cache. The free LiteSpeed Cache plugin controls it from within WordPress: which pages may go into the cache, and when they're cleared. Because the cache sits in the web server, PHP isn't started at all for a stored page.
Apache or nginx: a cache plugin that stores the HTML as files, such as WP Super Cache, W3 Total Cache or a paid plugin like WP Rocket. Or a cache that your hosting provider manages at server level.
Managed WordPress hosting often has its own cache; in that case you usually don't install a cache plugin.

Choose one. Two cache plugins at the same time (for example LiteSpeed Cache and WP Rocket) get in each other's way: duplicate work, pages that don't get cleared, odd errors. On a LiteSpeed server, LiteSpeed Cache works with the web server's cache; another cache plugin can't do that.

What shouldn't be cached

A page cache gives everyone the same HTML. That goes wrong for pages that differ per visitor:

logged-in users (the admin bar, "Welcome, Lisa");
the shopping cart, checkout and My account on a webshop;
pages with a form with a one-time code (nonce), which expires after a while;
pages that show something different based on location, language or a cookie.

Good cache plugins automatically skip logged-in users and the well-known WooCommerce pages. With other plugins (a membership area, a booking system), you need to set up exceptions yourself. The sign that something's wrong: a visitor sees someone else's shopping cart, or a form says "expired" or "invalid request".

Clearing: when is the cache out of date?

If you change a page, the stored version needs to go. Cache plugins usually clear that page, the homepage and the archives when you save a Post. When you change the menu, the theme or a widget, often the entire cache needs to be cleared. If you see the old version after a change, clear the cache (in the cache plugin's admin bar) and check in a private window, so your own browser cache doesn't interfere.

The browser cache

The server tells the browser with headers how long it may keep a file:

cache-control: public, max-age=31536000

This says: keep this for a year. For stylesheets, scripts, fonts and images, a long time is fine, because WordPress adds a different ?ver= after the address with a new version, so the browser sees it as a new file. For the HTML itself, a short time (or none) is usual, so visitors see changes quickly.

Many hosting providers and cache plugins handle this for you. In this lesson's exercise, you'll check it.

Object cache and Redis

A page cache doesn't help for logged-in users or for the shopping cart. That's where an object cache helps: WordPress stores the results of database queries in memory, in a program such as Redis or Memcached. The next time the same query comes in, WordPress fetches the answer from memory instead of from the database.

This is especially useful for webshops, membership websites and websites with many logged-in editors. For a regular information website with a page cache, the difference is small. An object cache requires your hosting provider to offer Redis or Memcached; you then enable it with a plugin (LiteSpeed Cache can do it, and there are also standalone plugins).

A CDN

A CDN (content delivery network) is a network of servers in many places around the world that store copies of your files (and sometimes your entire pages). A visitor gets them from the nearest server. This mainly helps with visitors far away and with lots of traffic. For a website hosted in the Netherlands with visitors in the Netherlands on a server in the Netherlands, the gain is small. A CDN with proxy (such as Cloudflare) also changes your DNS and your certificate (DNS course lesson 7.5); don't do this without understanding what it does.

In practice: what it looks like in a panel

As an example, we use LiteSpeed Cache on a LiteSpeed server. Other cache plugins have similar settings under different names.

Install and activate LiteSpeed Cache under Plugins > Add New Plugin.
Open LiteSpeed Cache > Cache: "Enable Cache" is on, "Cache Logged-in Users" off (unless you know what you're doing).
For a webshop: check under Exclude that the shopping cart, checkout and My account are listed (with WooCommerce, this happens automatically).
Leave the other components (optimising CSS and JavaScript, images) off at first. Turn them on one at a time and test after each step: it's precisely these components that sometimes break a theme.
Check in a private window with the developer tools (F12, Network, first request): on the second load, you should see x-litespeed-cache: hit.

Summary

There are four types of cache: page (the biggest gain), browser, object and OPcache.
On a LiteSpeed server, LiteSpeed Cache controls the web server's cache; on Apache or nginx, you use a different cache plugin. Choose one.
Logged-in users, shopping cart, checkout and personal pages don't belong in the page cache.
Clear the cache after changes to the menu or theme and check in a private window.
An object cache (Redis) helps with webshops and logged-in users; a CDN mainly helps with visitors far away and lots of traffic.

Quiz

Exercise

Exercise A6.2: Is your page cache working? Enter your website's address. The program requests the homepage twice in quick succession, without cookies, and checks the second request for headers indicating a cache hit (x-litespeed-cache: hit, x-cache: HIT, cf-cache-status: HIT, an age greater than 0, or the header of another well-known cache). It then requests one stylesheet from the homepage and checks whether the browser may keep it for at least seven days (cache-control: max-age or expires). Note down which cache you're using.

Cookies at WebOké

Cookie settings

Necessary

Marketing