How to Set Correct Leverage Browser Caching on .htacces

If every internet users deserve to get a fast web, then optimizing and improving the pagespeed of a site is webmasters' duty. I believe you are familiar with pagespeed and yslow, these two application has now become a reference and standard to measure quality and performance of a blog/ site. One way to improve your site pagespeed is to set the Leverage Browser Cache, it's the easiest way but significantly increase your site loading time few times faster.

Leverage Browser Cache is basically instructing the browser to re-leverage or recollect data that was downloaded earlier (which is stored in browser cache) so when you open another page from the same site you will not need to redownload the same files. By default, this caching function is already handled by browser automatically. But its process is not yet perfect, it can be interrupted by some factors like proxy changes, session time and so on. So by appending this leverage browser cache on .htacces file, it will make the browser cache function works better, as a result the page load will be faster.

If you are using W3 Total Cache plugin, the leverage browser cache functions is built in there, simply activate it to make it works. But for some users (including me) this plugin makes the server works harder and load much memory, so I decided not to use it, anymore. As a solution, I adapted this leverage browser cache function manually. Open the .htacces file on your site root, the add this code:

# BEGIN Browser Cache
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
FileETag None
<IfModule mod_headers.c>
Header set X-Powered-By "DVS"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
FileETag None
<IfModule mod_headers.c>
Header set X-Powered-By "DVS"
</IfModule>
</FilesMatch>
<FilesMatch"\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|
jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|
odp|ods|odt|ogg|pdf|png|pot|pps|ppt|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
FileETag None  
<IfModule mod_headers.c>      
Header set X-Powered-By "DVS"
</IfModule>
</FilesMatch>
# END Browser Cache

Another way to improve your site performace, please read also Expire Header in .htacces and Meta Tags, this post explains about how to set the cache control to define how long a file should be cached.