Would you like to learn the reasons behind and the steps involved in adding expires headers in WordPress? You might have encountered this recommendation when you run speed test tools like GTMetrix on your website.
Expires headers improve website speed and performance by leveraging browser caching.
In this tutorial, we will explain how expires headers work and why they hold significance. Then, we will demonstrate two methods for adding expires headers to WordPress.
What Are the Expires Headers in WordPress? Why Are They Important?
To understand expires headers and how to add them to WordPress, you first need to understand a little about browser caching. Each website consists of static files that compose the web page, such as HTML, JavaScript, and CSS. These files do not change frequently, which means that if you requested the page yesterday and request it again today, the browser will download the same files each time.
If you stored those files on your browser when you requested them yesterday, they will be quickly loaded from your browser when you make today’s requests. As a result, your website’s loading time improves, and resource usage is reduced because the files are not loaded from the web server.
Caching speeds up the website by storing files in the browser cache, enabling faster retrieval on subsequent visits.
However, the browser cache cannot hold a website’s files (images, CSS, JavaScript, etc.) indefinitely. It requires instructions on when to discard outdated files and fetch updated versions.
Expires headers come into play in this scenario. They are rules that you set in the header section of your website, instructing the browser about the specific date when cached files should be discarded and fresh copies should be fetched.
How Cached Files Are Deleted
To delete a file from a browser’s storage, you must set an expiry date on it. This requires adding rules to the header, which instruct the browser when to discard old files and fetch new ones.
These rules, known as Expires Headers, are often manually added to web servers via the htaccess file. They instruct the browser to delete specific files and specify the date for deletion.
Some webmasters prefer to set Etag Headers instead of Expires headers. Etag Headers essentially perform a similar function, but for the purpose of this article, our focus will be on Expires headers.
We will consider two methods for setting expires headers: manual configuration and using a plugin.
Cached files should have a specific duration before they expire
There are no fixed rules for setting expiration times for web assets. The key is to assign shorter expiration times to frequently requested web assets. For instance, HTML files are a good example. Ideally, a 1-hour expiration time would be sufficient.
Assets with less frequent requests should have a longer expiration time. For instance, you can set a one-month expiration time for CSS, JavaScript, and your website logo, which are common examples.
How to Add Expires Header in WordPress (Two Methods)
In this section, we’ll demonstrate two ways to manually add expires headers in WordPress and how to utilize WordPress plugins for this purpose.
If you’re not comfortable with editing server files, we recommend using the plugin method to add expires headers in WordPress. This method eliminates the need for manual modification of your server configuration file.
Adding Expires Headers in WordPress Manually
Before proceeding, you need to determine whether your website is hosted on an Apache or Nginx web server. To obtain this information, you can contact your WordPress hosting provider’s support. Alternatively, there is a quick method to identify the server type.
Apache Web Server
To add expires headers in WordPress on Apache servers, you need to access the .htaccess file of your WordPress website.
You can access these files either through cPanel or FTP clients like FileZilla. For simplicity, let’s stick with cPanel.
To begin, log in to your cPanel account and locate the File Manager icon. After logging in, click on the File Manager icon.
Click to navigate to the root folder that contains your site files. Typically, this folder is named public_html.
The code snippet above specifies an expiration time of 1 year for images. Similarly, videos are also assigned an expiration time of 1 year. However, CSS and Javascript will be cleared from the cache and replaced every month.
The code snippet above sets an expiration time of 1 year for images. Similarly, videos also have an expiration time of 1 year. However, CSS and JavaScript will be cleared from the cache and replaced every month.
Of course, you can always change these time parameters, but exercise caution when making such changes.
For better efficiency, some webmasters further enhance performance by configuring what is known as Cache-control Headers.
Cache_control headers fulfill the same purpose as Expire headers by setting an expiration date for cached files.
The major difference between Cache-control header and Expires header is that cache control offers more detailed options since you can specify additional caching parameters along with the expiration time. Cache control is also considered more modern.
Using Nginx Web Server
Unlike Apache, Nginx server does not work with the .htaccess file. To set the expires header, you can add the following line of code to your server block.
For Content Delivery Network
If your website utilizes a content delivery network – or CDN for short – you will require a different approach for establishing expiration dates on cached files. The trick involves unsetting Etags from your CDN servers.
Utilize WordPress Caching Plugins to Add Expires Headers
Modifying WordPress through the .htaccess file is not always advisable, especially if you lack experience. Making mistakes in your edits can potentially break your website, which is definitely undesirable.
The good news is that a couple of WordPress plugins can accomplish the task. Here are a few options:
Leverage Browser Caching
Leverage Browser Caching, This plugin configures the expires and cache_control headers for your web server automatically. All you need to do is install and activate it.And it’s free!
W3 Total Cache
When it comes to browser caching, W3 Total Cache stands out as a plugin to reckon with for WordPress sites. It manages everything from caching to file compression, traffic management, website security, and much more.
It is also free.
WP Rocket
If you are considering upgrading to premium and have the budget for it, WP Rocket is the recommended choice. you can take advantage of a range of features offered by this plugin. These features include browser caching, gzip compression, lazy loading, and expires headers for your cached files.
And writing, copying, or pasting a single line of code is not necessary. So, if you’re ready to experience an awesome time with WordPress, feel free to download the plugin.
To get things started, let’s go to GTMetrix – an online website performance test tool – and analyze your website’s performance.
So, how does browser caching work?
When a web user visits your website’s homepage for the first time, their browser initiates an HTTP request to your web server. The request instructs the server to download the necessary images, JavaScript, and CSS files, along with other required file types for rendering the requested web page.
Since it’s the first visit, the browser will download and cache all resources. As you might expect, the entire request/download process will consume a significant amount of time.
However, upon subsequent visits, the process changes. The browser checks if the requested web page files are cached before requesting a download from the web server. If the files are cached, the browser serves them from its cache instead of the web server.
Doing so will help speed up your WordPress website as it eliminates the time spent downloading these files from the server. Additionally, it significantly reduces the load on your server, resulting in increased efficiency.
Conclusion
Leveraging browser caching is one of the ways you can optimize your website’s load speed. However, to see meaningful results, you must do it correctly.
In this article, we demonstrated how you can leverage browser caching by configuring cache_control and expires headers on your web server. You learned how to accomplish this by copying and pasting codes into the .htaccess file.
What’s more, you’ve seen a couple of plugins that you can use if you feel uncomfortable editing your .htaccess file.
We hope you found this article helpful. If it was useful to you, please consider sharing it.
