What is Browser Cache?
How to enable browser caching?
I assume that you are a website owner who wants to enable browser caching for your website using a way or another. Remember that each resource file contains headers which is a set of information of your resource file. For example an audio file may contain filesize, artist name, length of playtime and codecs related to your audio file. So in order to set or leverage browser caching for your resource file we have to set headers by defining some rules in a htaccess file which is used as a configuration to set or tweak different settings for your entire website.
So here in our htaccess file we set cache headers for our resource file by mentioning the expiry time of these resource files so for any subsequent request your browser wont have to depend on the files supplied from website server. Here how we do it:
## EXPIRES CACHING ##
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 application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##
Once you set it we need to set cache control lifetime for our cached resources. Here you go:
<span class="pun"><</span><span class="typ">FilesMatch</span> <span class="str">"\.(gif¦jpe?g¦png¦ico¦css¦js¦swf)$"</span><span class="pun">></span>
<span class="typ">Header</span> <span class="kwd">set</span> <span class="typ">Cache</span><span class="pun">-</span><span class="typ">Control</span> <span class="str">"public"</span>
<span class="pun"></</span><span class="typ">FilesMatch</span><span class="pun">></span>
In the above declaration we set resource file headers to have public use of files with type mentioned in the brackets (). You may want to include more file type if used on your website as reusable resources.
Once you define it in your htaccess file and refresh your website it should load faster for every subsequent request. You may want to see the difference by testing it on page speed tools such as Google Page Insights or Pingdom.