WebsiteOptimization.com was designed by the author in 2002, in the age of slower dial-up modems. The design was starting to show its age, so we’ve been quietly working on a redesign to improve the look and conversion rate. This article shows how we redesigned the site, and some of the techniques we used to achieve our goals.
XHTML optimization
O’Reilly Books on Web Performance
There are a number of books published now on Web Performance. Here is a summary of the books available on the topic, mainly from O’Reilly.
Inline Images with Data URLs – embed graphics inline with data uri scheme
Inline images use the data URI scheme to embed images directly within web pages. As defined by RFC 2397, data URIs are designed to embed small data items as “immediate” data, as if they were referenced externally. Using inline images saves HTTP requests over externally referenced objects.
CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Now that the major browsers have evolved enough to support CSS backgrounds and positioning, more sites are adopting this performance technique. In fact, some of the busiest sites on the Web use CSS sprites to save HTTP requests. In this article we’ll expand on our mini-CSS sprite example (mono-image CSS rollovers) to show how Yahoo! and AOL use sprites to improve performance.
Highlight the Current Page with CSS: The Body ID/Class Method – css tutorial on auto-selection of current navigation
“Danger, Will Robinson!” For those that remember the TV show “Lost in Space,” these words often ring true in the sometimes confusing world of cyberspace. When users navigate through your site you can help avoid those fateful words with “you are here” waypoints. This article shows how to automatically highlight menu items that correspond to the current page using CSS and XHTML. Using CSS avoids the need for complex JavaScript or PHP/JSP scripting which simplifies maintenance and improves performance.
Combine Images to Save HTTP Requests – use imagemaps on combined images with ismap usemap tutorial
One byproduct of automated image-slicing software is the plethora of images now populating the Web. As early as 2002 (King 2003) the average web page had over 24 embedded objects, with over half the total page size consisting of images. Today when we analyze web pages we commonly see 50 to 60 images per web page. The more round trip server requests you require in your pages, the longer and more indeterminate your load time becomes. One way to reduce the number of HTTP requests is to combine adjacent images into one composite image and optionally imagemap the links to different areas. This tutorial shows both client and server side techniques you can use to save precious HTTP requests and speed up your site.
Accessible CSS Forms: Using CSS to Create a Two-Column Layout – replace tables with css layout form tutorial
In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible.
Bookend Lists: Using CSS to Float a Masthead – replace tables with css layout list tutorial
A common visual element in many websites is to position two blocks of content on either end of a navigation bar. The left block of content typically displays global navigational tabs or drop-down menus. The right shows today’s date or perhaps a simplified search form. This article shows how to create a “bookend” look with elements on either end of a box using CSS-styled lists. This CSS-layout technique saves a significant amount of HTML code over table-based techniques. Tests with working code yielded savings in page size ranging from 30% overall to over 73% for the HTML code alone.
Cut the Comments
Computer classes teach “structured programming” with well-commented code as one requirement of good programming practice. However, easily understood code doesn’t make for fast downloads on the Web. By cutting your comments you can shrink your XHTML, CSS, and JavaScript to download faster.
Size Images with Width and Height Attributes – image attributes width height
Most web pages use images to spice up their look. However, not all web pages use width and height to size their graphics and objects. Specifying the width and height of all embedded objects like images and applets allows your user’s browser to render your page without waiting for images to download and try on for size.