Login to Your Account
View RSS Feed

Software Engineers BLOG

Speeding up the web site content download using browser cache

Rating: 1 votes, 3.00 average.
Browser cache is memory area which is near to an end user (i.e YOU) to provide faster access for web resources over the net. Downloading static resources over the net again and again from origin server causes the following performance problems:

• Increases the network bandwidth usage
• Increase overall page response time
• Introduce more load on origin server

In this article we will discuss how to setup and enable cache to improve the website loading time on your machine.

1) Setting up the browser cache

Browser stores the web contents at temporary location for quick viewing later. This cache location and size of the cache can be configured at browser level. These settings may vary from one browser to another browser.

Here are the sample settings for Internet Explorer 7.0/8.0/9.0:

To manage browser cache:

1. Go to Tools -> Internet Options -> General Tab and click on Settings button under Temporary Internet Files category/Browsing History Category
2. To change the cache location , click on Move Folder button and specify a location where do you want to store
3. To change the size of cache, specify new positive integer value in Amount of disk cache to use input box.
4. Click on Ok and log off the session to complete cache settings if you changed cache location

The sample settings for Mozilla Firefox 3.6:

To manage browser cache:
1. To enable cache, type about:config in browser address bar and Set “browser.cache.disk.enable” option to ‘true’ to store cache on the hard drive. The default setting is true.
2. To change to the size of cache, set positive integer value at “browser.cache.disk.capacity” option. The default value for this is 50000KB.
3. Cached contents are available at
“C:\Documents and Settings\<user profile>\Local Settings\Application Data\Mozilla\Firefox\Profiles\wpuluu8d.default\Cache”
4. To view cache settings and usage details, type about:cache at URL bar.

2) Enabling web resources for caching

Providing the right header information for the web resources enables the browser to cache the contents. While enabling the web resources for cache extreme care should be taken so that browser doesn’t serve the stale contents from the cache. To control this, there are settings available to keep the freshness details of the contents and also validation mechanisms to validate whether the content served from cache is fresh or stale.

The following cache-control & HTTP headers are used to specify freshness and validation scheme,

 Expires

A HTTP header tells to browser cache how long the content will be valid. After an expiration period the browser will refer back to origin server for fresh contents. Expiration can be set in web server using the following ways:
o Setting absolute time
o Based on last time client retrieved the content
o Based on the last time the content modified on web server
Overhead with this, web server’s clock should be synchronized with user machine clock. Time is represented in GMT format.
Sample snippet for setting expiration period
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Sep 2010 20:00:00 GMT"

 max-age=[seconds]

A Cache-control header specifies the maximum amount of time the content will be considered as fresh. This header was introduced in HTTP 1.1 specification which is equivalent to Expires header available in HTTP 1.0.
It implicitly tells the browser to re-validate with the server if the max-age is exceeded.
This directive is relative to the time of the request, rather than absolute timestamp. Expiration period will be in seconds. This overrides the Expires Http header settings.

Example max-age setting for images
# 480 weeks
<FilesMatch "\.(jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=290304000, public"

 s-maxage=[seconds]
This is similar to max-age, except that it only applies to shared (e.g., proxy) caches.

 private
This directive allows the caches to specific one user (e.g., in a browser) to store the response. This cannot be used to shared caches (e.g., in a proxy)

 public
A cache control directive used to set authenticated responses as cacheable; normally, HTTP does not cache the authentication content, which is automatically private.

 no-cache
This forces caches to send a request to the origin server for validation before releasing a cached copy, every time. This is useful to maintain freshness, without benefiting caching. But this is not for preventing caching

 no-store
This instructs caches not to store the content at any situation .This can be used with no-cache header. This is the best option to prevent caching the sensitive information.

 must-revalidate
It forces that the browser must re check the content expiration before serving it from browser cache

 proxy-revalidate
It similar to must-revalidate header, except that it only applies to proxy caches.

Validation scheme:
Validation is a mechanism that web servers and browsers uses to determine whether the component in the browser's cache matches the one on the origin server.
Validation plays key role to maintain freshness. It can be done by using ETag and Last-Modified-Since request headers.

Web server generates a unique string identifier for the specific version of a web component is called ETag.This is to provide sub second resolution in validating cached entities. But it is not recommended to use ETag at cluster environment and proxy cache as the request may get diverted to another server in the cluster which may result in downloading the resource due to mismatch in ETag. ETag increases the size of the HTTP headers in both the response and requests.

Another request header uses to validate the content freshness based on the last modified value. Browser sends the last modified value in timestamp format with Last-Modified-Since request header after expiration period or during page reload event to check the freshness with web server. If there is any mismatch, web server sends the requested content otherwise server returns HTTP 304 status, then browser will serve it from its own cache.


  1. sajal's Avatar
    how to increase the speed of wifi .....?
  2. [FE].Zatak's Avatar
    Dude need help..
    How set mozilla tab restore use cache..?
    Though d cache was on(400mb)
    it using bandwidth for tab restore.
    Reply asap plz
  3. sajal's Avatar
    buddy..i need help on how to increase your wifi spped...on your laptop..??
  4. rohitjindal_2008's Avatar
    not good yar.....
  5. rohitjindal_2008's Avatar
  6. sreekanthzipsy's Avatar