Reduced code size probably accounts for 95% of the performance gains you see when jumping from an intricate table-based layout to a smart CSS design. When your source code is shedding kilobytes by the dozen, rendering speed and the like become academic issues.
A CSS layout and text-styling combo is invariably bound to create a smaller page than one laid out with deprecated <table> and <font> tags. That's because with CSS, you type fewer characters to create the file, so unsurprisingly, the user downloads fewer characters to get the file.
How big of a difference does this make in the end? That depends on a lot of variables, like how complex a particular page is, but it's probably worth a good 10K on average. Now, I use the rule of thumb that 2K of code represents one second of download/render/latency time, so we're talking roughly five seconds. Five whole seconds otherwise wasted staring slack-jawed at a computer screen. Remember, for that great majority of people surfing sober, five seconds can be a palpably dull period of time.
CSS helps webmasters determine the order in which page elements are downloaded and when they appear on the screen. This is fantastic for boosting a site's visual accessibility and perceived speed. For example, a news site can load the story element first, load decorative page elements next, and finally, load the advertisement, regardless of where these items appear on the page.
The user will still take note of a site's design quality, as well as the advertisement. What they won't notice, though, are frustrating delays in loading the page. Remember, if a user senses it's the sponsorships or fancy decorative elements that make a page sluggish, it's often the sponsors and the site's image which suffer most.
How do you prioritize what elements get loaded first with CSS? Just put it at the top of the source code, no matter where it's positioned on the page. Fisher-Price easy.
You don't need to go the whole Harley with CSS layout to reap the benefits. Simply using CSS styles on your text, in lieu of <font> tags, saves significant space. If you're reluctant to migrate a tried-and-tested table layout to CSS-positioning, but mellow with the idea of serving unstyled text to the odd out-of-date browser, give this method a test drive.
By the way, this CSS+tables compromise works best for pages with text content spread across many table cells. Since long-winded font tags (<font face="blah, blah, blah" size="blah">) must be repeated in every single table cell, the minimal notation of CSS styles gets leveraged to full effect. A simple "<p>" does the trick via CSS. Of course, try to use a sensible shorthand when naming CSS classes, and don't explicitly add class attributes to tags if avoidable — why add more characters to your source code than necessary? Imagine those antiquated font declarations repeated thirty times and it's easy to imagine the space savings.
The Compromise Method
If you're still straddling the fence between CSS and tables and you have a minimal number of pages to manage, you might consider serving different page formats to different browsers via browser-detection and server-side scripting. Of course, this immediately doubles the amount of coding, testing, and debugging work that'll need doing, but it may be worthwhile on a small scale, such as on your site's homepage or a few heavily-trafficked pages.
Home
