Set Your Expires Headers, Speed Up Your Website

Set Your Expires Headers, Speed Up Your Website

Posted by Rainey

Speeding up the load time of your website can reduce your bounce rate (percentage of visitors who enter the site and leave without viewing any other pages) and make you more favorable for search engines.  People judge websites quickly and the longer they have to wait, the more likely they are to bounce. One quick way to boost the speed of your site is to set the expires headers.

Expires headers is a rule in the Apache module mod_expires (documentation).  This rule is used to tell the browser whether it should request a file from the server or fetch it from the browser’s cache. This can greatly reduce the load from the server by reducing repeated downloads of the same file and reducing HTTP requests for the server. Setting up this rule is pretty straight forward and takes very little time.

The easiest and fastest way to accomplish this is to add the following code snippet to your .htaccess file. If you are running your site on Apache, which runs roughly 50% of the internet, you will find this file in the root directory of website file.

HEADS UP: Now, I have seen providers that have .htaccess files at lower levels than the directory that holds the website and you don’t need to mess with those.  I have also seen providers where there is no file.  In this case, you can create a blank text document, save it as .htaccess and use it to add your settings. You can easily test to see if hidden files are visible by create a blank .test file and uploading it to your server 🙂

Ok, now that you can edit your .htaccess file, here is the snippet you will need:

# BEGIN Expires Headers
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On

## Default Expires header

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
 ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>
# END Expires Headers

 

The #s are comment in the .htaccess file.  I like to surround my different rules with comments so I can easily tell where everything begins and ends. This basically turns the Expires on and tells the browser to use a cached version of any files matching extensions within the FilesMatch.  This is ok if you want to treat all files equally.  But, you may have a site where you change certain things more frequently.  In this case you may want to break the rules out separately for each file type, which looks something like this:

# BEGIN Expires Headers
<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On

# Default Expires
ExpiresDefault "access plus 1 month"

# Favicon
ExpiresByType image/x-icon "access plus 1 year”

# Images
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"

# Documents
ExpiresByType image/pdf "access plus 1 month"

# Flash/Video
ExpiresByType image/flv "access plus 1 month"
ExpiresByType image/swf "access plus 1 month"
ExpiresByType image/m4v "access plus 1 month"

# CSS
ExpiresByType text/css "access 1 month”

# Javascript
ExpiresByType application/javascript "access plus 1 month"

</IfModule>
# END Expires Headers

 

This offers more control over each piece of content. Well, that is about it.  If you have any other tips around this please feel free to share in the comments below.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - hosting, Tutorials
    Tagged | , , ,