Extreme HTML Optimization: The Future and Conclusion | WebReference

Extreme HTML Optimization: The Future and Conclusion

123456789

Extreme HTML Optimization

CSS2 Positioning

To get really radical reductions in page size and boost display speed, you've got to literally think outside the box (read table). Using CSS2 positioning (supported by nearly 90% of current browsers), you can achieve the holy grail of separation of presentation from content, and speed up your Web site in the process. CSS2 uses style sheets to position DIVs etc. within your page, and can create table-like displays, without the messy and byte-hungry table skeleton. You can even move up the most important content (what users look for first anyway) to the top of your style sheet, to display it first. See HTML with Style and A List Apart for live examples of table-like layout, without tables.

We're working towards a CSS2 version of the home page, but have yet to make our complex layout work. If you've got a CSS2 solution, let us know, and we'll mention your name in the next update.

HTTP1.1

Ask your IT department to upgrade your server to HTTP1.1, and you'll see a dramatic improvement in page display speed. HTTP1.1 uses pipelining, and persistent connections to streamline the multiobject page display typical on the Web today. HTTP1.1 is even faster than HTTP1.0 keep-alive. HTTP1.1 can also employ zip compression of the body of your pages (typically a three-fold reduction in page size), for browsers that support this. The Net effect is less packets sent, one TCP connection rather than many (avoiding the slow-start syndrome and overhead), and a dramatic increase in speed. See the W3C's site for more details.

Conclusion

By following these techniques you can dramatically speed up your page display and decrease your bail-out rate, and boost your bottom line. This is especially important for home pages, which should display lightning fast. We were able to reduce our hand-optimized front page HTML from 25 KB to 18.7 KB (15.8K without the flipper). This is after we added back in the necessary quotes and inline FORMs so the page validated (extreme invalid HTML version got down to 13.xK). The total page size including images is about 35846 bytes, according to websitegarage.com. This includes a 3K JavaScript news flipper (which I hand-optimized) that loads *after* the page displays, three internet.com toolbars, and two 10K+ ads. Try it yourself at https://www.webreference.com.

Footnotes

(1) With the average network bandwidth of 5 KBps and the majority of Net users connect and 56 Kbpbs (until at least 2003) that works out to about 34-40 KB/page. (5KBps X 8 seconds = 40KB, but more it realistically a 56 Kbps modem gives about 2.4-3 KBps effective transfer rate which means 3KBps X 10 seconds = 30KB maximum page size. Jakob Nielsen recommends a maximum of 34KB/page, which includes latency). See useit.com for details.

(2) Bailout rate (the percentage of users who don't wait for your page to download) decreases were documented by both Zona research, and Jakob Nielsen for pages that displayed less than 8-10 seconds. Home pages larger than 40-50K had bailout rates of 25-30%, when reduced to less than 34K the bailout rates dropped to 7-10%.

Further Reading

Offsite Resources

123456789

https://www.internet.com
Comments are welcome
Created: Jan. 10, 2000
Revised: Jan. 22, 2003
https://webreference.com/authoring/languages/html/optimize/part3.html