Speed Up Your Pages And Improve Your YSlow Score With The Coral Content Distribution Network

0 comments suggest edit

UPDATE: Using Coral CDN to serve up my images and stylesheets ended up being a mistake and actually slowed down my site. I’d recommend using Amazon S3 instead if you need high bandwidth fast serving of static content. Coral CDN is probably better for cases when you want to serve up a large file (mp3, mpeg, etc…) and save on your bandwidth usage. It doesn’t seem ready to be a general purpose CDN for speeding up your site. I’ll add the ability to this code to use S3. In the meanwhile, this code is still useful by simply restricting the extensions in the config file to perhaps this list “mpg,mp3,mpeg,wmv,avi,zip”. Hat tip to Jon Galloway for pointing that out.

Yahoo recently released the ever so popular YSlow add-on for Firebug used to help locate bottlenecks for web pages. From their developer network site we learn…

YSlow analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. YSlow gives you:\

    * Performance report card\     * HTTP/HTML summary\     * List of components in the page\     * Tools including JSLint

YSlow provides a nice report card for your site. Here you can see the unfortunate grade my blog gets at the time of this writing.

Haacked.com YSlow
Score

Naturally I couldn’t just sit there while some unknown Yahoo disdainfully gives my blog an F. I decided to start digging into it and start attacking specific items.

I decided to start with #2 Use a CDN which stands for Content Distribution Network. The Yahoo YSlow help page has this to say about CDNs.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

That certainly sounds useful, but the CDNs listed by Yahoo include Akamai, Mirror Image Internet, and LimeLight Networks. These might be great for big companies like Yahoo, but they’re a bit cost prohibitive for small fries like us bloggers.

Coral to the Rescue

That’s when I remembered the Coral Content Distribution Network. Jon Galloway wrote about this a long time ago as a means to save on bandwidth. The one fatal flaw at the time was that the network only worked over port 8090. Fortunately, that little issue has been corrected and Coral now works over port 80.

And the wonderful thing about Coral is that it’s trivially easy to use it. All you have to do is append your domain name with **.

So this:

http://example.com/my/really/big/file.mpeg

becomes

http://example.com.nyud.net/my/really/big/file.mpeg

And now your really big file is being served up by hundreds of geographically distributed servers. You just need to keep that file on your server at the original location so Coral can find it when adding it to its network.

Tell YSlow about Coral

By default, YSlow doesn’t recognize Coral as a CDN, which means implementing Coral CDN won’t affect your YSlow grade. YSlow only recognizes the CDNs in use by Yahoo. Fortunately, it’s pretty easy to add Coral to the list. Just follow these steps:

  1. Go to about:config in Firefox. You’ll see the current list of preferences.
  2. Right-click in the window and choose New and String to create a new string preference.
  3. Enter extensions.firebug.yslow.cdnHostnames for the preference name.
  4. For the string value, enter the hostname of your CDN, for example, nyud.net. Do not use quotes. If you have multiple CDN hostnames, separate them with commas.

Here’s a screenshot of the domains I added to YSlow. I’m sure I’ll think of more to add later.

YSlow CDN
Configuration

How can I automate this?

You knew I wasn’t going to write about this without providing some means for automating this conversion, did ya? There are two approaches I could take:

  1. Rewrite URLs to static files on incoming posts.
  2. Rewrite URLs on the way out.

The first approach rewrites the URL as you are posting content to your blog. This has the distinct disadvantage that should you decide to change the distribution network, you need to go through and rewrite those URLs.

The second approach rewrites the URLs as they are being output as part of the the HTTP response. The issue there is to do it properly requires buffering up the entire output (rather than letting IIS and ASP.NET stream it) so you can perform your regex replacements and whatnot. This can impair performance on a large page.

I decided to go with option #1 for now for performance reasons, though option #2 would be quite easy to implement. I wrote an HttpModule in the same style as my Windows Live Writer crap cleaner which rewrites an incoming MetaWeblog API post to append nyud.net to the domain.

The code here only works with Windows Live Writer and BlogJet (untested in the latter case) but can be easily modified to allow posts for any blog client (I just got lazy here) by modifying the user agent within the method IsMetaweblogAPIPost.

The reason I didn’t write this as a WLW plugin is that it’s not yet possible to hook into pipeline and rewrite content just before WLW posts it to the blog. That may be coming in the future though, according to this comment by Joe Cheng of the WLW team.

Download and Use It

You can download the code here (binaries are included in the bin dir) in a project called HtmlScrubber. I simply added this HttpModule to the same code as the WLW Crap Cleaner module mentioned earlier. To use it simply add the following to your web.config.

<httpModules>
  <add type="HtmlScrubber.CoralCDNModule, HtmlScrubber" 
    name="CoralCDNModule" />
</httpModules>

This filter works by looking at the file extension of a referenced file. If you’d like to change the list of extensions, you can add the following configuration.

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <configSections>
    <section name="CoralCDNConfigSection" 
      type="HtmlScrubber.CoralCDNConfigSection, HtmlScrubber" 
      allowDefinition="Everywhere" 
      allowLocation="true" />
  </configSections>
  
  <CoralCDNConfigSection 
    extensions="mpg,mp3,mpeg,wmv,avi,zip" />
</configuration>

The list of extensions shown are the default, so you don’t need to add this configuration section unless you want to change that list. Please enjoy and let me know if you put this to good use. Hope this makes your blog faster than mine.

As for me, I’m moving on to looking into using JSMin, JSLint, and merging CSS files etc…

Technorati tags: WLW, Windows Live Writer, YSlow, Firebug, Performance, Web Development

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

22 responses

  1. Avatar for Mads Kristensen
    Mads Kristensen August 13th, 2007

    That's one cool service that one. Do you know if you can control the HTTP headers from the files served by Coral? YSlow still compains about the ETag end expires header from those files.

  2. Avatar for Simone Chiaretta
    Simone Chiaretta August 13th, 2007

    The biggest concerns from YSlow are the gzip, Expires headers and ETags, which are valued 11, while the CSS, and other stuff are valued a lot less.

  3. Avatar for Rush
    Rush August 13th, 2007

    What if your site is small and it isn't so obvious that using a CDN would help. How would you go about testing it? It's not like I can fly to China to see if the CDN makes a difference.

  4. Avatar for Sergio
    Sergio August 13th, 2007

    Funny, but I as type this is your site is at least 10 times slower than it used to be. Maybe it's just lack of proper DNS propagation for now. I see a lot of "looking up haacked.com.nyud.net" on my browser's status bar.

  5. Avatar for Steven Harman
    Steven Harman August 13th, 2007

    I agree with Sergio - your site suddenly came to a crawl yesterday when I was here looking up and old post. It was likely due to the Coral changes you had made and all of that re-caching, DNS lookups, etc... that go along with it. At any rate, haacked.com seems to be back up to speed now.

  6. Avatar for Rush
    Rush August 13th, 2007

    Playing around with Coral CDN it seems to have slowed my site down. I also am finding that for external css and js files that it would be better to host it from my site since Coral does not gzip these files and my site can. This pulls down my YSlow score considerably but my site loads faster. They should take this into account when grading :( I am guessing the bigger CDN's can gzip files and are faster.

  7. Avatar for Simone Chiaretta
    Simone Chiaretta August 13th, 2007

    A cheap and very effective CDN is Amazon A3. I estimated that will be less than 1$ per month with my traffic which is around 5Gb/month.

  8. Avatar for Josh Stodola
    Josh Stodola August 13th, 2007

    [offtopic]
    Phil, your site looks horrible becuase no images are showing up (except advertisements and gravatars). It was doing this yesterday also. What's the deal?
    [/offtopic]

  9. Avatar for JF
    JF August 13th, 2007

    Same as Josh here...bunch of stuff doesn't load for me. Orange/brown on black is very hard to read :P

  10. Avatar for JF
    JF August 13th, 2007

    Same as Josh here...bunch of stuff doesn't load for me. Orange/brown on black is very hard to read :P

  11. Avatar for Haacked
    Haacked August 13th, 2007

    Hmmm... it takes a while for the images to get cached on the first hit. But after that they should load in snappy.
    @JF, @Josh: Is it still a problem?

  12. Avatar for Haacked
    Haacked August 13th, 2007

    Mea Culpa! I posted an update message on this site. I'll change the code to allow configuring a CDN so you could use it for Amazon S3.

  13. Avatar for Jon Galloway
    Jon Galloway August 13th, 2007

    The information on the Coral CDN page seems to indicate that their goal isn't to speed up your site, but to safeguard against traffic spikes (a.k.a the Slashdot or Digg effect).
    I'd say this is handy to have configured and in use on larger media files (avi, mpeg, zip), and to have the option of adding image filetypes if you get a traffic spike.

  14. Avatar for Jeff Atwood
    Jeff Atwood August 13th, 2007

    Way to research the topic before posting, Haaaaaaack. :P

  15. Avatar for Haacked
    Haacked August 14th, 2007

    Thanks Jeff! Hey, I salvaged it by changing the extensions. ;) Also, the principle works well if I replace Coral with Amazon S3.

  16. Avatar for DuncS
    DuncS August 14th, 2007
  17. Avatar for Haacked
    Haacked August 14th, 2007

    @DuncS - Doh! I was switching my content to not use .nyud.net and accidentally replaced that one.

  18. Avatar for Jeff Atwood
    Jeff Atwood August 14th, 2007

    > Also, the principle works well if I replace Coral with Amazon S3.
    Actually, it doesn't, because S3 now charges not only per megabyte but PER REQUEST. 10 resources per page, that's 10 requests.. the breakeven point is about 50 kilobytes according to one analysis I saw. Anything below that, you'll get some pretty outrageous charges on your S3 account.
    Well, if you get a lot of pageviews.. but if you don't, none of this caching stuff matters anyhow.

  19. Avatar for Haacked
    Haacked August 14th, 2007

    Hmmm. Ok, I cede the point. I didn't do my research. I'll change the focus of this post to simply reduce bandwidth usage for large files when I get a moment.

  20. Avatar for engtech
    engtech August 16th, 2007

    http://pstam.com usually does some pretty in depth looks at speed optimization for blogs.
    You could probably still do well with S3 and image sprites, since you can reduce all your website graphics to 1 file.
    http://paulstamatiou.com/20...
    http://paulstamatiou.com/20...
    http://paulstamatiou.com/20...

  21. Avatar for Luke
    Luke August 16th, 2007

    Oh shit! I have the exact same post queued up to appear on Monday on my blog. LOL You beat me to it man.

  22. Avatar for Mandeep
    Mandeep July 7th, 2008

    Hi,
    I was getting a score of 68 yesterday, I added the expires tag,removed the etags and added my domain cdn to firefox preferneces. I m getting a B with score of 88 now.....But still, it shows an F for CDN and ETAGS.........though now its only the for the images which I am fetchign from PHOTOBUCKET on to my web page.
    I tried adding the domain, www.photobucket.com in the preferences. But it doesnt help and the score and grade for CDN and ETAGS remains the same.
    Any Suggestions please !!
    Thanks in Advance !!
    Mandeep