How to add Expires Headers in WordPress – Ultimate Guide

Have you ever come across a recommendation that reads, “add expires headers”? If you have, then you aren’t alone. It’s one of the most common website performance-related recommendations that you’ll get when you start optimizing your site.

In this article, we will be going through a detailed tutorial on how to add expires headers to your WordPress website.

 

So, let’s get started.

How to: Add Expires Headers in WordPress using .htaccess?

Well, the expires headers tell the browsers how often they should request a cached file from the server and till they should grab the old cached file from the browser’s cache. The expires headers aren’t only the reduction in the downloads of the files but also helps browsers to reduce the least server requests to which a website can absorb because downloading the same file, again and again, gonna be wastage of precious load time.

So, the browser is responsible for communicating the webserver and download the required files in order to display the content on a webpage. For a first time visit, the browser would have to download all the files, so you got correct that expires headers don’t improve page speed but it is a way of reducing the server requests. Though, for the second time visit, the expires headers help you to decrease the page load time.

You add the expires headers manually as well as by using a caching plugin too. Here is what I want to show you that W3 Total Cache is the one that enables you to add expires headers automatically on one-click action.

Adding Expires Headers in WordPress

At first, you have to decide what files you update often, and also some files don’t get updated often. Here is a common list of file types that we realize so:

• images: jpg, gif, png
• favicon/ico
• javascript
• CSS

What are Expires Headers?

Expires headers tell the browsers what resource can be stored and fetched from the browser’s cache or the source itself. In effect, it’ll help your site load faster by being able to display certain elements from the cache and not having to get it from the server.

To make it work, the expires headers need to be set by the website owner. By doing so, the browser stores the resources locally for a given period of time set through expires headers.

For example, if you set expires headers on JPEG files, the browser will store all the JPEG files in its cache. This means a visitor can load the site faster as the browser has cached some resources related to the site.

By using expires headers, you will improve your site’s speed by reducing HTTP requests (the method used to communicate between the browser and a server) between your computer and the server.

Learning About Browser Caching

Browser caching enables the browser to cache to locally store resources improving site speed.

So, how does it work?

The browser sends a request to a server when you load a website. The server, in return, sends the necessary resources.

In the pursuit to load sites faster, browsers can use expires headers to identify which resources can be loaded locally from the browser cache.

Not sure, what we mean? Let’s see browser-caching in action.

GTMetrix is a website speed and performance optimization site. It shows you a detailed report of how your site loads.

As you can see, WPAstra’s main site utilizes browser caching. All of these are possible because of expires headers.

Browsing caching with the help of expires headers can lower website load time by reducing HTTP requests between your computer and the server.

How Expiration Headers Work With Browser Caching

The browser cache stores resources based on the rules in the expiration headers (another name for expires headers). These rules enforce how the resources are used when a browser loads a site.

So, basically, if a resource’s age isn’t expired, it’s loaded from the browser cache. If not, then your computer requests it from the server again.

But, what happens when a site is requested by a computer for the first time?

In that case, all the site’s resources are directly downloaded from the server.

From the second time onwards, the browser will check its cache for non-expired resources and utilize it to save bandwidth and time.

If you want to learn more about it technically, we have covered it below. However, if you aren’t interested, you can jump to the next section!

As you can see from the image, the browser first checks with the resource cache (browser cache).

The information is then sent from the server to the browser via HTTP headers. All you need to know about HTTP headers is that they are used to send additional information between your computer and the server.

Another important concept that makes all of these happen is Cache-Control.

With Cache-Control, you can define browser-caching policies that work on both server and client-side.

If you check the images above, you will see that the expiration time set in the HTTP header is done using Cache-Control.

In short, Cache-Control offers a better way to implement browser cache as it overcomes the browser-based cache.

For instance, it looks after the following.

• Resources that need to be cached
• Where to store the cache
• Maximum age after which the cache expires

Let’s see cache-control in action on wpastra.com.

If you’re curious to learn more, we recommend checking out the Cache-Control – HTTP guide on Mozilla MDN or read Google’s guide on it.

If you also want to learn more about caching and how it’s related to WordPress, check out our ultimate guide to WordPress caching post.

Why Expiration Headers are Important

Expiration headers are important for the following reasons

• It helps your site to load faster (after the first initial request)
• It helps your server to manage more requests at any given time.

Which Resources You Should Cache Using Expires Headers?

Expires headers are useful if you know which resources you need to cache. For any general blogging site, implementing expires headers is easy as the rules can be applied to a wide range of resources, including images, videos, and so on.

But, the challenge comes when you need to implement a complex site such as eCommerce.

In both cases, the goal is to reduce HTTP requests and not increase them.

So, which resources, do you need to cache? Let’s go through a couple of scenarios to get a better understanding.

Scenario 1: Setting resource expiration age too long

If you set the resource expiration age for a long time, then the resource will be served to the user without any change for that given time.

In this case, if you decide to make changes to the site within that given period, the user will still see older versions of the site until the resource expires.

This can be solved by defining expiration time based on the resource type. In general, try to avoid adding default time span to all the resources.

For instance, you shouldn’t cache an entire section of scripts, HTML, images or other forms of the resources.

Even if you decide to do so, you need to make sure you know the impact of the changes on your site.

Asking yourself questions such as, “Will all the pages on my site function properly if I cache X or Y resource?”, can help you to implement expires headers correctly.

Generally, it’s a good idea to add expires headers to static resources as they are changed the least.

Scenario 2: Running a functionally complex site such as an eCommerce site

If you’re running an eCommerce site, you should be wary of the issues that come with expiration headers.

Let’s go through an example below.

A user visits your eCommerce site and adds new items to the shopping cart. However, if the resources on your site are cached incorrectly, then previously added products by the user(from a previous session) will show up in the shopping cart instead of freshly added products.

The buyer can solve the problem by pressing CTRL + F5 (forces a cache refresh), but that would be too much to ask from the buyer. Also, it creates a bad user experience and will surely impact user retention and sales figures.

So, where does this leave us? As an eCommerce owner, you can decide to add expires headers to resources based on their impact on user experience. Your goal is to provide a seamless user experience without breaking the site.

If all of these seems a little too complicated and overwhelming, don’t worry, all you need to know is that expires headers tells your browser what to get from the cache, and what not to.

Your job is deciding what to and not to set. And we’ve got you covered on that, just read on.

Does Expires Headers Solve Slow Website Loading Time?

Not all sites are created equally and that changes how expires headers work.

For example, if you cache an eCommerce site improperly, you’re bound to get errors that directly affect the functionality of the site. It will also slow down the site.

For other generic sites, expires headers will improve website loading time by reducing HTTP requests.

In some cases, expires headers can slow down the site if not implemented correctly.

How to Add Expires Headers to Your WordPress Website

Excellent, if you made it this far, you deserve a cookie!

WordPress is a versatile content management system. This means it’s flexible and offers multiple ways to cope with a problem.

That’s why, in this section, we’re going to show you how to add expires headers manually to servers such as Apache Server, Nginx, and CDN Systems.

We will also show you how to add expires headers using plugins. (Yup, we know, this is mainly what you came to read.)

Adding Expires Headers Manually

Apache Server

One of the easiest ways to add expires headers to a WordPress site running on Apache server is to do it through the .htaccess file.

You can access it through two methods.

• cPanel
• FTP Client such as FileZilla

For the sake of simplicity, we’re going to use the first method. The method also applies to FTP clients if you know how to connect to your web server using it.

First, you need to login to your cPanel. If you’re using any popular hosting platform such as Bluehost or InMotionHosting, you should have an option as shown below.

Click on it, and you should be able to access the cPanel.

There, you will find the File Manager option.

From there, click on the File Manager and then proceed to click on the “public_html” folder.

Once you’re inside the folder, you need to search for .htaccess file. If you aren’t able to find it, then make sure that the hidden files are set to “show.”

Now, open the file by right-clicking it and “edit.”

Now, you need to add the following code to the file and save it.

<IfModule mod_expires.c>
ExpiresActive On
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"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

As you can see, we have added expires headers for different types of resources, including images, video, CSS, JavaScript, and others.

Does the code look complex? Don’t worry as all you need to do is copy-paste the code in the .htaccess file.

But, if you’re confident and know what the code does, then you can alter the code according to your requirements.

For an eCommerce site, you simply cannot put all the static files in one single folder and then apply the same expires headers rules.

The best approach is to create multiple folders and use .htaccess files in each of those folders to gain finer control.

Another way, you can improve browser-caching is to add Cache-Control.

To add Cache-Control, you need to add the following code in .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>

NGINX

NGINX works differently than the Apache server. That’s why you won’t be able to find the .htaccess file.

The reason behind it’s due to the core NGINX philosophy for performance. By eliminating the need for the .htaccess file, the server can access information faster.

If you want to read more about it, then check out this article here: Like Apache: .htaccess.

So, how do you add expires headers to NGINX?

To do so, you need to edit the main server block. Once you made the necessary edits, you need to reload NGINX for them to take effect.

Just copy the code as shown below and add it to the server block. This will set the expires headers in NGINX.

location ~* \.(jpg|jpeg|gif|png)$ { expires 365d; }
location ~* \.(pdf|css|html|js|swf)$ { expires 2d; }

Alternatively, you can also use the Cache-Control header. To do so, add the following line to the server block.

https://www.nginx.com/resources/wiki/start/topics/examples/likeapache-htaccess/

Restart the server for the Cache-Control header to take effect.

Frequently Asked Questions (FAQ)

Conclusion

It’s clear that expires headers improve website loading speed. Even though it’s not going to make considerable changes to your site’s speed — the technique is bound to enhance the user’s experience.

With that said, it’s essential to know how to implement expires headers correctly. If you do it wrong, it will slow your site down. This is especially true for more dynamic and functional sites such as eCommerce sites.

Moreover, most of the sites will do fine with the code-snippet that we shared in the article for expires headers.

If you’re still not sure what to do, then we suggest you use the comment section below and let us know! We’re here to help!