Add Expires Headers in WordPress

Have you recently run your WordPress site through a performance test program and been informed that you need to “Add Expires headers” to it?

Expired headers allow you to take advantage of browser caching, which reduces the time it takes for your site to load. They’re also included in YSlow’s performance recommendations, which means they’ll affect your “score” in tools like GTmetrix.

We’ll go through what expired headers are and how they affect your site in this post. Then, using a few alternative approaches, we’ll teach you how to add expired headers in WordPress step by step.

But first, let’s take a detour to talk about another topic: browser caching.

Contents Table of Contents
What Is Browser Caching and How Does It Work?
What Are Expires Headers and What Do They Mean?
How to Test If Expires Headers Are Working in WordPress How to Fix “Add Expires Headers” in WordPress
How to Make External Scripts Have Expires Headers

What Is Browser Caching?

We must first expose you to the concept of browser caching before we can discuss expires headers. This is significant since expires headers assist you in controlling and implementing browser caching; therefore, if you don’t understand browser caching, you won’t be able to grasp expires headers.

Browser caching, in a nutshell, allows your site to tell a visitor’s browser to cache specific files on the visitor’s local computer and load those local files for subsequent visits instead of downloading them from your server on every page load.

Have you recently run your website through a performance test program and been informed that you need to ‘Add Expires headers?’ This article covers all you need to know.
TO TWEET, CLICK HERE
You can save bandwidth usage and speed up your site’s load times by eliminating the need to download the file each time.

Consider your website’s logo image as an example. Because your logo is the same on every page, forcing users’ browsers to re-download the identical logo file every time they visit doesn’t make sense. Instead, you might use browser caching to save that logo file on visitors’ local PCs. On their initial visit, a visitor would still need to download your logo image. However, the file would be loaded from their local browser cache for subsequent page views.

What Are Expires Headers?
Expires headers notify a visitor’s web browser whether to load a specific resource from the local browser cache (as mentioned above) or to download a new version from the web server.

It allows you to specify a time limit for the cached version of various file types before it “expires” and the browser must download it from the server again.

Consider the following scenario…

Let’s imagine you wish to manage how your site’s PNG image files are cached by the browser. If you set the Expires headers for PNG files to one month, a visitor’s browser will do the following:

For one month after the initial access/download, load the already-downloaded version from the cache.
After one month, re-download the file from the server.
Different Expires headers can be set for different file kinds, giving you fine-grained control over your site’s browser caching.

Cache-control vs. expired headers
While utilizing Expires headers to manage browser caching on WordPress is one option, it’s not the only one. There is also a mechanism known as cache control.

Cache control is a more recent method that allows for more flexibility in caching behavior management. As a result, many websites today use cache control, including Gregghosting with our custom Nginx configuration.

Expired headers, on the other hand, still provide all most sites want, making them a good choice for browser caching. You can use both, but in most cases, your cache-control headers will take precedence. If you’re going to use both, ensure sure they have the same time values.

Check out our tutorial on how to use browser caching in WordPress if you want to learn more about how to install cache control on WordPress.

How to Fix “Add Expires Headers” in WordPress?

Now let’s get down to business and show you how to configure expired headers in WordPress.

But first, we have some excellent news to share. If you host with Gregghosting, you won’t have to bother about expired headers since we’ll take care of it for you. We pre-configure browser caching on both our servers and our integrated content delivery network (CDN), so you don’t have to.

You can add expired headers to your WordPress site if you’re hosting it somewhere else. You can achieve this with your own code snippet on the server level (Nginx or Apache) or with several simple WordPress plugins.

How to Use.htaccess to Add Expires Headers to an Apache Web Server
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 (the same folder that holds the wp-config.php file).

This is what you must do:

Use your favorite FTP client to connect to your server through FTP.
In the root folder, look for the.htaccess file.
Save a copy of the.htaccess file to your local computer as a backup. That way, if something goes wrong, you may restore your backup copy and correct any issues.
## EXPIRES HEADER CACHING ## ## IfModule mod expires.c> ## IfModule mod expires.c> ## IfModule mod expires.c> ## IfModule mod expires.c> ## IfModule mod expires.c> ##
Active On ExpiresOn ExpiresOn ExpiresOn Expires
image/jpg “access 1 year” ExpiresByType image/jpg “access 1 year”
image/jpeg “access 1 year” ExpiresByType image/jpeg
image/gif ExpiresByType “access 1 year”
image/png “access 1 year” ExpiresByType image/png “access 1 year”
image/svg “access 1 year” ExpiresByType image/svg “access 1 year”
Text/css “access 1 month” ExpiresByType
application/pdf “access 1 month” ExpiresByType
ExpiresByType application/javascript “access 1 month” ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month” ExpiresByType application/x-javascript “access 1 month”
application/x-shockwave-flash “access 1 month” ExpiresByType application/x-shockwave-flash “access 1 month”
image/x-icon ExpiresByType “access 1 year”
Default “access 2 days” expires
</IfModule>
## HEADER CACHING EXPIRES ##
While the default numbers should suffice for most sites, you can customize the time periods for different file kinds in the code snippet to meet your specific requirements.

How to Use a Configuration File to Add Expires Headers to a Nginx Web Server
If your host utilizes the Nginx web server, you can alter the server’s configuration file to adjust Expires headers. Your host will choose how you change this file; if you need assistance, contact your host’s support.

Gregghosting does use the Nginx web server, but keep in mind that we’ve already configured everything for you, so you won’t have to do anything.

This is the code you’ll need to use:

*.(jpg|jpeg|gif|png|svg) location

$ has a 365-day expiration date;

*.(pdf|css|html|js|swf) location

$ expires in 2 days;
You can change the expiration times for various file kinds as needed.

Now is the time to subscribe.
Using a WordPress Plugin, Add Expires Headers
If you don’t feel comfortable adding the expired headers code manually, you can use one of the many WordPress plugins available. Some of these plugins employ cache control, while others use expired headers. The end consequence is that browser caching can benefit your WordPress site in any case.

If your server hasn’t already installed caching for you, one option is to utilize a caching plugin. WP Rocket, which is totally interoperable with Gregghosting, is a wonderful solution here. There’s no need to change any extra settings after you activate the WP Rocket plugin because it immediately activates browser caching for you.

Other caching plugins that can aid in the implementation of expired headers and/or browser caching include:

W3 Total Cache WP Super Cache
WP’s Fastest Cache Is Crucial
Gregghosting doesn’t allow most of these plugins, with the exception of WP Rocket, because they contradict our built-in caching and performance improvements, however, they’re solid options if your site is hosted elsewhere.

If you currently have caching set up and are looking for a more specialized plugin, two options are:

Add Expires Headers to Browser Caching
The Leverage Browser Caching plugin requires no configuration; simply activate it and it will begin operating immediately.

You can control Expires headers for different file kinds with the Add Expires Headers plugin — you can do so from the new Add Expires Headers tab in your WordPress dashboard:

Using a plugin, add Expires headers to your WordPress site.
For different file kinds, you can set different expiration rules.

How to Test If Expired Headers Are Working?

You can utilize this free tool from GiftOfSpeed to see if your Expires headers are properly defined. The program will tell you two things after you enter your site’s URL:

Looking for Google Cloud Platform’s fastest servers for high-performance WordPress hosting? Take a look at our plans.

The time it takes for all of your site’s files to be cached.
The cache type (since you used Expires headers, it should say that, but depending on your site’s configuration, it could potentially say cache-control).
You can also run your site through any speed test tool you’re using (e.g. GTmetrix) to see if the “Add Expires headers” notice still appears.

How to Use Terminal to Test Expires Headers
If you prefer a more technical approach to testing expires headers, you may use Terminal to send a curl request to a static asset on your site and view the HTTP headers directly. You can use a curl request like the one below if your expires or cache-control rule includes CSS files.

-I curl https://Gregghosting life.com/wp-includes/css/dist/block-library/style.min.css
The curl request to the style.min.css file returns the following result in our example.

Date: Wed, 27 Jan 2021 01:11:05 GMT HTTP/2 200 server: nginx
content-length: 51433; content-type: text/css; charset=UTF-8
Tuesday, January 12th, 2021, 20:17:48 GMT
accept-encoding etag: “5ffe03ec-c8e9” vary: accept-encoding etag: “5ffe03ec-c8e9”
expires at 23:55:55 GMT on December 31, 2037
max-age=315360000 cache-control
accept-ranges: bytes x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63 access-control-allow-origin:
The response includes expires and cache-control headers, as you can see. The cache-control header, in particular, has a max-age of 315360000 seconds, indicating a one-year expiration time.

How to Make External Scripts Have Expires Headers
You can control the expired headers for all of the files on your WordPress site’s server using the ways we showed you above. Those approaches, however, do not allow you to modify the expired headers for any third-party scripts you may be loading, such as Google Fonts, Google Analytics, and so on.

As a result, even if you’ve already added Expires headers using the methods above, some performance test tools may still identify this as a potential issue.

Here are some solutions for common third-party scripts…

How to Use Google Fonts with Expires Headers
For custom fonts, many WordPress sites use Google Fonts. This usually entails downloading fonts from Google’s CDN, which means you won’t be able to specify Expires headers through your server’s setup.

Instead of relying on Google’s CDN, one simple fix is to host the font files locally. To do so, go to WordPress.org and install the free Optimize My Google Fonts (OMGF) plugin.

To understand more about the advantages and disadvantages of this technique, see our complete guide to locally hosting fonts in WordPress.

How to Add Expires Headers to Google Analytics
If you’re having problems with browser caching and Google Analytics, you can try hosting the Google Analytics script locally, exactly like we did with Google Fonts.

Here are a few WordPress plugins that make it simple to do so:

With its included Google Tracking add-on, CAOS (Complete Analytics Optimization Suite) outperforms WP Rocket.
What can you do to enhance your site’s load speeds while also improving your GTmetrix score? Expires headers is the answer. More information can be found here.
TO TWEET, CLICK HERE

Summary

To summarize, expired headers allow you to manage the behavior of browser caching for various file kinds on your WordPress site.

Many websites now employ cache-control headers rather than Expires headers because cache-control is a more current choice with greater flexibility. Most sites, however, can still utilize expired headers, and you can use both expired headers and cache control at the same time.

Furthermore, if you don’t use expired headers, some performance test programs will lower your site’s score, which may be your primary motive for implementing this strategy.

You won’t have to worry about expired headers if you host your WordPress site with Gregghosting since we’ll take care of it. If your site is hosted somewhere else, you can use the code snippets we gave or one of the plugins we recommended to add expired headers to WordPress.

Save time, and money, and improve site performance by using:

Expert WordPress hosting assistance is available 24 hours a day, 7 days a week.
Integration with Cloudflare Enterprise.
With 29 data centers across the world, we can reach a global audience.
With our built-in Application Performance Monitoring, you can improve your performance.
All of this and more is included in a single plan that includes no long-term obligations, aided migrations, and a 30-day money-back guarantee. Check out our plans or speak with a sales representative to find the ideal plan for you.