Introducing | Kaon — Creative Website Builder for WordPress & WooCommerce

Home How to Add Expires Headers in WordPress? (Two approaches)

How to Add Expires Headers in WordPress? (Two approaches)

Want to speed up your website? Learn how to add expires headers either with a plugin or by adding code.
How to Add Expires Headers in WordPress_(Two approaches)
Want to speed up your website? Learn how to add expires headers either with a plugin or by adding code.

How to Add Expires Headers in WordPress? (Two approaches)

It is almost imperative that you’ve come across a recommendation that says “Add Expires Headers” while testing your website for speed performance. In this article, we will be going through the two best methods, to add expires headers to your WordPress website. 

Expires headers will help you leverage browser caching, which speeds up your site’s loading time. Expires headers are rules that notify web browsers whether to load a web page resource like images from the visitor’s web browser cache or from your server.

Beyond that, you can also see the add expires headers notification as a part of the YSlow performance recommendations, which is an excellent tool to measure your site’s speed and performance. Ultimately, expires headers will affect your performance score on GTMetrix as well. 

In this post, you will first get familiarized with the concepts like browser caching and what expires headers are, as well as the best methods to add them to your WordPress website.

What is Browser Caching?

First things first, let’s understand what browser caching is. The reason for this is because expires headers help you control and implement browser caching. Ultimately, you cannot understand expires headers without first understanding browser caching. The browser cache is a system for optimizing the web and it’s implemented on both the client and server’s sides. When you visit a website, your browser takes pieces of the page and stores them on your computer’s hard drive. Some of the assets that browser cache stores are:

  • Images – logos, pictures, backgrounds, etc.
  • HTML
  • CSS
  • JavaScript

To summarize, browser cache stores what are usually known as “static assets”, which are parts of the website that do not change, like for example the logo of a website. The browser cache saves certain files on the visitor’s local computer and loads those local files if they visit your website subsequently, rather than downloading from your server on every page load.

Browser Caching

If the server doesn’t have to download these files every time a user visits your website, it will significantly decrease the loading time, thus making your website increase its performance. 

The web server collects information from the website and passes it to the web browser. The caching is done whether the user has visited the website before or not. If it’s the first time, the server will download the files and store them, next time they visit your site, they will be served with cached versions of those files.

What are Expires Headers?

We’ve discussed browser caching in the latter section, and how each time a visitor visits your website for the first time, all of the files are loaded and downloaded only by one. All these requests between the browser and your hosting provider increase the loading time. 

Now we solve the other part of the puzzle, while browser caching stores these files, expires headers set out the rules as to which files and for how long will the browser cache. If you add expires header you will control your site’s browser cache.

Expires headers let you tell a visitor’s web browser whether it should load a given resource from the local browser cache or whether it needs to download a new version of the web page. You can set the duration for the cached version of different file types. 

Once the time you’ve specified has expired, the browser will download it from the server again. The rules about which files to save and how long to save them are set using either expires headers or cache-control headers. Let’s use an example to help you better understand it. If you set expires headers for your site’s logo equal to one month, there are two possible outcomes from the visitor’s browser

  • The visitor’s browser will load the version that’s already downloaded and cached for one month after the initial download
  • And it will re-download the file from the server after one month.

You can set different expires headers for various file types, which gives you granular control over your site’s browsing cache. We will be showing you how to add expires headers to your WordPress website using two different approaches. 

We will first show you how to add expires headers in a WordPress website using the help of a plugin, and by adding code. The first approach is the simplest and easiest, especially for beginners.

How to Add Expires Headers in WordPress with a Plugin?

We will first begin our tutorial on how to add expires headers using a WordPress plugin. This is the simplest and easiest approach, especially for novices. It’s as simple as configuration a single setting and then have the plugin do all the work instead.

You will never get your hands dirty with code whatsoever. Our first selection is WP Rocket which is a powerful and handy caching WordPress plugin to help you increase your site’s performance. 

Although WP Rocket is a premium plugin, you can find all the best features at their lowest plan. You can use WP Rocket as a two-in-one plugin for both caching your website and adding expires headers.

WP Rocket Caching plugin and add expires headers 1

The first thing you should do is install and activate the plugin from the WordPress dashboard. Once you have the plugin installed and activated WP Rocket will automatically turn on browser caching. By default, the plugin will add expires headers and cache-control headers with the best settings to speed up your WordPress site.

If you have caching sorted out and you are on the lookout for a targeted expires headers WordPress plugin, then the best free choice, in this case, will be Add Expires Headers & Optimized Minify. This plugin will allow you to configure the settings and control Expires Headers for different file types. 

To begin with Add Expires Headers, you will first need to search for this free plugin in the WordPress repository, install and download it. Once you’ve activated the plugin, you can find the configuration settings under WordPress Dashboard > Add Expires Headers.

Add Expires Headers in WordPress website with plugin 1

Here you have all the different file types that you can configure. You can tick next to the file and then choose the expiration time. Once you are done with all the configurations, make sure to save the changes.

How to Add Expires Headers in WordPress with Code?

The second method to add expires headers in WordPress involves adding code to your WordPress files. This requires the user to have some basic coding skills, thus we do not recommend using this approach for beginners, as a simple mistake on the code can do harm or cause errors on your website.

Before you begin making changes to your site’s core files and code, we recommend you take a full backup of your website just to stay on the safe side, and if anything happens, you can always go back to the last backup of your website. Without further ado, let’s take a closer look at how to add expires headers to your WordPress website using code.

How to Determine if your Website is Running in Apache or Nginx

To begin adding expires headers on your WordPress website you will first need to determine whether your website is running on Apache or Nginx servers. To do that head over to your WordPress website, right-click with your mouse, and click on Inspect.
Inspect your WordPress website
Next, you need to click the ‘Network’ tab at the top of the page. You may need to refresh the page for the results to load.
Click on Network
After you’ve found the Network tab, click your domain name at the top of the ‘Name’ column. Next up, scroll down to the “Response Header” section and make sure to check for the “server” unit.
Find the server that your site in running on
This item will show you on what server is your website running thus it will determine the next steps on adding expires headers to your WordPress website via code. Now that you know what server your site is running on, follow our respective guides below.

How to Add Expires Headers in Apache

Let’s start with the Apache server, to add expires headers to an Apache server, you need to add code to your .htaccess file. To gain access to this file and edit it, you will need to log in to your hosting account or via FTP or your host’s file manager tool. Next, you will need to locate the .htaccess file in the root folder.
Locate the .htaccess file and add expires header in WordPress
Once you’ve located the .htaccess file you are ready for the next step which is to add expires headers to turn on browser caching. This process will tell the browser how long it should store your website resources before they are deleted. Copy the following code and paste it onto the .htaccess file, make sure to include it at the top of the file.

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

The values presented will work perfectly fine for most of the websites, yet you can adjust them as per your desire, you can adjust the periods for different file types in the code snippet according to your needs. Note that the code sets different cache expiration dates for various file types because some files are usually cached longer than others.

How to Add Expires Headers in Nginx

If your website is running on Nginx servers, then you can control and add expires headers on your WordPress website by simply tweaking your server’s configuration file. 

The process of editing this configuration file completely depends on your host, and in order to do that you must contact your hosting provider and ask them for further information and give you access to the file. After you’ve gained access to the configuration file you will need to add the following code

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

	location ~*  \.(pdf|css|html|js|swf)$ {
		expires 2d;
The code above will set the expiration times for the different file types. Note that the code sets different cache expiration dates for various file types because some files are usually cached longer than others. You can adjust the expiration times for different types of files as needed.

Final Thoughts

This is where we conclude our article, and we hope that at the end of this article you’ve collected all the valuable knowledge on how to add expires headers to your WordPress website to help you control browser caching and increase the performance of your site. Using expires headers will help you speed up your website, and perform better on speed test tools.

Using the plugin approach is the simplest and the easiest way out to add expires headers on your WordPress website as everything is done automatically, or if you use a niche elated plugin, you can visually set the expiration time for each file type and have them be applied on your website without adding code whatsoever.

Whereas if you want to do it all manually, you will ultimately have to get your hand dirty with code, the first step will be to establish on what server is your website running, whether that be on Apache or Nginx, and then follow their respective approaches.

By Snowy Smith

Director of product design, Freehand

Introducing Kaon WordPress Theme