Tips & Tricks

Leverage Browser Caching – Speed up your website up to 2x

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.

leverage browser caching
Leverage Browser Caching

How to enable Leverage Browser Caching

To enable it add the below code in your .Htacess file

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

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
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />

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.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button