Expired headers are rules that allow web browsers to determine whether to pull up a web page resource such as images stored in a visitor’s browser cache or from the server. This help improves the performance of your site.
In June of 2021, Google began to roll out an algorithm update that aims to improve users’ online experience by providing a better-quality search result listing first. The algorithm considered several different page performance indicators, including Google Core Web Vitals.
What Is Browser Caching?
Before discussing expires headers, we first need to introduce you to the concept of browser caching. This helps prevent browsers from caching information on your hard drive, and without it, you can understand expires headers.
What Are Expires Headers?
Browsers can store web links to local resources (see the section regarding cached content) until the headers expire. They allow you to call a setting, which specifies how long the cached version of a particular file type should last before the browser needs to download it from the web server.
When you visit a site hosted on that domain, the site owner has to set the expires headers for the site before it functions.
How to Add Expires Headers to Your WordPress Website
WordPress is a flexible content management system. It means that it s flexible and offers multiple methods to resolve a problem. Our site will show you how you can add expires headers manually to servers such as Apache, Nginx, and a CDN System.
Adding Expires Headers Manually
The easiest method to add expires headers to a site running on an Apache server is by using the .htaccess file.
You can do it through two methods.
- cPanel
- FTP Client such as FileZilla.
How to Add Expires Headers With .htaccess on Apache Web Server
- First, you need to login into your cPanel. If you’re using any popular hosting platform you should have an option.
- Go to 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 the .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.
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES HEADER CACHING ##How to Add Expires Headers With config File on Nginx Web Server
Edit your Nginx server configuration file if your web host supports the Nginx web server. The file editing procedure vary depending on the web hosting service provider, so get in touch with the company s technical support if you need help.
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}How to Add Expires Headers in WordPress (CDN systems)
If you want to utilize CDN systems like Cloudflare to deliver content, then you’ll need to develop multiple expiration dates for your sources. To avoid this, it’s best to unset your ETags from the CDN system. To carry out this, add the following code to your .htaccess file.
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag NoneHow to Add Expires Headers With a WordPress Plugin
Using Expires Headers plug-in requires a certain level of technical experience, but for those who are not proficient with technical sophistication or in a hurry, there are plugins available.
If you don’t want to add the expires headers code yourself, you can find WordPress plugins that can perform the task for you. Many of these plugins have expires headers, while others use caching. Either way, all that’s necessary is that your WordPress website can take advantage of browser caching.
Add one Plugin From these five plugins
- WP Super Cache
- W3 Total Cache
- WP Rocket
- WP Fastest Cache
- Hummingbird
Find in WordPress plugin Section and active add Expires headers.
How to Test If Expires Headers Are Working
If you have much of a site to find out whether your Expires headers are set up successfully, you can use this tool from GTmetrix free of charge. After entering your site’s URL, the tool will tell you two things: whether headers are configured correctly and whether you need to update them.
Conclusion
Adding expires headers in WordPress is a great way to optimize your website’s loading speed. It is done by creating a .htaccess file and adding the necessary code. Additionally, you can use plugins such as W3 Total Cache to do it for you with minimal effort. It’s important to note that expires headers can be used with all types of files, not just images. Make sure to remember this when setting up your expires headers.
Expires headers are part of the HTTP header returned by the server when a user requests a specific resource. They contain an expiration date, instructing the browser to cache the resource locally. When the user visits the same page again, the browser can retrieve the resource from its cache instead of re-downloading it from the server, leading to faster load times.
Yes, you can use both expires headers and Cache-Control directives to set caching policies for your resources. However, if both are set, Cache-Control takes precedence.
Adding expires headers only affects the caching of static resources. When you update your website’s content, such as blog posts or product pages, those changes will be reflected immediately, as they are considered dynamic content.