Table^11

Last October I blogged about one of the Singapore sites has a deep HTML <table> hierarchy (10 levels deep).

Today's Digital Life (a weekly supplement from The Straits Times) featured an article on page 11 that caught my attention. The title is "Slow Loading Speeds, Unstable Site Irk Sistic Users". After visited their home page and analysed it with YSlow for Firebug under Firefox and IBM Page Detailer, I am suprised how inefficient the HTML code is.

By running the same code that I posted previously, I realised that the Sistic site has a 11 level deep table hierarchy!!.

Couple of ineffiencies that I spotted:

• 60+KB of white space in the home page (a simple one-liner can remove all these)
• bullet lists are rendered using table and &#8226; as a dot (a css apply on a <ul> can do the job: 'list-style-type: disc' or 'list-style-image: url()')
• images generated via a HTTP GET with query string (IMO, these are static images that can be linked directly to the source)
• No expires HTTP header for images
• lots of commented HTML code
• images supposed to be JPEG but got the image/gif content-type
• lots and lots of <table>

Simple recommendations can help to ease the load on the server and this equates to better user experience

• use a separate URL host (can be the same host as the main site) to serve static content(eg, http://i.sistic.com.sg/). This will help to parallelise the download, default setting in browser is two connections per server host name (see YSlow rules for details)
• convert all image URLs (HTTP GET + query string) to static links and have them served from the above mentioned host
• develop a simple script to remove all comments & white space in the HTML page before uploading it to the production server.

If you have more times to spare, you should consider this:

• convert all the <table> to <div>
• use CSS to control the paddings and borders, not using <table> !!

BTW, IBM Page Detailer is an extremely useful tool to profile your HTML page loading time. It is not like other profiling tools that work as a HTTP proxy to capture all the web activities. As mentioned in the IBM Page Detailer page, ... "places a probe in the client's Windows Socket Stack to capture data about timing, size, and data flow, and then it presents the collected data in both graphical and tabular views, clearly showing how the page was delivered to the browser." See below screen capture.