Optimizing Web Sites

Lee Sutherland

The Key Point

In IA, ‘optimization’ refers to minimizing complexity to achieve faster download times

Speed is an important factor in usability Most research indicates an 8-12 second

attention span As it stands, HTML and CSS are the main topics

of review for this presentation Other important areas include JavaScript,

graphics, Server Side Includes, and compression

Optimization as Balance

Aesthetics vs. Functionality Size vs. Speed Variability according to context “The ideal web page is a finely tuned symphony

of one or more optimized components working in harmony” (King, 44)

Polyphonic Analogy

A Bach Fugue

Polyphonic Analogy

Bach to Web Sites

In the same way that a subject determines the skeleton of a fugue, html is the backbone for a website and should also be kept simple

Well-tempered HTML

Browsing Parser Modes HTTP Requests Whitespace Comments The Trouble with Tables I, II, III Shortening Links XHTML

Browser Parsing Modes

Stated or implied DTDs & mode ‘sniffing’ Browsers parse html either in a ‘Standards’ mode

or a ‘Quirks’ mode. Standard parsing uses a faster algorithm, but

coding is more strict Stricter DTDs make for slightly larger files sizes,

but this is worth it for XHTML compatibility

HTTP requests

Browsers send out an HTTP ‘GET’ request to servers

Each GET request brings back one object: a page, an image, JavaScript, etc.

Browsers can send out multiple requests at a time, but less means faster download times

Using Cascading Style Sheets can reduce the number of requests necessary

Whitespace

Spaces, indents, and returns are for human editing.

Browsers collapse whitespace into a single space, in effect ignoring any excess

One can reformat html with particular text editors if needed

Comments

For editing purposes, designers use comments indicating where updated information should be placed

This is a total waste of bandwith for the viewers of the page

The following is an example of “insanely huge HTML comments” at www.nydailynews.com

Comments, cont.

Reduce comments to abbreviations, or put them into another document entirely

Embed a comment label into an element id: <table id=ulhbar>

Instead of: <!-- Upper Left Horizontal Bar>

The Trouble with Tables, I

Tables require dynamic algorithms to calculate proportions.

The more nesting, the longer the rendering time Specifying table dimensions takes the burden off

of the browser and allows it to display tables incrementally

Ex: <colgroup><col width=“50%”><col width=“50%”>

</colgroup>

Tables, II

With CSS2, there is ‘table-layout’ property which greatly increases rendering speed

“With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.” (http://www.w3.org/)

Some browsers don’t work well with this function yet

Tables III (Hello, sneakiness)

Common practice is to have one large table Instead, have a small table at the top Perceived speed- have a basic table appear at

the top of a page with navigation content to blind users to the fact that download time is long

Shortening Links

For high-traffic sites with many links, file size can be saved by using a URL redirect module

“mod_rewrite provides a rule-based rewriting engine to rewrite requested URLs on the fly.” (http://httpd.apache.org/)

Compare typical cnet link:http://www.cnet.com/2001-7377_1-0.html?tag=cnetfd.diWith typical Yahoo! Link:<a href=r/cr>Autos</a>

Virtues of XHTML

As far as optimization goes, there is less that can be done with XHTML, but the coding itself is beneficial: Structurally, stricter coding requirements of XML make

parsing faster Appearance is handled by style sheets, which are

generally smaller files than HTML by itself XHTML has high interoperability across browser

versions and platforms

Well-Tempered CSS

Consolidate external CSS Simple Selectors I, II Rollover

One mighty river

Multiple CSS files require more HTTP ‘GET’ requests

Fewer is preferable, one external CSS file would be the best case scenario

CSS files are easily cached, making navigation very fast if all the pages on the site link to the same style sheet

Insert the link element into the <head>:<link type="text/css" rel="stylesheet" href="style.css">

Selectors, I

In HTML, every element would have to be styled individually

In CSS, ‘selectors’ are used to match styles in patterns to the html document

To have selectors function most efficiently, it is best to use simple ones higher up in the html structure (ex. apply to ‘body’ or ‘h1’ elements)

Possible CSS Selectors

Selectors, II

Obviously, ‘*’ is the most universal ‘type selectors’ are also very powerful, as they

match elements of the html (H1, body, p, etc.) and can thus be applied broadly

Selectors can be grouped if they contain the same declaration:

h1 {color: red}h2 {color: red}

Becomes:h1, h2 {color: red}

Rollovers

Rollovers refer to the change of color or graphic when the mouse pointer is dragged over a link

This is usually done with images and JavaScript that consume bandwidth and increase download time. They can also load in clunky ways that nullify their purpose

CSS allows for lightweight rollovers that enhance usability while reducing rendering speed

Example Rollover

http://www.alistapart.com/stories/rollovers#

Useful links

Webpageanalyzer.com- this site will calculate download speeds and recommend optimizing techniques

Browser mode ‘sniffing’: http://www.mozilla.org/docs/web-developer/quirks/doctypes.html

References

Speed up your site: web site optimization. King, Andrew B. Indiana: New Riders Publishing, 2003.

http://www.holovaty.com/blog/archive/2002/07/18/0843 http://www.w3.org/TR/REC-CSS2/selector.html http://www.w3.org/TR/REC-CSS2/tables.html http://httpd.apache.org/docs/1.3/mod/mod_rewrite.html http://www.w3.org/MarkUp/Guide/Style http://www.alistapart.com/stories/rollovers#