how to add expires headers to wordpress websites

How to Add Expires Headers to Your WordPress Website?

Are you currently working on optimizing your website? If yes, chances are you’ll come across a website performance-related recommendation that reads, “add expires headers.” 

There’s no doubt ‘expires headers’ are essential since they reduce website loading speed. That’s why it’s helpful to know how to add them to your WordPress website. 

This article is all about giving you an in-depth tutorial about adding expires headers to your WordPress website. Yet, before going on to explain what they are and their importance, you should know a little about browser cache.

What is browser cache? 

Static files like HTML, CSS, and JavaScript that make up a web page do not change frequently. Hence, a page you requested yesterday when requested again today, will require the same file to be also downloaded today. This can prove somewhat frustrating as there is increased resource usage and wastage of time each time you revisit the same page. 

Yet, there is good news! Through ‘caching’ (browser cache), you can reduce resource usage and increase the speed of displaying pages. You achieve this by storing on your browser – the previously downloaded files of a page you frequently visit. As a result, each subsequent request to revisit the courier will enable the files stored on your browser to get loaded from your browser instead of the webserver quickly. 

What is browser cache

To explain this visually, from the image below, you can see that the browser first checks with the browser cache (resource cache). Next, the server sends the information to the browser via HTTP headers. Remember, HTTP headers send additional information between the computer and the webserver.

Browser cache can’t store a website’s files permanently. It needs the website owner’s instruction on when to discard old files and keep fresh copies.

You guessed it right! This is where expires headers play an essential role. Expiration headers work with browser caching for better user experience.

What Are Expires Headers?    

Expires headers are rules set in the header section of a website, by the website owner, for the browser to precisely discard old files and when to fetch and store new copies.

As a result, your website will load faster by displaying some aspects from the cache instead of downloading them again from the server. Hence, setting expires headers enables the browser to store the resources locally for a given period.

Using expires headers allows you to improve your site’s speed. Speed reduction happens since HTTP (communication method between the browser and server) requests is reduced.  

What Makes Expires Headers Important?

 The following reasons summarize why expires headers are essential:

  • After the very first or initial request, your site will load faster each subsequent time.
  •  Your server becomes more efficient at managing multiple requests at a time.
  • The improvement in the website’s speed leads to certain advantages: 

It has enhanced user experience.

– Increase in average time spent and lowering the bounce rate.

Higher search engine ranking due to quicker page speed.

Reduction in bandwidth costs, as adding expires headers, results in an overall decrease in the number of times an image has to be requested from the server database.

How To Manually Add Expires Headers in WordPress

 Here’s how you can add expires headers in WordPress on Apache and Nginx servers, and in CDN:

1. Apache Web Server

To add expires headers to a WordPress site run on an Apache server, you need to access your WordPress website .htaccess file.

You can access it through either of two methods:

  •  cPanel
  • FTP programs like ‘FileZilla’ and ‘Cyberduck.’

Now, for the sake of simplicity, let’s pick cPanel (note: steps for an FTP program are the same) and explain stepwise how we can add expires headers.

The steps:

  1. Log into your cPanel account
  2. Click on the “File Manager” icon
  3. Navigate to and double-click on the “public_html” folderwordpress add expires headers
  4. You will find the “.htaccess file” right-click on this file
  5. Click “Edit.”How to Add Expires Headers to Your WordPress Website
  6. Now copy and paste the following code into the file and save it:

<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>

It’s as simple as that. All you’re doing is copy-pasting the above code in the .htaccess file to add the expires headers for images, video, CSS, JavaScript, and other types of resources. In the above code, photos and videos are instructed to have an expiration time of 1 year. Yet, CSS and Javascript resources will be erased from the cache and replaced every month.

Once you understand this code and its capability, you can tweak it per your specific requirements.

In an eCommerce site, putting all the static files in one single folder and applying the above steps/rules won’t work. Instead, it’s recommended you create multiple folders, with each having .htaccess files.

Now let’s look at another method by which you can improve efficiency through browser-caching – setting ‘Cache Control’ headers. Though they serve the same purpose as expires headers, the significant difference between them is that Cache-Control is more detailed by letting you specify caching parameters other than when the cache should expire.

For setting Cache-Control headers, copy and paste the following code into the ‘.htaccess file’:

# BEGIN Cache-Control Headers

<IfModule mod_expires.c>

  <IfModule mod_headers.c>

    <filesMatch “\.(ico|jpe?g|png|gif|swf)$”>

      Header append Cache-Control “public”  

    </filesMatch>

    <filesMatch “\.(css)$”>

      Header append Cache-Control “public”

    </filesMatch>

    <filesMatch “\.(js)$”>

      Header append Cache-Control “private”

  </filesMatch>

    <filesMatch “\.(x?html?|php)$”>

      Header append Cache-Control “private, must-revalidate”

    </filesMatch>

  </IfModule>

</IfModule>

2. NGINX

NGINX works differently from the Apache server. You can’t expect to find the .htaccess file in an NGINX server, since the core philosophy for performance is different in this server. As a result, it accesses information even faster by having eliminated the need for the .htaccess file.

To add expires headers to NGINX, you need to copy and paste the following passage of code to the server block:

location ~* \.(jpg|jpeg|gif|png)$ {

   expires 365d;

}

location ~* \.(pdf|css|html|js|swf)$ {

   expires 2d;

}

3. Content Delivery Network Systems

If you’re using CDN (content delivery network) to run your website, then you’ll have to use a different approach for setting expiration dates for your cached resources. To do the trick, unset ETags from the CDN server by copy and pasting the following line of code in your .htaccess file:

# Disable ETags

<IfModule mod_headers.c>

Header unset ETa

</IfModule>

FileETag None

How To Add Expires Headers Using Plugins

You may choose to add expires headers to your WordPress website using any of the many plugins available. Using plugins is helpful if you are not experienced and comfortable making tweaks to WordPress via the .htaccess file.

Here are a few of the great plugins you can use and the steps involved in implementing each:

1. WP Rocket

This plugin is a great choice when it comes to adding expires headers to your WordPress website. In just a few clicks, your site will begin to load faster. You buy the plugin and then install it so that the .htaccess file can be easily modified using the required rules. You pay the plugin’s price, yet it’s worth it as you don’t have to write, copy, and paste any coding.

2. Hummingbird

What better than a free-to-use plugin from WordPress to optimize your website’s speed! Hummingbird is free-to-use, installed following a few easy steps, and comes with great caching options.

Here are the steps to install this plugin:

 1. Go to your WordPress site’s dashboard

2. Go to “Plugins”>> “Add New.”

3. Type “Hummingbird” in the search option (at the top right).

4. Click on “Install Now” to install it.

How To Add Expires Headers Using Plugins

5. After installation, activate the plugin by locating it on the WordPress dashboard menu:

              a. Click on it

              b. Select “Dashboard”

              c. Now select “Caching.”

6. Out of the four visible options, click on “browser caching” and proceed further.

HOW TO INCRERASE PAGE SPEED

7. Look for the Hummingbird browser caching status at the top.

8. Scroll down to configure browser cache

9. Choose the server type among multiple options like Apache, NGINX, and Cloudflare, etc.

add expires headers wordpress

10. Set an expiry time for all individual file types, or use the manual option (whereby code is generated based on user preference).

11. Click on “Activate” to enable browser caching using expires headers.

3. Leverage Browser Caching

This is another great plugin, and it’s free! Just install it and activate it, and you’re ready to take care of expires headers without further delay.

4. W3 Total Cache

W3 Total Cache is another excellent cache expiration plugin for WordPress sites. With it, you can do several tasks besides adding expires headers to our .htaccess file. The other functions include caching, file compression, traffic management, website security management, and more. On top of all that, it’s free!

Final Thoughts

Whether you add expires headers manually or via one of the many available plugins, the result will be your WordPress website loading way faster than before.

However, it’s essential to know how to set the effectively expires headers, especially when you’re doing it for your eCommerce sites.

The lines of code we’ve mentioned work on most WordPress sites and the few plugins we’ve cited are equally worthy of getting the job done.

Leave a Comment

Your email address will not be published. Required fields are marked *