Wednesday, January 21, 2009

The whitehouse.gov site rearchitected in ASP.NET 2.0 and launched on Barack Obama's inauguration

Yesterday was an historic day for the US and the world. Politics aside, it's great to see an African American get sworn in as president. I lived in rural Kentucky for a couple of years as a child, and not all of my neighbors were enlightened enough to think that having a black president would even be possible.

He's bringing some big changes with him. Within hours of Obama's inauguration, he requested a halt to military trials at the Guantanamo detention camp, and he is expected to discuss plans for an $825 billion (USD) rescue economic package.

From an IT side, some interesting changes are coming as as well. Julius Genachowski is starting his reign as technology czar, and whitehouse.gov was re-architeced in .Net.

Here are some of the specifications, courtesy dotnetperls:

The whitehouse.gov site uses IIS 6.0. Its HTTP headers include the key/value pair "Server: Microsoft-IIS/6.0". The site does not use the latest software from Microsoft, IIS/7.

The whitehouse.gov site uses ASP.NET 2.0. The HTTP header that identifies the software says "X-Aspnet-Version: 2.0.50727". There is a way for this header to be removed, which saves about 30 bytes of bandwidth on every response.

The whitehouse.gov site uses JQuery 1.2.6. The JQuery JavaScript, in its minified form, is present in the /includes/ directory. Many developers use the JQuery from Google's servers for improved performance and lower latency. This could improve the site's performance.

The whitehouse.gov site uses GZIP compression. All text content from the site is compressed with GZIP, which improves performance significantly.Uncompressed page: 48218 bytes

Compressed page: 8370 bytes
Savings: ~80%

The whitehouse.gov site uses Vary: Accept-Encoding. The Vary: Accept-Encoding HTTP header is a way to force proxies not to server GZIP content to agents that cannot decode it.

The whitehouse.gov site uses Cache-Control: private and max-age. It uses the value "max-age=85895", which is about 1 day. Therefore, the html pages should be cached for 1 day on your local computer.

The whitehouse.gov site uses Web Trends Live tracking. WebTrends states that it is a "leading provider of web analytics and consumer-centric marketing intelligence solutions." [webtrendslive.com]

The whitehouse.gov site uses the meta keywords tag. This is odd as very few people on the Internet who visit this site will need to reminded what it is about. The meta tag states:

[meta content="President, Barack Obama, White House, United States of America, 44th President, White House history, President Obama, Barck, Barek, Barak, Barrack, Barrak, Obma, Barack" name="keywords"]
This won't do much for improving the Google PageRank of whitehouse.gov. I think searches for Barack Obama will likely reach this site in any case.

The whitehouse.gov site uses ViewState. This is a hidden form that allows the site to store server-side data on the browsers. ASP.NET automatically decodes the ViewState sent by the browsers. It is not meant to be decoded by the browser.

The whitehouse.gov site uses WebResource.axd. This is a script file that is generated by ASP.NET. These cannot usually be cached efficiently and I have found them to degrade performance.

The whitehouse.gov site has lots of whitespace characters. These are not wasteful if you have GZIP compression enabled on your browser, but the site is likely 20% or more larger than it needs to be if these were removed.

The whitehouse.gov site has comment tags. The site uses lots of HTML comments to mark parts of the page. These could be more efficiently written as server-side comments and compiled out of the page.

The whitehouse.gov site has long ASP.NET IDs. There are many elements on the page that have very long IDs, which are mainly a waste of bandwidth usually. They could be easily removed on the server.

The whitehouse.gov site uses more GIFs than PNGs. The site uses far more GIF images than PNG images. PNG images can be optimized further, reducing bandwidth and costs. Two animated GIFs are used.

The whitehouse.gov site uses 5 stylesheets and 12 JavaScripts. The site could be much faster and lighter if it combined all of these into two files. This measurement is from one visit to the front page. Strangely, there is an admin stylesheet loaded. [First 3 lines shown]/* admin styles */
/* cms */
.adminNavigation {width:996px; position:relative; z-index:100;}

The whitehouse.gov site uses heavy JPG compression. The images look good if you don't look too closely or don't have good eyesight. The developers applied a heavy amount of compression to the JPGs. The image shown here has been enlarged and slightly recompressed.

The whitehouse.gov site uses image sprites. This is a boost to the site's efficiency, as it combines several small images into one. This is an advanced technique that is somewhat involved to implement. The sprite image is "nav-sprite.png".

The whitehouse.gov site uses Packer. Dean Edward's Packer is a utility that encodes a JavaScript file into a compressed format. The JavaScript, when downloaded, automatically unpacks itself. This is a poor optimization, as JavaScript files minimized with YUI Compressor will be smaller after GZIP compression often. [See jquery-plugins.js]eval(function(p,a,c,k,e,d)...
The decision to use Packer was likely not made by someone with a high understanding of GZIP compression or compression technologies. The byte size of the uncompressed file is smaller, but this causes the final download to be bigger. [http://dean.edwards.name/packer/]

The whitehouse.gov has a page weight of 821 KB and loaded in 1.58 seconds on my cable modem. This is around average for new and graphically-oriented sites.Load time: 1.58 seconds
Total size: 821 KB

The whitehouse.gov site has several hidden links. In the source files, mostly JavaScript, there are at least 6 embedded links. Therefore, these lucky people get the privilege of being linked from the White House.

http://www.youngpup.net/

http://sorgalla.com/jcarousel/

http://billwscott.com/carousel/

http://www.codylindley.com/

The whitehouse.gov site uses a non-transparent favicon.ico

(hat tip: slashdot)

UPDATE: Also on slashdot this morning, Obama is looking at open source.

1 comment:

  1. that's cool! .Net is really the way to go for web sites like this. Ruby / Python / PHP on the LAMP stack doesn't scale easily, and the JEE web stack is too far behind.

    ReplyDelete