How To Optimize Your Site With Leverage Browser Caching?

               In this article, we shall learn how to optimize your site with leverage browser caching.

The most important cache mechanism for page speed is browser caching.
Most of the static files that are used on web pages can be saved on the computer of your visitor for future access.
Every time the visitor accesses a new page on your website these files will then be accessed from the visitor's computer instead of your server, which will greatly speed up page load times.

You can Leverage Browser Caching for Apache servers by adding a ".htaccess" file.
Below are the two recommended ways of doing this:

1. Mod_Expires
Add the following code to the .htaccess file and edit the access time and file types to your liking:

<IfModule mod_expires.c>
ExpiresActive On
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType application/x-font-opentype "access 1 year"
ExpiresByType application/x-font-woff "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType text/html "access 1 hour"
ExpiresByType text/css "access 14 days"
ExpiresByType text/x-javascript "access 3 weeks"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType image/gif "access 2 months"
ExpiresByType image/png "access 2 months"
ExpiresByType image/jpg "access 2 months"
ExpiresByType image/jpeg "access 2 months"
ExpiresByType image/gif "access 2 months"
ExpiresByType application/pdf "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

2. Mod_Headers

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

# 1 YEAR
Header set Cache-Control "max-age=29030400, public"

# 1 MONTH
Header set Cache-Control "max-age=2592000, public"

# 1 WEEK
Header set Cache-Control "max-age=604800, public"

# 1 HOUR
Header set Cache-Control "max-age=3600, public"

# DON'T CACHE ANY FILE
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate"

Feel free to download the source code.

Hope you liked this article, do share to your friends, colleagues and social websites.