2 Ways to Add Expires Headers in WordPress

Back in June 2021, Google began to roll out a core algorithm update designed to provide the best experience to users by ranking pages that offer a quality page performance first. This update considered several page experience signals, including Core Web Vitals.

Core Web Vitals is a set of metrics focused on different aspects of the user experience, including load time. This is not surprising. Page speed has been a Google ranking factor for desktop since 2010 and for mobile since 2018.

If you’re a WordPress website owner, then you’re likely always looking for more ways to speed up your website. One way is to add expires headers. Let’s look at what these headers are and how you can add them in WordPress, with or without a plugin.

This HTTP header helps ensure that returning visitors are not shown outdated content when visiting your site. It also helps speed up their load time. To understand how, you need to first understand browser caching.

When you visit a website, your browser communicates with the web server to request and download files required to display the web page. Depending on how complicated the web page is, this could mean tons of files are being transferred between your browser and the server.

For example, in the illustration below, the browser must request four static resources from the server to display the web page:

The good news is that if expires headers are set for those files, then the next time you visit that site, your browser can pull the available files from the cache instead of having to request and download them from the server again.

In the illustration below, notice that the browser can grab most of the resources from the cache and only has to request one from the server:

So adding expires headers provides two benefits — it not only reduces the number of HTTP requests sent to the server, it also reduces the number of files that need to be downloaded. The result is a faster load time.

Now that we understand the benefits of expires headers, let’s go over how to format this type of header.

Expires Headers Format

The expires header has two different formats. They are:

• ExpiresByType: Use this format to apply an expiration period to different file types. The syntax of this header is ExpiresByType [file name] “access [time interval].”
• ExpiresDefault: Use this format to apply an expiration period to all site resources by default. The syntax of this header is ExpiresDefault “access [time interval].”

It’s best to set ExpiresByType headers for most of your site resources, including your HTML, CSS, JavaScript, and XML files and images and other media files. Then you can set an ExpiresDefault as a catch-all for the rest of your content. 

Images and media files typically have the longest expiration periods (usually about a year), while other files have shorter expiration periods (usually about a month).

Now let's walk through how to add expires headers to your WordPress site.

How to Add Expires Headers in WordPress

To add expires headers in WordPress, you can modify your server files, or use a plugin. The former is best for advanced users since making a mistake when modifying your server files can break something on your site. If you don’t have as much technical experience, then you’ll be better off using a plugin.

Add Expires Headers in WordPress Without A Plugin

The process for adding expires headers manually in WordPress depends on the server you use. Below we’ve outlined the steps for an Apache and Nginx server.

Add Expires Headers on an Apache Server

1. Connect to your server through your hosting panel or with an FTP client.

2. Navigate to public_html.

3. Find your .htaccess file. Note: This may require you to reveal hidden files.

Image Source

4. Open .htaccess in your hosting panel file editor, or download the file and open it in a code editor.

5. Add the following code snippet before the line #END WordPress:

 
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month”
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year”
ExpiresByType image/gif "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month”
ExpiresByType application/xhtml+xml "access 1 month""
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 4 days"
</IfModule>

Note that different file types have different expiration periods. You can change them and the ExpiresDefault header to best suit your content .

6. Save the file (and re-upload it via FTP if necessary).

Add Expires Headers on a Nginx Server

1. Open your configuration file (conf) in your server panel editor, or a code editor. Note: how you access and edit this file varies by host so you can reach out to your hosting provider for help accessing the file.

2. Add the following code snippet within the server block:

 
location ~* \.(jpeg|jpg|png|svg|gif)$ {
expires 365d;
}

This sets your image assets to expire after one year. To set different expiration periods for other file types, re-paste this code in the same section, substitute the file extension names, and insert a different time period. Here’s what you’d add to set your HTML, CSS, and JavaScript files to expire after 30 days:

 
location ~* \.(html|css|js)$ {
expires 30d;
}

3. After making these changes, save your conf file and restart Nginx.

Add Expires Headers in WordPress With A Plugin

If you’re not comfortable modifying your server files, then you can use a Wordpless plugin to enable expires headers on your site. While there are plenty of plugins available, caching plugins are an ideal option. This type of plugin lets you enable browser caching and expires headers in just a few clicks. Let’s walk through the process using W3 Total Cache.

1. Click Performance > Browser Cache.

2. Scroll to the General sub-box.

3. Check off the option “Set expires headers.”

Image Source

4. Now scroll down to the CSS & JS section, check the box next to “Set expires header” and enter your Expires header lifetime value in seconds. By default, this value is 31536000 seconds, or 365 days. You can change this as needed.

5. Repeat this step for the HTML & XML and Media & Other Files sections.

6. Click Save all settings.

Adding Expires Headers to Your WordPress Website

Expires headers can help you control how different file types are cached and served to your visitors. They can not only help improve load times for returning visitors but also ensure they’re only seeing fresh content. That’s why they’re important to website speed and the overall user experience.