Loading static content in ASP.NET pages from different domain for faster parallel download

Generally we put static content (images, css, js) of our website
inside the same web project. Thus they get downloaded from the same
domain like "http://www.dropthings.com">www.dropthings.com. There are three
problems in this approach:

  • They occupy connections on the same domain "http://www.dropthings.com">www.dropthings.com and thus other
    important calls like Web service call do not get a chance to happen
    earlier as browser can only make two simultaneous connections per
    domain.
  • If you are using ASP.NET Forms Authentication, then you have
    that gigantic Forms Authentication cookie being sent with every
    single request on "http://www.dropthings.com">www.dropthings.com. This cookie
    gets sent for all images, CSS and JS files, which has no use for
    the cookie. Thus it wastes upload bandwidth and makes every request
    slower. Upload bandwidth is very limited for users compared to
    download bandwidth. Generally users with 1Mbps download speed has
    around 128kbps upload speed. So, adding another 100 bytes on the
    request for the unnecessary cookie results in delay in sending the
    request and thus increases your site load time and the site feels
    slow to respond.
  • It creates enormous IIS Logs as it records the cookies for each
    static content request. Moreover, if you are using Google Analytics
    to track hits to your site, it issues four big cookies that gets
    sent for each and every image, css and js files resulting in slower
    requests and even larger IIS log entries.

Let’s see the first problem, browser’s two connection limit. See
what happens when content download using two HTTP requests in
parallel:

"/wp-content/images/8D9C4201F09C425845F6116D8326B7EC.png">
"border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;"
height="248" alt="image" src=
"/wp-content/images/63A96A58E0DB17B47A02BF7D4C2E991B.png"
width="550" border="0">

This figure shows only two files are downloaded in parallel. All
the hits are going to the same domain e.g. "http://www.dropthings.com">www.dropthings.com. As you see,
only two call can execute at the same time. Moreover, due to
browser’s way of handling script tags, once a script is being
downloaded, browser does not download anything else until the
script has downloaded and executed.

Now, if we can download the images from different domain, which
allows browser to open another two simultaneous connections, then
the page loads a lot faster:

"/wp-content/images/AC715212055DC1781DD0A2089416E453.png">
image "/wp-content/images/F8C9387177EC03BE71B8B05A54080C88.png"
width="544" border="0">

You see, the total page downloads 40% faster. Here only the
images are downloaded from a different domain e.g.
“s.dropthings.com”, thus the calls for the script, CSS and
webservices still go to main domain e.g. "http://www.dropthings.com">www.dropthings.com

The second problem for loading static content from same domain
is the gigantic forms authentication cookie or any other cookie
being registered on the main domain e.g. www subdomain. Here’s how
Pageflake’s website’s request looks like with the forms
authentication cookie and Google Analytics cookies:

"/wp-content/images/6EA5CC01C0CB8706B05E88C40AE3F66F.png">
image "/wp-content/images/8206F938C54297713922091335D5BCEF.png"
width="600" border="0">

You see a lot of data being sent on the request header which has
no use for any static content. Thus it wastes bandwidth, makes
request reach server slower and produces large IIS logs.

You can solve this problem by loading static contents from
different domain as we have done it at Pageflakes by loading static
contents from a different domain e.g. flakepage.com. As the cookies
are registered only on the www subdomain, browser does not send the
cookies to any other subdomain or domain. Thus requests going to
other domains are smaller and thus faster.

Would not it be great if you could just plugin something in your
ASP.NET project and all the graphics, CSS, javascript URLs
automatically get converted to a different domain URL without you
having to do anything manually like going through all your ASP.NET
pages, webcontrols and manually changing the urls?

Here’s a nice HttpFilter that will do the exact thing.
You just configure in your web.config what prefix you want
to add in front of your javascript, css and images and the filter
takes care of changing all the links for you when a page is being
rendered.

First you add these keys in your web.config‘s
block that defines the prefix to inject
before the relative URL of your static content. You can define
three different prefix for images, javascripts and css:

"/wp-content/images/4A948A90D063727D19FCA98F9936546C.png">
image "/wp-content/images/C27AA0B45868AA5420DD767F71FE6B87.png"
width="478" border="0">

So, you can download images from one domain, javascripts from
another domain and css from another domain in order to increase
parallel download. But beware, there’s the overhead of DNS lookup
which is significant. Ideally you should have max three unique
domains used in your entire page, one for the main domain and two
other domain.

Then you register the Filter on Application_BeginRequest
so that it intercepts all aspx pages:

"/wp-content/images/206FE19B14F49E7B9BF91BFDA3C3319F.png">
image "/wp-content/images/1877D9293AF673C512CB31C7DAD14688.png"
width="600" border="0">

That’s it! You will see all the tag’s
src attribute,