When a visitor visits a website, browser renders page in form of html to your browser window and you see a well arranged web page as a result. This page may include text blocks, images, videos, slide shows, animations and many more. From programming point of view, every time you visit a web page, the web browser displays the page in form of html which is combination of text blocks, images and videos arranged in a pre-designed or organised manner, using cascading style sheets (css), Javascript (js) files and more.
What is Browser Cache?
Browser cache is the local storage of these resource files which include images, videos, css and Javascript files which speeds up the rendering of a web page because these files are stored in your browser. If instructed to use browser caching, browser can use the already saved set of these resource file for display of your site pages for subsequent requests which is very fast as compared to loading these files from hosting server.
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 ##
<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 ##Once you set it we need to set cache control lifetime for our cached resources. Here you go:
<FilesMatch "\.(gif¦jpe?g¦png¦ico¦css¦js¦swf)$">
Header set Cache-Control "public"
</FilesMatch>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.
