How to Add Expires Headers in WordPress

What are the expires headers in WordPress? Why are they important?

To understand expires headers and how to add them to WordPress, you first need to know a little about browser cache. Each website has static files that make up the web page, such as HTML, JavaScript, and CSS. These files do not change frequently, which means if you requested the page yesterday, and request it again today, the same files will be downloaded each time.

What if when you requested it yesterday, you stored those files on your browser. Then when you make today’s requests, those files will be quickly loaded from your browser and not from the web server, thus reducing resource usage and increasing the loading time with which pages are displayed.

That would be much faster, and that is what caching does.

However, browser cache can’t hold a website’s files (images, CSS, Javascript, etc.) forever – it needs to be told when to discard old ones and fetch fresh copies.

And this is where expires header comes into play. They are rules set in the header section of a website that tells the browser the specific date to discard cached files and fetch fresh copies.

In this article:

How Browser Caching Affects the Load Speed of a Website
Methods by which cached files are deleted
How long should cached files stay before they expire/are deleted?
Adding expires header in WordPress manually
How to Add Expires Header in WordPress: Using a Plugin
Conclusion

How Browser Caching Affects the Load Speed of a Website

To get things started, let’s head over to GTMetrix – an online website performance test tool – and run an analysis of your website.

You might see something that looks like this:

From the screenshot above, you could see GTMetrix suggesting that we leverage browser caching.

So, how does browser caching work?

When a web user hits the homepage of your website for the first time, his/her browser will make an HTTP request to your web server. The request will instruct the server to download the needed images, Javascripts, and CSS files, plus other file types needed to render the requested web page.

Since it’s the first visit, all resources will be downloaded and cached by the browser. As you might expect, the entire request/download process will take a significant amount of time.

However, upon subsequent visits, the process will change. Before making a download request to the web server, the browser will first check if the requested web page files have been cached. If they are cached, the browser will serve the files from its cache instead of the webserver.

Doing so will help speed up your WordPress website as zero time will be spent downloading these files from the server. In addition to that, the load on your server is greatly reduced, hence there’s more efficiency.

Methods by Which Cached Files are Deleted

For a file to be deleted from a browser’s storage, an expiry date needs to be set on it. To achieve this, rules need to be added to the header telling the browser the exact time to discard old files and fetch new ones.

These rules are known as Expires Header. Oftentimes, they are added manually to web servers via the htaccess file. It tells the browser the specific file to delete and the specific date to do so.

In place of Expires header, some webmasters prefer to set Etag Headers. Basically, they do nearly the same thing, but for this article, we will be focusing on Expires header.

There are a couple of ways to set expires headers, but we will be considering just two: manually and via a plugin.

How Long Should Cached Files Stay Before They Expire?

There are no set rules for that. The trick is, web assets that are requested more frequently should have a shorter expiration time. A good example is HTML files. Ideally, 1 hour will suffice.

Whereas assets that are requested less frequently should have a longer expiration time. CSS, Javascript, and your website logo are typical examples. These can be given an expiration time of 1 month.

For files that hardly ever change, such as images, the expiration time is usually set to 1 year.

How to Add Expires Headers in WordPress Manually

With that said, here’s how to set expires header on Apache and Nginx server

Apache Web Server

To add expires headers in WordPress on Apache servers, you will need to access your WordPress website htaccess file.

These files can either be accessed via the cPanel or an FTP program. For the sake of simplicity, we will stick with cPanel.

First, log into your cPanel account. After logging in, you will see a File Manager icon. Click on it.

Upon click, navigate to the section labeled public_html and double-click on it.

Here, you will find the .htaccess file. Right-click on this file and click Edit.

Then copy and paste the following lines of codes into it.

<IfModule mod_expires.c>

  ExpiresActive On
  # Images

  ExpiresByType image/jpeg "access plus 1 year"

  ExpiresByType image/gif "access plus 1 year"

  ExpiresByType image/png "access plus 1 year"

  ExpiresByType image/webp "access plus 1 year"

  ExpiresByType image/svg+xml "access plus 1 year"

  ExpiresByType image/x-icon "access plus 1 year"




  # Video

  ExpiresByType video/mp4 "access plus 1 year"

  ExpiresByType video/mpeg "access plus 1 year"




  # CSS, JavaScript

  ExpiresByType text/css "access plus 1 month"

  ExpiresByType text/javascript "access plus 1 month"

  ExpiresByType application/javascript "access plus 1 month"




  # Others

  ExpiresByType application/pdf "access plus 1 month"

  ExpiresByType application/x-shockwave-flash "access plus 1 month"

</IfModule>

From the code snippet above, you can see that images have been given an expiration time of 1 year. Likewise also videos. But for CSS and Javascript, they will be erased from the cache and replaced every month.

Of course, you can always change these time parameters but only do so with caution.

For better efficiency, some webmasters take things further by setting what is known as Cache-control Headers.

Cache_control headers serve the same purpose as Expire headers in that they also set an expiration date for cached files.

The major difference between Cache-control header and Expires header is that cache control is more detailed as you can specify other caching parameters in addition to when the cache should expire. It is also more modern.

Note that adding both to your server isn’t necessary as this might lead to redundancy.

If you would like to set cachecontrol headers to your server, add the following piece of code to the htaccess file.

# BEGIN Cache-Control Headers
<IfModule mod_expires.c>

  <IfModule mod_headers.c>

    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">

      Header append Cache-Control "public"  

    </filesMatch>

    <filesMatch "\.(css)$">

      Header append Cache-Control "public"

    </filesMatch>

    <filesMatch "\.(js)$">

      Header append Cache-Control "private"

  </filesMatch>

    <filesMatch "\.(x?html?|php)$">

      Header append Cache-Control "private, must-revalidate"

    </filesMatch>

  </IfModule>

</IfModule>

How to Add Expires Headers in WordPress When Using Nginx Web Server

Unlike Apache, Nginx server doesn’t work with .htaccess file. To set expires header on it, copy and paste the following line of code to your server block.

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {

 expires 30d;

 add_header Cache-Control "public, no-transform";

}

For Content Delivery Network

If your website runs on a content delivery network – or CDN for short – you will need a different approach to set expiration dates on cached files. The trick is to unset what are known as Etags from your CDN servers.

Doing so is quite simple. Just copy and paste the code snippet below to your htaccess file.

# Disable ETags

<IfModule mod_headers.c>

Header unset ETag

</IfModule>

FileETag None

How to Add Expiry Headers in WordPress: Using a Plugin

Making tweaks to WordPress via the .htaccess file is not always advisable, especially if you don’t have much experience. Mistakes in your edits can break your website, and that’s definitely what you wouldn’t want.

The good news is that there are a couple of WordPress plugins that can get the job done. Here are a few:

Leverage Browser Caching

This plugin automatically handles setting expires and cache_control headers to your web server. All you need to do is install and activate it. And it’s free!

W3 Total Cache

When it comes to browser caching, W3 total cache is a plugin to reckon with for WordPress sites. It does everything from caching to file compression, traffic management, website security, and lots more.

It is also free.

WP Rocket

If you would like to go premium and can afford to do so, WP rockets is the way to go. Starting at $49 per year, you can enjoy browser caching, gzip compression, lazy loading, expires headers on your cached files, etc.

And you don’t have to write, copy or paste a single line of code. So if you are ready to experience an awesome time with WordPress, go ahead and download the plugin.

How to Add Expires Headers WordPress – Conclusion

Leveraging browser caching is one of the ways to optimize your website’s load speed. But you have to do is right to see meaningful results.

In this article, we showed you how to leverage browser caching by setting cache_control and expires header to your web server. You got to learn how to do so by copying and pasting codes to the .htaccess file.

What’s more, you’ve seen a couple of plugins you could use if editing your .htaccess file feels uncomfortable.

We hope you found this article helpful. If you did, kindly share.

More Resources