Leverage Browser Caching means how long web browsers keep your images, CSS and JS stored locally because when you visit that page another it takes less data and less time to load the page. Most of the static files that are used on web pages can be saved on the user’s computer for future access. Every time the visitor accesses a new page on your website then these files will then be accessed from the visitor’s computer instead of your server, which will improve the loading speed of your website.
How to enable Leverage Browser Caching
To enable it add the below code in your .Htacess 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 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 ##Leverage Browser Caching For Windows Servers
If you want to leverage browser caching for Microsoft (Windows/ASP.NET)server you can do it in two ways.
- By configuring it in the IIS Manager.
- Adding a small snippet to the web.config file.
You Can Configure IIS By The Following Ways -:
- Navigate to Start menu >> Administrative Tools >> Internet Information Services (IIS) Manager.
- Find your app in the list on the left side.
- Right-click on the app and select Output Caching in the menu.
- Now click on Add. You can now add caching rules for any web file type you wish.
You Can Configure Web.Config By Adding Below Snippet To Your Web.Config
You Can Configure Web.Config By Adding Below Snippet To Your Web.Config
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
</system.webServer>
Common Caching Issue
The most common caching issue is with specific user’s web browser cache, which saves web files from previously visited web pages on the local machine for faster viewing of these pages in the future, Let’s understand this concept via this small example Let’s say you list your HTML and images to be cached for one year, It means you make changes to your pages they may not be seen by all users. Due to your previously cached file and the user will look cached files rather than new ones. To resolve this issue we have to use URL Fingerprinting.
What is URL Fingerprinting?
If you want to load a fresh file not a cached file, then it is possible by having a unique name for your new file.For example, if you first upload the CSS file was name as “main.css”, then you have to rename it to “main_old.css”.This thing is useful for the file that changes occasionally.
