1. Optimizing Web Sites Lee Sutherland

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

3. 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)

4. Polyphonic Analogy A Bach Fugue

5. Polyphonic Analogy

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

7. Well-tempered HTML Browsing Parser Modes HTTP Requests Whitespace Comments The Trouble with Tables I, II, III Shortening Links XHTML

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

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

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

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

13. Comments, cont. Reduce comments to abbreviations, or put them into another document entirely Embed a comment label into an element id: Instead of:

14. 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:

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

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

17. 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/)http://httpd.apache.org/ Compare typical cnet link: http://www.cnet.com/2001-7377_1- 0.html?tag=cnetfd.di With typical Yahoo! Link: Autos

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

19. Well-Tempered CSS Consolidate external CSS Simple Selectors I, II Rollover

20. 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 :

21. 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)

22. Possible CSS Selectors

23. 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}

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

25. Example Rollover http://www.alistapart.com/stories/rollovers#

26. 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 http://www.mozilla.org/docs/web- developer/quirks/doctypes.html

27. 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#