How to Add Expires Headers in WordPress

Expires headers help you leverage browser caching, which lets you speed up your site’s load times. Beyond that, they’re also part of YSlow’s performance recommendations, which means they’ll affect your performance “score” in tools like GTmetrix.

What Is Browser Caching?

Before we can talk about expires headers, we first need to introduce you to the concept of browser caching. This is important because expires headers help you control and implement browser caching – so if you don’t understand browser caching, you can’t understand expires headers.

In a nutshell, browser caching lets your site tell a visitor’s browser to save certain files on the visitor’s local computer and load those local files for subsequent visits, rather than downloading them from your server on every page load.

By eliminating the need to download the file each time, you can speed up your site’s load times and reduce bandwidth usage.

Let’s look at an example – your site’s logo image. Your logo is the same on every page, so it doesn’t make sense to force visitors’ browsers to re-download the same logo file on every page load. With browser caching, you could store that logo file on visitors’ local computers instead. A visitor would still need to download your logo image on their first visit. But for subsequent page views, the file would be loaded from their local browser cache.

What Are Expires Headers?

Expires headers let you tell a visitor’s web browser whether it should load a given resource from the local browser cache (as we discussed above) or whether it needs to download a new version from the web server.

More specifically, it lets you set a duration for the cached version of different file types before that file “expires” and the browser must download it from the server again.

Let’s look at an example…

Let’s say you want to control browser caching behavior for PNG image files on your site. If you set the Expires headers for PNG files equal to one month, this means that a visitor’s browser will:

Load the already-downloaded version from the cache for one month after the initial access/download. Re-download that file from the server after one month.

You can set different Expires headers for different file types, which gives you granular control over your site’s browser caching.

Expires Headers vs cache-control

While using Expires headers is one way to control browser caching on WordPress, it’s not the only way. There’s also another technique called cache-control.

Cache-control is a more modern technique and offers a bit more flexibility for controlling caching behavior. For that reason, many sites use cache-control today – including us here at Kinsta with our custom Nginx configuration.

However, Expires headers still offer everything most sites need, so they’re a fine option to use for browser caching. You can also use both, though your cache-control headers will take precedence in most situations. If using both, you’ll want to make sure that you set the same time values in each

How to Add Expires Headers With config File on Nginx Web Server

If your host uses the Nginx web server, you can control Expires headers by editing your server’s configuration file. How you edit this file will depend on your host – you can reach out to your host’s support if you need help.

Kinsta does use the Nginx web server – but remember that we already configure things for you, so you don’t need to add any code yourself.

Here’s the code that you need to use:

How to Test Expires Headers with Terminal

If you prefer testing expires headers with a more technical option, you can make a curl request in Terminal to a static asset on your site, and inspect the HTTP headers directly. For example, if your expires or cache-control rule covers CSS files, you can make a curl request like the one below.

curl -I https://domain.com/wp-includes/css/dist/block-library/style.min.css

In our case, the curl request to the style.min.css file provides the response below.

HTTP/2 200

server: nginx

date: Wed, 27 Jan 2021 01:11:05 GMT

content-type: text/css; charset=UTF-8

content-length: 51433

last-modified: Tue, 12 Jan 2021 20:17:48 GMT

vary: Accept-Encoding

etag: "5ffe03ec-c8e9"

expires: Thu, 31 Dec 2037 23:55:55 GMT

cache-control: max-age=315360000

access-control-allow-origin: *

accept-ranges: bytes

x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63

As you can see, the response includes an expires and cache-control headers. Specifically, the cache-control header shows a max-age of 315360000 seconds, which indicates an expiration time of one year.

Conclusion:

Adding Expires headers to your WordPress site is an effective way to leverage browser caching and improve your site's load times. By instructing a visitor’s browser to save certain files on the local computer, these headers reduce the need for repeated downloads, speeding up page loads and reducing bandwidth usage.