A standard MSN homepage, part V: lessons learned
Posted Sep 18, 2004 at 11:57 PM
I thought it would be helpful to provide some performance-oriented comments and observations related to the journey I took from invalid to Strict and standard markup and style. I’ve touched on various performance considerations throughout these articles I’ve been writing, but often in much more of a conceptual way. Going through this latest exercise with the MSN.com homepage gives me an opportunity to back up these concepts and recommendations with real pages and real statistics, and of course, I’m jumping at the chance to talk about them.
Markup
Overall page weight: with whitespace
Including white space in both cases (to make the files easy to read), the final XHTML 1.0 Transitional document weighs in at 127,704 bytes, while the final XHTML 1.0 Strict document weighs in at 29,491 bytes. That’s a savings of 77%, which is misleading because it turns out that the white space is significant.
Overall page weight: with whitespace removed
After removing white space in both cases (to make the files as small as possible), the final XHTML 1.0 Transitional document weighs in at 38,058 bytes, while the final XHTML 1.0 Strict document weighs in at 25,686 bytes, a savings in HTML of 33% over our Transitional implementation. This is simply remarkable, especially when we remember that this is savings is repeated with every request, since the markup is not cached by the client.
The following two tables outline the XHTML element and attribute usage for the Transitional and Strict pages, and I have created them to clearly illustrate where these savings have occurred.
Element usage
| XHTML Element | Transitional Count | Strict Count |
|---|---|---|
| a | 234 | 216 |
| b | 66 | 0 |
| base | 1 | 1 |
| body | 1 | 1 |
| br | 71 | 8 |
| caption | 0 | 1 |
| col | 0 | 3 |
| dd | 0 | 23 |
| div | 93 | 80 |
| dl | 0 | 4 |
| dt | 0 | 5 |
| em | 0 | 4 |
| form | 4 | 3 |
| h1 | 0 | 1 |
| h2 | 0 | 19 |
| h3 | 0 | 35 |
| h4 | 22 | 11 |
| h5 | 0 | 2 |
| head | 1 | 1 |
| hr | 2 | 0 |
| html | 1 | 1 |
| img | 45 | 8 |
| input | 9 | 7 |
| label | 3 | 3 |
| li | 82 | 180 |
| link | 2 | 1 |
| meta | 2 | 2 |
| ol | 0 | 1 |
| option | 7 | 7 |
| p | 0 | 1 |
| script | 4 | 2 |
| select | 1 | 1 |
| span | 5 | 12 |
| table | 43 | 1 |
| tbody | 0 | 1 |
| td | 139 | 9 |
| th | 0 | 3 |
| thead | 0 | 1 |
| title | 1 | 1 |
| tr | 69 | 4 |
| ul | 21 | 42 |
*Note: *I created this report by running an XSLT template for counting the tags directly against the XHTML document. One more benefit of validity.
Attribute usage
| XHTML Attribute | Transitional Count | Strict Count |
|---|---|---|
| abbr | 0 | 3 |
| accesskey | 3 | 0 |
| action | 4 | 3 |
| align | 10 | 0 |
| alt | 45 | 8 |
| bgcolor | 1 | 0 |
| border | 51 | 0 |
| cellpadding | 43 | 0 |
| cellspacing | 43 | 0 |
| class | 255 | 89 |
| colspan | 16 | 0 |
| content | 2 | 2 |
| for | 3 | 3 |
| headers | 0 | 9 |
| height | 27 | 8 |
| href | 237 | 218 |
| http-equiv | 2 | 2 |
| id | 10 | 92 |
| lang | 1 | 1 |
| maxlength | 4 | 3 |
| method | 4 | 3 |
| name | 7 | 5 |
| onclick | 2 | 1 |
| onsubmit | 1 | 1 |
| rel | 2 | 1 |
| rowspan | 5 | 0 |
| size | 4 | 3 |
| src | 47 | 10 |
| style | 4 | 1 |
| summary | 0 | 1 |
| target | 3 | 0 |
| title | 10 | 5 |
| type | 14 | 9 |
| valign | 57 | 0 |
| value | 13 | 12 |
| width | 67 | 8 |
| xml:lang | 1 | 1 |
*Note: *I created this report by running an XSLT template for counting the attributes directly against the XHTML document. One more benefit of validity.
Style
Overall stylesheet weight
Of course, we shifted a lot of our presentation from markup to style, so now let’s take a look at the stylesheets. With white space, the stylesheet served to the Transitional document weighs in at 16,388 bytes (11,830 bytes with white space removed), while the stylesheet served to the Strict document is only 16,460 bytes (a tiny 8,923 bytes with white space removed). So we get the same general look and feel of the page, with an increase in the CSS of less than 100 bytes (including whitespace) or a savings of 25% (with white space removed)!
Note: the above mentioned stylesheet is actually linked to the XHTML document via a small secondary CSS file that uses an import directive to get the actual stylesheet. We take this approach because it prevents extremely old browsers from seeing the stylesheet, and trying to apply the styles in an incomplete, buggy or unpredictable manner.
Stylesheet comparison
Stylesheets consist primarily of selectors and declarations. I thought it would be interesting to compare the Tranistional and Strict stylesheets along these lines. Here are the results of this comparison:
| Description | Transitional Count | Strict Count |
|---|---|---|
| Selectors | 258 | 131 |
| Declarations | 371 | 268 |
Note: I arrived at the number of selectors by counting the number of { characters in the stylesheet, and arrived at the number of declarations by counting the number of ; characters. If you see a problem with this approach, please let me know and I’ll update my findings.
So what’s really going on here? Well, the number of selectors went down as our historical reliance on tables for layout and classes for styling hooks disappeared. By using CSS for layout, and prefering id over class for styling hooks, our CSS becomes less complex and lighter in general. It’s also far easier to read and understand. The selectors themselves also got a lot shorter, since there’s less nested tags to walk through to target a specific part of the document.
Closing remarks
So with this Strict implementation, we get the following key benefits, compared to the Transitional implementation that closely mimicks the live MSN.com site today:
- A savings of 33% in HTML, repeated with every request for the document.
- A savings of 25% in CSS (for first-time requests to the stylesheet, since the CSS can be cached).
- Compatibility with tools that can automate the validity and compliance of our markup and style, greatly decreasing development and testing costs, while increasing product quality and minimizing the chance of regressing back to the heavy and invalid implementation in place today.
- One standard set of HTML and CSS to serve to all of today’s standard browsers without special cases or conditional code.
- An implementation consisting of modules of markup and sets of styles that transcend a single page and its current version or style. High reusability of these modules without the constraints inherent in such modules residing in table for layout driven pages.
- Greater accessibility compliance, including best-of-breed support for assistive technologies such as screen readers.
- Better search engine visibility, accuracy and efficiency; crawlers can much better understanding the semantic structure of the document.
- A simple and industry-supported approach for supporting extremely old browsers and alternate devices with all of core experience, without implementing costly special cases and conditional code.
- Enablement for future innovations made possible by now providing our document in valid XML that can be used as a data source by various technologies that can read and transform XML, such as XSLT.
About this page
This page contains a single post from Daniel Boerner's blog, of which Boot Camp + Windows Vista = no more Airport Extreme reboots is the latest post.
Are there more posts like this one?
Possibly. Within this blog, this post is categorized under work and webdev and it was posted on September 18, 2004. Those would be good places to start looking for related posts.
Next post (newer)
Previous post (older)
A standard MSN homepage, part IV: onwards to XHTML 1.0 Strict
This post is closed to new comments.