How to Fix the Leverage Browser Caching Using .htaccess

3257

Now here we going to learn how to fix the leverage browser caching using .htaccess below in this you have a clear solution to fix the issue.

1. What is Leverage Browser Caching?

One of the important thing for the website is visitors to keep them as repeated the leverage browser caching helps a lot and it also increases website performance. In the website, some of the things do not change every time like logo, stylesheets, javascript, other images, and text.

When visitors go to your website the request receives everything like images scripts and CSS etc., this will happen through your web server. With the help of leverage browser caching when a visitor who come back again to your website they will be getting those files from their local cache system rather than make a server request again.

2. How to Use Leverage Browser Caching Using .htaccess

Make sure ( mod_expires ) is supported by your web server, this will work only Apache based server. If you have Apache based server means you need to add the following code in the top of your .htaccess file for leverage browser caching. You can find the .htaccess file in your root directory If can’t able to see the .htaccess file here you have an article.

Want to know more about .htaccess click here.

Here you have two options One is Cache-Control Header and another one is Expires headers.

Expires Header

Using Expires Header you can create specific rules for different file types for all your root directory files. Here you can create a timing for your files like how long to keep the files in the local browser cache.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

## EXPIRES CACHING ##

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType application/javascript "access 1 month"

ExpiresByType application/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

</IfModule>

## EXPIRES CACHING ##

Cache-Control Header

For client request and server response, the Cache-control is very important and it is used for HTTP header specify browser caching policies. For this, you can mention all type of files and you also set cache control maximum age.

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

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

</filesMatch>

.htaccess Browser Caching leverage browser caching server response website performance

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]