In part 3 we created three helper functions to use when including css, js and images in our pages. As you might expect, YSlow has something to say about how to maximize the performance of such files beyond caching. Specifically, YSlow makes the following three recommendations:

• Use a Content Delivery Network (CDN),
• Use cookie-free domains, and
• Split Components Across Domains

All three are super-easy to implement, and are all "fixed" by the same code (we won't actually use a CDN, but we'll make it so that its easy to use if the need ever arises). To be honest, I hadn't even considered the possibility of using separate domains to minimize the overhead associated with sending cookie information. Some may say that this is a microoptimization, but it takes less than five minutes to implement, so why not? (if you aren't using cookies, you won't see any benefits of this, except for the parallel downloading and flexibility of using a cdn in the future).

If you recall, the initial version of our helper functions, without our cache busting, looked like:

public static string IncludeCss(this HtmlHelper html, string name)
{            
    return string.Format("<link href=\"/assets/styles/{0}.css\" rel=\"stylesheet\" type=\"text/css\"></link>", name);
}
public static string IncludeJs(this HtmlHelper html, string name)
{
    return string.Format("<script src=\"/assets/js/{0}.js\" type=\"text/javascript\"></script>", name);
}
public static string Image(this HtmlHelper html, string name, int width, int height, string alt)
{    
    return string.Format("<img src=\"/assets/mages/{0}\" width=\"{1}\" height=\"{2}\" alt=\"{3}\" />", name, width, height, alt);
}

(I'm doing this against the initial version just to keep things simple, but integrating our Part 3 and Part 4 end-results should be trivial).

All we need to do is a little change:

private static readonly string _assetUrl = ConfigurationManager.AppSettings["assetUrl"];
public static string IncludeCss(this HtmlHelper html, string name)
{            
    return string.Format("<link href=\"{0}assets/styles/{1}.css\" rel=\"stylesheet\" type=\"text/css\"></link>", _assetUrl, name);
}
//...similar changes the for js and image method.

and change our web.config to include the value:

<appSettings>
    <add key="assetUrl" value="http://assets.mydomain.com/"/>
</appSettings>

Finally you'll need to setup the subdomain.

While we aren't using a CDN, we've made it very easy to start using a CDN by making the root URL path for our assets configurable. We've also ensured that cookies defined for mydomain.com aren't going to add overhead when requesting assets sitting on assets.mydomain.com.

For the curious, YSlow doesn't know whether the domain is a CDN or not, you have to tell it that it is by adding it to a list.

A final word of caution, YSlow also warns against too many DNS lookups - so while its important to use a cdn, use non-cookie domains and split up our content to allow for greater parallel downloads, don't over do it. They generally recommend less than 4, but their own website uses 6. We've added 1, which, in my opinion is worth it, but try not to add too many (consider that you'll likely add one for google analytics and possible for ads...).

Part 5 will be our last part in the series, and will be very different than what we've looked at so far.