256 Kilobytes

How to add expires headers

Articles in Server-Side | By Hash Brown


Expires headers are a great thing to add for all website owners, they speed up load times for your repeat users which is good for everyone.

765 views, 1 RAM, and 0 comments

If you're trying to make your website load faster one thing you're going to need to look at is browser caching.

What are expires headers?

Expires Headers will tell the browser if the file needs to be requested from the source and downloaded, or if can be fetched from the browsers cache. This reduces requests for your website as the user will already have those files in their browser cache so theres no need to download that particular file when loading your page.

This greatly increases the speed of your website for repeat visitors and reduces server load.

If you have run your website through a page speed tool such as Pingdom, Google Pagespeed or GT Metrix you will see that all of these recomend implementing expires headers for static content such as images.

How to Add Expires Headers

The easiest method to control your expires headers is through .htaccess

Step 1: Open or create a .htaccess

Before starting you should check if you already have a .htaccess file, if this is the case open it up. If you are not running a .htaccess file please create one. A .htaccess file is a dotfile, these are text based config files for unix systems.

Step 2: Work out what you want to cache

When writing an Expires Header you need to think about two things:

  1. What files/resources you want to cache
  2. How long you want to cache things for

Expires Headers work for repeat visitors and they are stored on the client side. Once downloaded and set you have very limited control over things.

This can be bad, for example if you run an ecom store and you cached all your product images for 1 month but you update all your product images users who cached the old version will not see the updated images until it expires.

Think closely about what you're doing with your static files and how they are used before just blanket caching everything. Once you have a plan move on to the next step.

Step 3: Write your expires headers rules

Once you have your list of resources you want to cache, lets write some rules.

Below is the complete block of code, below I will explain it.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

Our expires headers rules are placed in a <IfModule> directive. This simply tests if this module is available on your apache set up.

<IfModule mod_expires.c>
    #rules in here

If you know for a fact that it's available and activated, you don't need this but there are many hosts who turn this feature off as standard. It's good practice to keep it though, especially if playing around in staging enviroments which may not have cache activated.

Next up we have to turn on ExpiresActive, this makes it work.

ExpiresActive On

Next up we actually get to the rules. Rules are split into two main parts, first we specify the files we want to target and then we set how long the header rule should stand for.

ExpiresByType image/jpg "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"

Above is an example of many of the types of file you may want to cache.

ExpiresByType allows us to select types of files.
Next up we need the file type and encoding.
Finally in quotes we set the time from access. "access plus 1 month" will set the header to expire 1 month from when the file was first accessed by the user.

Again, think carefully about  what you're caching. Things like logos/favicons/icons might never change on your website, javascript files might change during updates and CSS might change very often depending on what you're doing.

Step 4: Set a default

It's worth considering to set a default catch all rule as well for files you don't specify.

This is done like so:

ExpiresDefault "access plus 2 days"

Step 5: Save/Upload your .htaccess

Finally either save your .htaccess file or upload it if you wern't using one before.

Expires Headers FAQ

How does Expires Headers work?

Expires Headers tell web browsers how long they should store certain files. These files are stored locally for your users so when users visit websites repeatedly and you have expires headers set up properly these files are going to load far quicker for your user and because theres no need to re-download them they reduce load and requests on your server.

Expires Headers are specifically for return users, they do not help users who visit your website first time round.

You can set these rules by type or by specific files.

How do I add expires headers to WordPress?

Follow the tutorial above and add the code to the WordPress default .htaccess at the bottom of the file. It will work in the exact same way.

You can do it also with a plugin, but you're an idiot if you do it this way. These plugins offer limited control over expiration times and will slow down your website and clog your WordPress database.

Users Who Have Downloaded More RAM:
August R. Garcia (2 years ago)
🐏 ⨉ 1
Posted by Hash Brown 2 years ago 🕓 Posted at 09 March, 2019 20:44 PM PST

Post a New Comment

Do you like having a good time?

Register an Account

You can also login to an existing account or reset your password. All use of this site is subject to the terms of service and privacy policy.

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account