Leverage Browser Caching – Speed up your website

What is Leverage Browser Caching ?

To speed the website, browser caching play vital role in it.Most of the static files that are used on web pages can be saved on 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.

To enable it you have to add following lines to 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 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 by two way.

• 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

<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
</system.webServer>

Common caching issue

We will understand this concept by taking a small example, Let’s say you list you list your html and images to be cached for one year, It means you make a changes to your pages they may not be seen by all users.Due to the your previously cached file and user will look a cached files rather than a new ones.If you have a file that you tweak occasionally (example – a CSS file) you can overcome the cache issue by using URL fingerprinting.

URL fingerprinting

If you want to load a fresh file not cached file, then it is possible by having a unique name.For example if your firstly deployed CSS file was name as “main.css”, then you have to rename it to “main_new.css”.This thing are useful for file that change occasionally.