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?
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.
The large files take longer to load and can be especially irritating if you’re on a slow internet connection (or a mobile device).
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 web 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 hosting 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 ##
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 application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##
Save the .htaccess file and then refresh your webpage.