How to add expires headers to your WordPress website
Have you ever come across a suggestion like “add expires headers”? You are not alone if you have. It’s one of the most typical website performance advice you’ll hear when you first start optimizing your site.
If you manage a WordPress website, you’re probably always looking for new methods to make your site faster. Adding expires headers is one such option.
Expires headers are rules that tell web browsers whether to load images from the visitor’s browser cache or your server. These can help your website run more smoothly. You can either add expires headers manually or with the help of a plugin.
This post will explain what expires headers are and how they affect your site. Also, we’ll show you step-by-step methods on how to add expires headers in WordPress.
Best outcome: your site has great opportunity for improvement, we optimize your performance so you don’t have to worry, and you earn more happy customers.
OR
You leave the call with a better understanding of your store’s metrics and exactly where you can improve.
Either way, it’s a great deal for you!
What Are Expires Headers Anyways?
To understand what are expires headers and how to use them in WordPress, you must first understand what is a browser cache. Coding like HTML, JavaScript, and CSS are examples of static files that make up a web page. Because these files don’t change very often, the identical files will be retrieved twice if you request the same page last week and request it again now.
What if you made a rule to let your browser know it’s the same file from last week? Then when you make today’s request, those files will be swiftly loaded from your browser rather than from the web server, decreasing resource use and increasing page loading times.
That would be significantly faster. This is what browser caching does. On the other hand, the browser cache can’t keep a website’s files (images, CSS, Javascript, and so on) indefinitely; it needs to be instructed when to delete old ones and request new ones.
This is where the expires header comes in. They are rules specified in a website’s header section that advises the browser when to discard the cached files and fetch new copies.
You can use a plugin or edit your server files to add expires headers. The former is best for advanced users since making a mistake when modifying your server files can break something on your site. A plugin is better if you don’t have a lot of technical knowledge.
How to Add Expires Headers.
PLUGIN
To enable expires headers on your site, you can use a WordPress plugin. While there are many plugins to choose from I am not going to get into ranking or rating them.
Just go to Plugins >> Add New and enter the keyword ‘cache’.
WordPress lists the plugins by popularity. Just pick one that will work great for you. I like Autoptimize and WP-Optimize the most because they are not as bulky as some of the other plugins out there.
Now go to the CSS & JS section and select the box next to the Set expires header, then input your Expires header lifespan value in seconds. By default, this number is set to 31536000 seconds or 365 days. This can be changed as needed.
Repeat the above step for the HTML & XML and Media & Other Files sections. Once done, click on Save all settings button.
APACHE EXPIRES HEADERS
If your site host utilizes the Apache web server, you can use the .htaccess file in the root folder of your server to add expires headers.
You can also edit the .htaccess file by connecting your server through your hosting panel with the help of an FTP or cPanel. For simplicity, we will use the cPanel to establish the connection.
First, you need to log in to your cPanel. Once the connection is established, navigate to File Manager and click on the public_html folder.
Once you’ve entered the folder, look for the .htaccess file. If you still can’t find it, make sure the hidden files option is set to show.
Now, add the following code and place it near the top of your .htaccess file to add expire headers. Don’t forget to save after adding the code.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/xhtml+xml "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"
</IfModule>
As you can see, the above code implements expires headers for various resource types, including images, video, CSS, JavaSCript, and more. The various file formats have varying expiration dates. You can customize these and the ExpiresDefault header to best suit your needs.
Add Expires Headers On A Nginx Server
NGINX is not the same as the Apache web server. That is why you will be unable to locate the .htaccess file. So, how do you include expires headers in NGINX?
You’ll need to edit your server’s configuration file. How you access and edit this file varies by the host – you can always reach out to your host’s support team for any assistance.
Next, add the following code snippet to your server block.
location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 3d;
}
You can adjust the expiration times for different types of files as per your need. Once you’ve made these changes, save your configuration file and restart Nginx.
Conclusion
Expires headers clearly enhance website loading performance. Even though it won’t significantly improve your site’s speed, the strategy will undoubtedly improve the user experience.
You can use expires headers to manage how different file types are cached and served to your visitors. They can help improve load times for regular visitors while also ensuring that they only view fresh content. That’s why they’re crucial to website performance and overall user satisfaction.
With that said, it’s important to understand how to implement expires headers properly. It will slow down your site if you do it incorrectly. This is particularly true for more dynamic and functioning sites, such as eCommerce sites. If you would like help with this just reach out to me