HOW TO: Leverage browser caching

Last modified: February 3, 2020
You are here:
Estimated reading time: 1 min
Every time a visitor loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, JavaScript, images and videos. Leveraging the browser caching allows you to control for how long the browser should cache your static content. Browser caching is really important mainly because it reduces the load on your web server, which ultimately reduces the load time for your users. This means that you’ll use less resources to render a page and the visitor will get a better experience.
 
To leverage browser caching you need to edit .htaccess which will alter the HTTP headers to set expiry times for certain types of files. The following lines would need to be added to your .htaccess:

## Leverage browser caching ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## End leverage browser caching ##

This should help on improving your site(s) loading speed and reduce the overall resource footprint for your account.
Was this article helpful?
Dislike 0
Views: 150