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.
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.
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.
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
How to Add Expires Headers in Apache
## EXPIRES HEADER CACHING ##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" ## EXPIRES HEADER CACHING ##
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;
}
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.
