When visiting a website, the website will cache in your browser. This cache can be controlled by configuring your
Cache-Control HTTP headers for your website This is done by adding mod_expires in the .htaccess file of your server.
If you don’t set your
Cache-Control for the HTTP headers, then, you will have a longer wait times when visiting your website. Each time your website is accessed without
Browser caching is good because it allows your web resources to be stored in the browser for faster page load time. This makes your site faster to surf on the web. To remove the cache from your browser, your browser cache needs to be cleared. For information on clearing your browser cache, please see our article on How to clear your browser’s cache. The following sections will explain the basics of setting up the Apache Module
mod_expires in your .htaccess.
Basic code for setting expire dates for cache
In order to add browser caching to your website, you will need to set the date for when the cache expires. This cache code is placed in the .htaccess found in your public_html folder. You will need to edit your .htaccess file. Add the following code to the file and save it.
mod_expires in .htaccess
mod_expires in .htaccess allows image types and other file types to be set in an array. This matches the file types to the specific expire time. This streamlines the htaccess code. In the code below, the file types are listed in a row like
jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3. Below is an example of the code to use.
<filesmatch ".(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$"=""> ExpiresActive on ExpiresDefault "access plus 2 days"
This sets the cache to expire to the same duration for each of the file types. To specify the specific times for each individual file type, you will want to use the previous code example. The following will explain the Directive types that are used for
There are three directive types;
ExpiresDefault. The following table explains the difference between them.
|ExpiresActive Directive||Enables the Expires headers for the website.|
|ExpiresByType Directive||This defines the age of the cache header and the type of file to cache.|
|ExpiresDefault Directive||This sets the age of the cache for all documents other than those specified in the ExpiresByType for the site.|
Caching Directive bases
There are 3 base types the access, now, and modification type.
- now (same as “access“)
Duration of cache time
The duration of cache time can be set to one of the following units of time.
Basic syntax for
The following shows the basic syntax for the
ExpiresByType. Each file type can be set to specific times to expire the cache.
ExpiresByType text/html "access plus 2 days 12 hours"
ExpiresByType image/png "access plus 6 months 3 days"
Recommended Expire date ranges
You do not want to set your expire times for your cache to unrealistic settings. If you keep the cache to a maximum of a year and a minimum of a month, you should have your browser caching working optimized for your site.
- Set your images to a long expire time like “access plus 1 year”. Images take more time to load and are updated less frequently than other files.
- Keep your cache expire date at most a year.