Leverage browser caching: How to add Expires headers

0
512

When you test your speed of the website in Google page speed or any other website speed testing tool, it may tell to fix Leverage browser caching . So What is Leverage browser caching and how to fix it? Which is I am going to tell you now. Do you know about browser caching, it will store your website data in browser temporarily. In order to fix Leverage browser caching you needs to add Expires headers to your CSS, JS, Images and it can be done through .htaccess file.

The main purpose of adding Expire headers is to reduce the number of HTTP request and so performance of your website will improve for returning visitors. With Expire header you can tell your visitor browser that the specify file will not change for 1 month or 1 year, So the browser will store that file till the files expires. So when your visitors load your website for second time it will open quickly because your website files are already fetched. Hence using this you can improve the speed of your website.

Now I am going to give the code to be added in your .htaccess for the following files. (Please take backup of your .htaccess file before doing this.)

Image: jpg, png, gif

Favicon/ico

CSS

JavaScript

First make a plan how long you want your file to be cached in your visitor browser

and then create your code.

Expires header for images:

Expires header for favicon:

Expires header for CSS:

Expires header for JavaScript:

Before adding these Expires headers you need to enable the Expires header module in your .htaccess. Use the below code to enable it.

You may also use Default Directive to set default Expires header. For that Use the below code,

Now combine all the above code snippet and put it in your .htaccess file. Copy the below code and place it in your .htaccess

That’s it. Now check the speed of your website, it will surely increase for some amount. If you find your website speed increased please leave your comment below.

LEAVE A REPLY