Leverage Browser cache is the process of telling the browser to cache your static content. As websites become more dynamic and heavier it is important to reduce the payload and leveraging the browser to cache those objects is just one way of doing just that. Without it you would be loading the site raw, which would strain many server. With Most sites being on shared hosting, where the resources are shared with many other websites then we can quickly see a problem if we do some simple maths.
Google uses speed in its algorithms now to rank your site, by how much it is effected is not entirely known but as it is used it is important.
If a website is 500kb for the home page and there are 100 websites on that server and someone enters each site at the same time then suddenly the server has to deal with and process 50MB of data, scale it up and we begin to see the problem. Servers are still computers with the same components only more powerful and with more processors and RAM.
How does it work?
Leverage browser cache works by telling browsers that are compatible such as most modern browsers like Fire Fox, Chrome and IE 9 to store a static HTML version of your site locally, i.e. your computer. If you use Ccleaner on your computer, you will see that after a days worth of browsing the net you will have a lot of cache store on your computer. This can amount to a lot of data in some cases, especially if you watch YouTube for a significant period of time.
This is part of the reason many computers clog up, which is why clearing the cache is important once in a while at least.
But it is more important and better for the end user to recieve a site quickly so caching is here to stay.
How do we Leverage Browser Cache
To leverage browser cache we must enable it and we can do this with a file called .htaccess which can be found in your file manager.
Please note for Cpanel users, when you select file manager and the pop up box appears you must select show hidden files or you will not see your .htaccess
Your .htaccess is the where the magic is and adding this to it will enable browser caching.
Looking at the code above we can see what is going on.
The Wrapper state the type of module being used, in this case mod_expires.
The next part tells apache to turn on the module
The final part in between the wrappers tells apache what to cache and for how long, in this case we are saying that the above file types from the moment they are accessed or loaded to the end users browser will be cached for X amount of time before being refreshed unless you change something then the condition if clause will load the latest version.
If your content is dynamic and changes on a regular basis then you will need to use 304 not modified headers and to do this just add this to your .htaccess.
<FilesMatch "\.(jpg|jpeg|png|gif|js|css|ico|swf)$"> Header set Expires "access plus 1 year" </FilesMatch> # 2 DAYS <FilesMatch "\.(xml|txt)$"> Header set Expires "access plus 2 days" </FilesMatch> # 2 HOURS <FilesMatch "\.(html|htm)$"> Header set Expires "access plus 2 hours" </FilesMatch>