a web browser caches common parts of a webpage and its code

How to leverage browser caching

When a web browser displays your webpage it has to load several things like your logo, your CSS file, and other resources.

What browser caching does is "remember" the resources that the browser has already loaded. This means that when a visitor goes to another page on your website it does not have to go get your logo or CSS file again, because it already has it "remembered". The end result of this is that your pages load much faster.

If you have tested your webpage for speed and found out that you need to use browser caching, here is how you do it.

How to change browser caching on your site

It is done by adding some code to a file called .htaccess on your web host/server.

This means going to the file manager (or wherever you go to add or upload files) on your webhost. The .htaccess file controls many important things for your site. If you are not familiar with the .htaccess file, please read my working with .htaccess article to get some know how before changing it.

Okay code time! The code below should be added to the top of your .htaccess file.

<IfModule mod_expires.c>
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 text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

Save the .htaccess file and then refresh your webpage.

How to set different caching times for different file types

You can see in the above code that there are time periods like "1 year" or "1 month". These are associated with file types, as an example the above code states that a .jpg file (image) should be cached for a year. If you want to change that and say you want them only cached for a month you would simply replace "1 year" with "1 month". The values above are pretty optimized for most webpages and blogs.

by Patrick Sexton