Leverage browser caching

 IF you visit some site browser will save some files   on local machine which is call browser caching.

Leverage browser cache is that  to instruct browser how to use their resources files which is downloaded  by browser on local machine .

 When visitor  visit the site  browser loads some files   on local machine  like css  images logo etc so if user visit  on other page browser use their resources  which is downloaded on local machine  so  in this  way  on first page load it take time  after that other page  will load easily because browser already loaded some  need  resource files which is repeating in site   to display that properly.

In leverage browser caching  your web page files get stored in web browser cache so your page  load  faster because other  pages share the repeated resources  which is already downloaded .

How to use Leverage Browser Caching

 First change request header of your resource to use caching .

Caching strategy need to be optimised.

To Set Difference cache time for different files resource saved on local machine.

 You need  to add some code in . htaccess to  give instruction to  web browser  which resource need to save  and for how much time it need to stored in web browser .

 You need to add code at top of your .htacess files 

##  LEAVERAGE BROWSER EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
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>
## LEAVERAGE BROWSER EXPIRES CACHING ##

After adding code in . htaccess files  you need to save  it at same location on root where it is  after  that  refresh browser and  see changes .

Other Method cache-Control Method

Other cache control method is much easier to control browser cache which is  saving on your local machine . Many People fine it easier to setup.

You need to add the  given below code in your root .htaccess files  click on .htacess files edit it add code in it and save file.

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public" filesMatch>

It  will set up cache control according to your file type .

Explaination

# 1 Month for most static assets

 This code is comment part of htaccess  file. Because any line with # sign htaccess  ignore that  line  so we use it for commenting .

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

 In the above line code will work for   any type of file which extension provided in code will follow the caching instructions. You can add more  file extension in this if you want to apply  caching instruction on them also if you want to  any type of file like png or css don’t want to  apply cache rule on file you can simply remove  them from the given line .

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

Here is the real header added and time value given.  

Header set Cache-Control  is the part of  setting header .  

 max-age=2592000, public    It  is used to set the  time for how  long  it should be cached  it's in seconds  it's nearly one month.   

Public    It  show the status of cache public which is good  to use .