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 Cache-Control, your website has to make a request to the server for each image, javascript file, CSS file, and so forth to load.
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.
Performance Metric Improvements
Using mod_expires for browser caching delivers instant, tangible improvements to your site’s speed and efficiency. By setting rules for how long browsers keep static files like images, CSS, and JavaScript, you cut down on redundant downloads, enhancing the user experience.
Here’s how it elevates key performance metrics:
- Quicker page loads: Caching slashes load times by 40–60% for repeat visitors, pulling static assets from local storage instead of fetching them again.
- Lighter server demand: Proper expiry headers reduce HTTP requests, freeing up server resources for smoother operation.
- Higher performance ratings: Tools like GTmetrix or Google PageSpeed Insights often report a 15–20 point score increase after optimizing caching.
- Lower bounce rates: Fast, seamless browsing keeps users engaged, reducing the chance they’ll leave due to slow loading.
Testing Your Implementation
After adding mod_expires rules to your .htaccess file, confirm everything’s working as intended. Testing ensures the server applies your settings correctly and delivers the expected speed gains.
Try these steps to check your implementation:
- Chrome DevTools (Network tab): Open your site, hit F12, and go to the Network tab. Reload the page and look at the Status and Size columns for resources—spot “(from disk cache)” or “(from memory cache)” to confirm caching.
- Look for “304 Not Modified” responses: These show the browser is using cached files, proving your Expires headers are effective.
- Analyze with GTmetrix or Pingdom: These tools review your headers, highlighting which files are cached and flagging any areas for improvement.
- Start fresh: Clear your browser cache or use incognito mode before testing to ensure your updated .htaccess rules are active.
- Check response headers: Use tools like WebSniffer or browser extensions to inspect HTTP headers. Verify the presence of Expires, Cache-Control, or Last-Modified headers to confirm proper caching behavior.
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.
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
Now your site will set the time each for each resource that was added to the .htaccess to expire. In the previous code example, the jpg, jpeg, gif, png will expire in a year and pdf, javascript and flash files will expire in a month. More explanation o these settings will come later in this article. Next we will look at using the Cache-Control with mod_expires.
Code for mod_expires in .htaccess
Using 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)$"=""&rt;
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 Cache-Control.
Directive types
There are three directive types; ExpiresActive, ExpiresByType, and ExpiresDefault. The following table explains the difference between them.
| Caching directives |
| 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.
- access
- now (same as “access“)
- modification
Duration of cache time
The duration of cache time can be set to one of the following units of time.
- years
- months
- weeks
- days
- hours
- minutes
- seconds
Basic syntax for ExpiresByType intervals
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.
- Make your CSS, HTML, and Javascript expire at a minimum of a month like “access plus 1 month”. CSS, HTML and JavaScript’s typically are updated more when developing a site than the sites images.
- Keep your cache expire date at most a year.
Advanced Implementation Strategies
Once you’ve added mod_expires to your .htaccess file, you can further optimize your caching strategy by tailoring it to your website’s structure and user behavior. These advanced practices help maximize performance while ensuring that content remains fresh and relevant:
Align cache headers with CDN settings
If you’re using a Content Delivery Network (CDN), make sure your origin server’s cache headers do not conflict with the CDN’s behavior. Mismatched settings can cause stale content to persist.
Avoid caching personalized content
For dynamically generated or user-specific content (e.g., logged-in pages), use ExpiresDefault “access plus 0 seconds” to ensure users always see the most recent version.
Implement cache-busting
Append version numbers to your asset URLs (e.g., main.js?v=2.0) to force browsers to fetch updated files when needed.
Different cache durations for device types
If your site serves different assets to desktop and mobile visitors, consider applying distinct cache rules via conditional logic or server-side user-agent detection.
Follow HTML5 boilerplate best practices
The HTML5 Boilerplate project advises setting HTML documents to expire immediately (access plus 0 seconds) while caching static resources (CSS, JS, images) for longer durations.
Troubleshooting
If your caching configuration isn’t working as expected, or causes unexpected errors, there are a few common issues to review. Most problems stem from syntax errors, missing modules, or server-specific requirements.
- 500 internal server error: This often results from syntax mistakes in your .htaccess file. Double-check your directives and ensure proper formatting.
- mod_expires not enabled: Not all hosting environments enable mod_expires by default. Contact your hosting provider to confirm it’s active on your server.
- Issues with <FilesMatch> directives: Some hosting setups require full file paths in <FilesMatch> rules. Try switching to relative paths if your directives don’t seem to take effect.
- External resources not caching: Files loaded from third-party domains (e.g., fonts, analytics) will not inherit your server’s caching rules. These must have their own cache headers set by the source domain.
Mod_expires best practices
Effective caching requires a strategic balance between performance and content freshness. By following these best practices, you can ensure your use of mod_expires improves load times without compromising on content accuracy or user experience:
- Use versioning for assets: Append version numbers to file names or query strings (e.g., style.css?v=3.4) to invalidate cached files when updates are made. This ensures users always get the latest version.
- Balance freshness and performance: Longer cache durations reduce server load and speed up repeat visits, but make it harder to deliver updated content. Choose cache times that reflect how frequently assets change.
- Exclude dynamic directories: Prevent caching in areas of your site that serve real-time or personalized content. For example:
<If “%{REQUEST_URI} =~ m#^/dynamic-content/#”>
ExpiresActive Off
</If>
- Adjust during development: While building or testing your site, use short cache durations or disable caching entirely to ensure changes reflect immediately.
- Segment by user type: Logged-in users often see personalized content, so consider shorter cache times for them compared to anonymous visitors who receive static content.
- Test across browsers and devices: Older browsers may interpret cache headers inconsistently. Validate your setup in multiple environments to avoid unexpected behavior.
