How To Add Expires Headers In WordPress (2020)

How To Add Expires Headers In WordPress

If you’d like to make your WordPress site faster, you should add expires headers to your website.

But what are the expires headers?

Why are they such important?

And how to add them to your website?

The answers to all these questions are contained in this article. 🙂

 

What Are Expires Headers?

 

Before I explain to you what are expires headers, let me first write something about browser cache.

Each website contains some static files which are not updated too often. Some HTML, JS, and CSS files are the best examples of them.

But what does it mean for you as a user of the Internet?

It means that if your web browser requests these types of files today, it doesn’t have to (and even shouldn’t) download them again if you visit the same page within the next few days or weeks.

Those files should be just loaded from your web browser’s cache memory.

So what are the expires headers?

Expires headers are the set of rules (stored in your site’s configuration), which tell your visitors’ web browsers when to discard the previously cached files and fetch their new versions.

 

How Do Expires Headers Work?

 

Like I mentioned before, expires headers instruct your visitors’ web browsers when they should retrieve the newer versions of the files.

As everyone knows, each file has its own filetype.

The instructions contained in that set of rules are grouped by filetypes, and they define the expiration periods for each of them.

Before I show you how you can add expires headers to your WordPress site, let’s take a look at the score concerning the headers of my blog.

Add Expires Headers - GTmetrix - SiteGround - alivebetter.com

As you can see, there’s nothing to improve in this area on my blog. 🙂

And if you’d like to achieve such great results in GTmetrix and other speed tests as I did, here’s my complete guide on how you can do it.

 

How To Add Expires Headers Manually To .htaccess File (If You Use Apache Server)?

 

If you use SiteGround or any other Apache server (these days, almost everyone does), you can add expires headers to your website in one of two ways.

So here’s the first one:

1. Log into your WordPress dashboard.

2. Go to the WP File Manager plugin (you may need to install and activate it first if you haven’t done that yet).

Add Expires Headers to WordPress .htaccess File

3. Right-click .htaccess file and choose Code Editor from the menu.

4. Copy the following lines of code and paste them at the beginning of the .htaccess file.

# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
ExpiresByType text/html "access plus 0 seconds"

# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"

# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
ExpiresByType image/gif "access plus 4 months"
ExpiresByType image/png "access plus 4 months"
ExpiresByType image/jpeg "access plus 4 months"
ExpiresByType image/webp "access plus 4 months"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"

# Webfonts
ExpiresByType font/ttf "access plus 4 months"
ExpiresByType font/otf "access plus 4 months"
ExpiresByType font/woff "access plus 4 months"
ExpiresByType font/woff2 "access plus 4 months"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

How To Add Expires Headers In WordPress

5. Then, you just need to click Save & Close.

 

How To Add Expires Headers Automatically Using A WordPress Plugin?

 

Instead of editing your .htaccess file, you can also add expires headers to your WordPress site automatically.

Although other guides mention a few various plugins for this purpose, I can recommend you just one of them – WP Rocket.

Using this plugin, you’ll not only add expires headers to your site, but you’ll also speed up your website quite significantly.

More information about configuring this amazing caching plugin is available here.

And as it comes to the lines of code from the previous section of this article, it’s the code generated by the WP Rocket plugin.

So why would you do it manually in such a case?

 

How To Add Expires Headers If You Use Nginx Server?

 

If you host your site at the company based on Nginx only (such as Kinsta), you will add expires headers to your website using WP Rocket plugin.

 

Quick Summary

 

There are two ways of adding the expires headers to your WordPress site – manual and automatic.

In my opinion, it’s best to add them using WP Rocket.

If you choose this way, you’ll not only save your time and effort, but you’ll also speed up your site and satisfy GTmetrix, Google PageSpeed Insights, and other online speed testers.