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.
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 • 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.
- 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.