Expires Headers can help improve the load times on your website by telling the browser when it should request the server for a file or download it from the browser’s cache.
If you have browser caching set up on your website then when someone visits your website certain files are saved in their browser’s cache so they don’t have to be loaded every time they visit the site or a different page on your site.
For example, your logo in the header of your website only needs to be downloaded from the server once and then every time someone visits your website or a different page on your website the logo image is pulled from their cache instead of downloading from the server every time.
Expires Headers is a set of instructions that tells the browser how long to wait until it tries to download the file again.
You can set Expires Headers for individual files or file types in general and the idea is to set really large amounts of time for files that don’t change often such as your site’s logo and short amounts of time for files that change regularly like your blog page or home listings.
Please note however that Expires Headers won’t reduce site load time for first-time vistors. The files need to be downloaded and cached first so that future return visits to your site will be much faster.
How to Add Expires Headers to Your Website
You can add Expires Headers to your site by adding a few lines of code to your website’s .htaccess file. The .htaccess is a hidden configuration file that’s used by servers running Apache Web Server software.
You probably shouldn’t make changes to this file unless you know what you’re doing and it’s not easy to access unless you know how to find it.
The .htaccess file is stored on the root directory of your website and is usually hidden. If you connect to your website’s root directory using an FTP client you can find it. If you don’t see it there you just have to turn on the option to show hidden files.
You can then download and edit this file with a program like Notepad or pretty much any simple text editor.
If your website is built using WordPress and you have the Yoast SEO plugin installed there’s a much easier way to access this file.
In your WordPress dashboard navigate to SEO > Tools and click on File Editor.
You’ll be on a screen where you can edit both your robots.txt and .htaccess file.
Before you make any changes to the .htaccess file you should definitely be sure to back it up!
Adding the Code for Expires Headers
The code for Expires Headers is pretty simple.
At the bottom of your .htaccess file, below the code that’s already there copy and paste the following:
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 month" </IfModule>
This is the basic code for Expires Headers.
Next decide what you want to cache and for how long. To cache specific file types such as images add this code right above the </IfModule>:
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"
This code will cache any gif, png, jpg or jpeg image files for one month and after one year they’ll be downloaded again.
You can set one year to how ever long you want. When entering the amount of time to cache something you can use the following units of time:
Files like images probably aren’t going to change at all so you can set these to a large amount of time like 1 year.
Your favicon is the little icon that appears in the address bar in the browser by the URL of your website. You’re probably not going to change this much if ever. To cache this file add the following code again right above the </IfModule>.
ExpiresByType image/x-icon "access plus 1 year"
CSS files are files that contain the styling code for different elements on your website. These files control things like fonts, colors, etc. and probably don’t change too often.
To cache your CSS files add this code right above the </IfModule>.
ExpiresByType text/css "access plus 1 month"
One month is a good unit of time for your CSS files as these will probably get updated more often than your images.
If for some reason your website is still using Flash you can cache your Flash files as well. You shouldn’t be using Flash anymore as more and more browsers are dropping support for Flash and your website might not work correctly for certain users if it uses Flash.
To cache your Flash files add this code above the </IfModule>.
ExpiresByType application/x-shockwave-flash "access plus 1 month"
If you enter all these lines into your .htaccess file your final Expires Headers code should look like this:
We left out the line for Flash since your website shouldn’t be using Flash.
This block of text should be added at the bottom of the .htaccess after any code that might already be there and remember to be sure to back this file up before you make any changes.
If you screw something up with this file you might find that your website won’t load at all. If that happens you can just replace your edited .htaccess file with the backed up version and you’ll be ok.
If you have any questions about any of this feel free to ask in the comments.