Expires headers let your browser know whether to serve a cached version of the page and it's components or to download new versions of the files. By defining when a component of your site expires, you help to:

  • Reduce server load
  • Increase page load time

htaccess file

What are Expires Headers?

Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser's cache.

The whole idea behind Expires Headers is to reduce the number of times a file is downloaded from a server and allow the browser to utilize a previous version of a file that is already saved on your computer. Doing this reduces the number of HTTP requests for the server when someone returns to your website because you are able to reuse the previously download version of the same file.

Web pages have continued to grow in complexity with numerous files download on every page; HTML, CSS, JavaScripts, graphics, images, pdfs and even applications and sometimes up to 25+ items per page. When you visit a website for the first time in your browser, all of these files are requested from the server.  Each request takes time and can add up. By reusing cached versions of these files on repeat visits to the site, you cut down on the number of requests going out to the server and decrease the time at which the web page will be loaded. Faster load times mean happy browsing!

How does Expire Headers work?

Expires Headers tell the web browser how long to store a file in the cache. Keeping the files in the cache of your computer means on future visits to that page the browser will not need to download the file again.

Note: Expires Headers don't improve page speed for a first visit, after all you need to have downloaded the files at least once to reference them again. But for return visitors, page load times will be faster.

Expires headers can be set on file types or specific files. When the browser comes to the website it can see when was the last time it downloaded the specific file types. If it was recently it will display them from the cache, if you haven't visited the site in a while it will download the newest version from the webserver. If a file is missing from the cache it will be downloaded from the server.

For items that change rarely on your site, like your logo or favicon, you can set the images to expire later. For items that tend to change more often, you can shorten the time. Again you can do this on a per-file or file type basis.

How to Add Expires Headers to an .htaccess file

First, you need to decide what files you update often and what file types don't get updated often. Here is a common list of file types to include:

  • images: jpg, jpeg, gif, png, svg, webp
  • favicon/ico
  • javascript
  • css
  • pdf
  • shockwave-flash (why are you still using this?!)

Now go through these file types and think how often you change each one. Commonly images typically are not changed too often (keep in mind we are talking about existing images) favicon is almost never changed, javascript is occasionally changed and CSS is changed most often.

Expires Headers are defined in the .htaccess file for WordPress sites. This is a hidden file often found in the root of your website (via FTP). Before you do anything, backup this file before you change anything. We would hate to see any changing you make knockout your whole website without you being able to revert back to a backup.

Now, open up your .htaccess file in a text editor and paste in the following:

# Expires headers
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 4 months"
ExpiresByType image/png "access plus 4 months"
ExpiresByType image/jpeg "access plus 4 months"
ExpiresByType image/webp "access plus 4 months"
ExpiresByType video/ogg "access plus 4 months"
ExpiresByType audio/ogg "access plus 4 months"
ExpiresByType video/mp4 "access plus 4 months"
ExpiresByType video/webm "access plus 4 months"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/ttf "access plus 4 months"
ExpiresByType font/otf "access plus 4 months"
ExpiresByType font/woff "access plus 4 months"
ExpiresByType font/woff2 "access plus 4 months"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

WordPress Plugin to Add Expires Headers

If you do not have access to your .htaccess file and are running WordPress, you have a few plugin options to help out. If possible to edit your .htaccess file directly, we highly recommend that path. However, if this is not an option, adding plugins is an option, but can add unexpected complications to your website build.

WP-Rocket - Includes Browser Caching (Paid)

WP-Rocket

WP-Rocket is a paid plugin that covers all areas of your website, and includes expires headers, along with caching rules, CDN access, and file minification. This is our go to for our clients at SeeMe Media for all of our WordPress Plugins, and is also recommended by WP-Engine hosting and others. Like most things, you ger what you pay for, more access, more customizations and great service.

 

Leverage Browser Caching Plugin (Free)

Leverage Browser Caching Plugin

This plugin automatically will set expires and cache_control headers to your web server. All you need to do is install and activate it. Because this plugin is an activate to setup, without specific options, be sure to check any special integrations and functions, like custom JS and form integrations to ensure everything works as expected after being updated. Caching can cause unexpected outcomes and should always be checked.

1 Comment

  1. […] 02-Oct-2018 — htaccess files on a site, though for ease of maintenance, webmasters often use a single file located in the site root to make all necessary changes.Add Expires header to your htaccess file – SeeMe Mediawww.seeme-media.com › add-ex… […]