Use Expires Headers and Visitors Will Help You Speed Up Your Site

Your site’s speed matters. We all know that the slower a site loads, the more people click away. But in recent years it’s gotten even more important to make sure people don’t have to wait for your site with Google saying that site speed impacts search rankings. Translation: not only will slower speeds annoy your current visitors, they might keep new people from finding you as you slip down the ranks.

Because of this, you need to do everything you can to optimize your site’s speed. One great, little-known way to do this is by using expires headers.

[m2leep]

What Expires Headers Are and What They Do

What exactly are expires headers? They’re script commands that you can build into you site that allow you to save specific resources from your site to the browser caches of visitors. These commands can be set to continue indefinitely or to expire after a certain time period (hence the name expires headers).

Why would you want to set these headers? Because having visitors’ browsers save and “remember” parts of your site means that the next time they pay you a visit those resources will be loading from their browser instead of your server. That means not just fewer taxing downloads, but also fewer http requests in general.

To be even more explicit, when your website is being loaded from multiple places at once, it will show up faster for users and put less stress on your system by taking up less bandwidth. That can mean lower costs for you and a better overall experience for your visitors since they can do what they came there for without having to twiddle their thumbs or tap their feet. Perhaps just as good, it can help with search engine optimization because faster load times mean more love from Google and a potentially higher page rank.
[adsense]

Resources to Use Expires Headers On

So, what kind of resources can expires headers be used on? All kinds. Everything from pictures to Javascript to CSS can be attached to an expires header and pulled from the browser’s cache instead of the source.

But just because you can do it doesn’t mean that you should. Expires headers are best to use on resources that generally stay the same. Otherwise, visitors may end up looking at a version of your website that doesn’t include the most up-to-date information. No one wants that.

What kinds of resources typically don’t change? Well, for example, there’s a good chance that you won’t be altering your company logo every other week. If so, you probably have bigger problems to worry about (unless you’re Google, of course). Because of this, setting an expires header for a logo is a no-brainer. Other things that tend to stay the same for a long time on a website include the colors and the text – at least on static pages.

But as you might imagine, most of the time text won’t be taking up a lot of bandwidth. That’s why a lot of people who use expires headers go well beyond those resources that will never change and also include things that change infrequently, but take more time to load due to their size. The flexibility of expires headers allows you to decide exactly how long these resources should continue being pulled from visitors’ caches as well as using the headers for individual files or entire file types.

Some of the best types of resources to use expires headers on include:

  • Images. Whether you have images in jpg, jpeg, png, gif format, or so on, the amount of memory they take to load adds up over time, and most sites rarely change existing ones.
  • Favicon. No one changes this, so why should you continue to have your visitors download it from the source?
  • Videos. Imagine visitors not having to download videos from the source but instead having them ready to go in their browser’s cache. Altering the way huge files like these are accessed can greatly reduce load times.
  • Javascript. Sites do alter their Javascript from time to time, but not nearly as much as something like CSS. Just make sure to set an expires header timeframe that you’re comfortable with.
  • CSS. Yes, CSS can be altered frequently, but that doesn’t mean you can’t use an expires header. The key with resources that are going to be changed more often is to set a shorter expiry deadline. Even if your expires header is only set for a week – or a day – it will benefit the people who come to your site the most.

 

Dangers in Incorrectly Setting up Expires Headers

Of course, using expires headers is not without danger. The first and most obvious issue that can arise is that visitors may not see some of the changes that you make to your website in a timely manner. You might think it’s no big deal if the change they’re missing is a new photo, but what if it’s a timed campaign or advertisement? This is why it’s so important to think carefully about your expiry deadlines and be vigilant whenever changes are made.

Besides keeping people from seeing an up-to-date site, expires headers can also cause problems for sites with shopping carts. If your headers are having visitors cache things like images, CSS, or html, it can lead to an issue where their shopping cart shows items that they purchased in the past, but not current ones.  This is where caching specific files instead of file types is useful, because you can use expires headers on resources that won’t be changing while having others load from the source.

 

How to Set Up Expires Headers on Your Site

Now that you know a bit more about expires headers, it’s time to learn how to implement them on your own site. This is a process that will differ slightly depending on the nature of your site, but the basics are largely the same:

  1. Divide and conquer. Look at all of your resource types and divide them up into those that never change and those that change more frequently. Those that never change can use the ExpiresDefault to save you time, but other files will require that you manually add in shorter expiry dates.
  2. Find your .htaccess file. In order to add expires headers, you’ll have to locate and open your .htaccess file. These aren’t in exactly the same place for every site, but in general you should go to your favorite FTP and look for it. Most often, you will need to click on something like Server à Force Showing Hidden Files to make it appear.
  3. Back up your .htaccess file. This isn’t a required step, but it should be. Before you make any changes, save a backup file of this in case you make a mistake. Why? Because this file essentially is your website. You don’t want to mess it up.
  4. Start editing. Now that you have a backup, open your .htaccess file in your text editor of choice and add this code for each individual resource:

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault “access plus 1 month”

# RESOURCE
ExpiresByType FILE CATEGORY/FILETYPE “access plus LENGTH

</IfModule>

 

The bolded words should be altered for each resource like so:

# favicon
ExpiresByType image/x-icon “access plus 1 month

# images
ExpiresByType image/jpg “access plus 1 year
ExpiresByType video/mp4 “access plus 6 months
ExpiresByType audio/ogg “access plus 1 year

# javascript
ExpiresByType application/javascript “access plus 6 months

 

All of the desired changes you wish to make should be added before the closing </IfModule>.
5. Copy and upload. Save your edited code, then copy it into your .htaccess file and upload it to your site through your FTP.

So there you have it. Using expires headers is a great way to improve the experience of your site for your visitors by making everything run more efficiently. Happier visitors make conversions more likely for you, which is the whole point of all of this.