How to Add Expires Headers in WordPress

Adding expires headers to your WordPress website will tell the browser to cache files and serve them directly from the browser instead of making a request to the server. In expires headers, we define a period of time that the browser can cache certain types of files and serve them. This will greatly improve the performance of your website because every time a repeated visitor makes a request, the files cached in the browser will be served, leaving the web server alone. So many page speed test tools will show you a recommendation as “Add Expires Headers” to encourage you to optimize your website. So here is how you can add it.

What is Expires Headers?

Expires headers are a way for the Web Server to tell browsers how long it should cache a certain resource such as a CSS, JavaScript, or Font file. This functionality greatly improves the repeated visit performance of your WordPress website. So it should be used on almost all of your resources that can be cached by web browsers.

Using expires headers, we can define how long the browsers should serve the cached content from its storage without making a request to the web server. This can potentially help to save server resources and also, serve the content with blazing-fast speed. Expires headers are a great way to leverage browser caching to its fullest potential.

This is an example of an expires header –

Expires: Thu, 31 Dec 2023 23:59:59 GMT

In this case, the Expires header is set to December 31, 2023, at 23:59:59 GMT. It indicates that the resource will be considered valid and can be cached by the browser until the specified expiration date and time.

How to add Expires Headers in Apache

To add expires headers on Apache, add these lines to your .htaccess file placed in your WordPress root folder.

<IfModule mod_expires.c>
  ExpiresActive On
  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

How to add Expires Headers in NGINX

If you are running an NGINX server, add the following in your site configuration file.

location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ {
expires 365d;
}
location ~* \.(pdf|html|swf)$ {
expires 90d;
}

Be sure to restart your web server to see the changes. Re-run the tests, and you should see the add expires header recommendation is gone.

You can change the expiry period to something else as per your requirements. But be always sure that you don’t set it for too long or too low. Always research before making changes to your expires headers, or generally, anything that goes inside your server configuration files.

The “Add Expires Headers” Error

When you run page speed tests using certain tools, you might get the “add expires headers” error in the recommendations. This is an indication that the expires headers are missing from your resources. Applying the above methods will eradicate this error, giving you better page speed scores.

Recommended Expires Headers for different resource types