HOW TO: Leverage browser caching

Last modified: February 22, 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. Furthermore, browser caching is important because it reduces the load on your web server, which reduces the load time for your users. Hence, you’ll use less resources to render a page and the visitor will get a better experience. In addition, to leverage browser caching you need to edit .htaccess, which will alter the HTTP headers to set the 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 ##

Finally, 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: 26