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
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.
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
- shockwave-flash (why are you still using this?!)
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:
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 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.
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.