What is “Leverage browser caching” and how to implement the same in coding part.


The website files may contain, HTML, CSS, PHP, JS and other types of files. The different types of files take different time to an executive on the internet based on the code weight. This could cause the delay in loading the pages. The concept of browser cache helps minimise this issue. When a page is loaded into the browser it saves the content of the files and when next time the same page has opened the contents are displayed from the local system. What all the files to be loaded is defined in the code. This procedure is called as leverage browser.


What is browser caching?

Every time a browser loads a webpage it has to download all the web files from your linux web server to properly display the page. This includes all the HTML, CSS, JavaScript and images.

Some pages might only consist of a few files and be small in size – maybe a couple of kilobytes. For others however there may be a lot of files, and these may add up to be several megabytes large. Twitter.com for example is 3 MB+.
 

What are the issues we face from browser caching

Normally we face two kinds of issues as mentioned below.

  1. The large files take longer to load and can be especially irritating if you’re on a slow internet connection (or a mobile device).

  2. Each file makes a separate request to the server. The more requests your server gets simultaneously the more work it needs to do, only further reducing your page speed.


How to leverage browser caching

1.Change the request headers of your resources those use caching.

2.Optimize your caching strategy.

 

1.Change the request headers of your resources to use caching

Its very easy for most people, the way to enable caching is to add some code to a file called .htaccess on your web host/server. Once you buy the Linux hosting, then you have to take care of all these important things before going live with your website.

This means going to the file manager (or wherever you go to add or upload files) on your webhost.

The .htaccess file controls many important things for your site, Just you need to create a .htaccess file in the file manager or you can use any FTP client such as FileZilla to connect to your best hosting in India server. and you need to upload the leverage browser caching code.


Browser caching for .htaccess

The below code should be added to the top of your .htaccess file.

## 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 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>

## EXPIRES CACHING ##

Save the .htaccess file and then refresh your webpage.