What is browser caching? And how do you do it?

With each update from searchengines like Google and Bing the speed of your website becomes more and more important and recently even Facebook started changing their algorithm so that faster sites will be shown more often than slower site.

Now I think most developers will use tools.pingdom.com to check the speed of a site and what can be improved. And one thing you can score on is “Leverage browser chaching”

But what IS browser caching?

• Browser caching stores webpage resource files on a local computer when a user visits a webpage.
• “Leveraging” browser caching is when a webmaster has instructed browsers how their resources should be dealt with.

When a web browser displays your webpage it has to load several things like images, stylesheets and javascript files.

What browser caching does is “remember” the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, stylesheets, etc. do not need to be loaded again, because the browser has them saved / rememberd.

How to use browser caching via .htaccess?

If you want to use browser caching via your .htaccess file you can simply add the following code. It’s recommended to add this to the top of your htaccess file.

## EXPIRES CACHING ##
<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"
</IfModule>
## EXPIRES CACHING ##