Andrew B. King

In: Interviews

By Craig Saila

Published on May 15, 2003

Digital Web: Web-page optimization used to be about making graphics smaller. What does it mean now?

Andrew B. King: It’s not just for graphics anymore. Web page optimization is about optimizing everything that goes into a Web page, including the text. In fact, text optimization is one of the most overlooked ways of speeding up Web sites. I see many a site with optimized graphics, but with HTML that is unoptimized, filled with comments, unused code, and whitespace. Compression can also be used to shrink the text (HTML, JavaScript, etc.) that you deliver to your impatient users.

Digital Web: What are some simple steps developers could do to improve the speed of their sites?

AK: The biggest thing would be to minimize the number of HTTP requests, or the number of objects in your page. This is especially important for external files referenced in the head of your HTML documents, as these must be downloaded before the body displays. There are a number of ways to do this, you can minimize or combine graphics, substitute CSS2-based techniques, and use SSI or “pre-merge” external files and news feeds into your high-traffic pages.

I like the trend towards CSS2-based menus, rather than conventional JavaScript/graphic rollover menus. These are much faster (all text), and save numerous server requests.

Switching to CSS to style your text is straightforward. Switching from tables to CSS layout is more involved, but as you can see from Wired.com, Cingular.com, and others the results can be worth it (25-50% smaller HTML foot/files/includes/print.css).

Digital Web: True, and in an ideal world, all of a site’s pages would be that thin, but given the choice between the fattest and the most popular pages, which should be targeted?

AK: The most popular pages on your site should be optimized first. Typically, that is your home page and gateway, or index, pages. Then I’d look in your log reports to see where the problem areas are and focus on those fat pages.

When I optimize a site, I do everything I can to make the home page pop. Many visitors only visit your home page, especially for a blog.

Digital Web: With more of those visitors accessing the Internet via high-speed connections, why is optimization important?

AK: While broadband certainly helps speed up page downloads, it doesn’t eliminate the problem. Complex page layouts, nested tables, numerous HTTP requests, and complex transactions can still slow down your site, even on a cable modem.

I worked with a west coast publisher whose cable modem clients were complaining about their slow pages. Complex tables and lots of HTTP requests were slowing page rendering to over one minute on our T1 line. Page complexity comes more into play at higher speeds.

Optimization and compression also save on bandwidth costs.

Digital Web: What is the minimum connection speed developers should target if they want to bring a page in under your recommended time of about eight-and-a-half seconds?

AK: I’d say 56Kbps, which works out to around 30K for total page size. Ideally, they’d target lower-bandwidth users, as about 13% of U.S. home users still use sub-56Kbps modems. See my Bandwidth Report for more details. Also, cell phones and wireless devices can be slow, but with Wi-Fi this is changing rapidly.

Digital Web: Do faster sites improve usability, and, if so, how?

AK: Speed plays a key role in usability. People tend to use responsive sites more, and return to use them again. Responsive sites are also more fun and forgiving. Make a mistake and you don’t have to wait for another slow page to load again. Faster sites encourage more exploration, more traffic, and ultimately more sales.

Users prefer faster response times and expect your site to respond in a timely manner. Violate that trust by responding slower than they expect and they become frustrated. Why they become frustrated has to do with limits in our short-term and working memories. As we surf, we make plans on what to do next and form solutions. Longer delays tax our memory limits and we start to make errors, get frustrated, and lose the flow. Responsive sites don’t get in the way.

There’s a large body of research that I summarize in the book on how speed affects usability, utility, and likability. Slow Web sites are perceived to be of lower quality, less trustworthy, and less credible. Given their druthers, users prefer faster Web sites, and they have little patience for slow ones.

Digital Web: Some tutorials on Web optimization suggest skipping optional close tags on elements. Does reducing the page size mean creating invalid pages?

AK: If you are designing for HTML, it is a perfectly valid technique to omit optional closing tags. However, XHTML requires these closing tags, and they also make the browser work less parsing your page. I lay out the two techniques in the book and let the reader decide which to choose. On the companion site, I’ve chosen to close my tags, in anticipation of the switch to XHTML.

Digital Web: CSS advocates like to say one of the great benefits of style sheets is that it reduces the need for page-bloating presentational mark-up. What are some ways to reduce the bloat in CSS files?

AK: I actually spend two chapters talking about how to optimize your CSS files. In short, be as abstract and global as you can with your rules. Grouping of selectors and declarations can save space, as well as using shorthand hex colors (#fc0 vs. #ffcc00) and properties. You can also use multiple classes to group common styles, such as in a menu highlighting an active or centered tab: <div class=”button active”>…</div>

Modern browsers also support shorthand properties (font, border, margin, padding, background, and list-style). So instead of (inside a style tag of course) font-size: 1.1em; font-family: arial,helvetica,sans-serif; etc., you can use: font:1.1em arial,helvetica,sans-serif;

Digital Web: Although the file size of JavaScript can be reduced, there’s only so many bytes that can be saved. What other techniques can be used to improve the speed of the scripts?

AK: File-size wise you can compress JavaScripts in the head of your HTML documents. Execution speed-wise there are any number of things you can do to speed execution. Stay away from DOM interaction as much as possible, I talk about editing and adding subtrees offline in Chapter /files/includes/10.css of my book. Then there’s the usual computer science approach of caching frequently used values, trading space for time by “defactoring” your code to unroll, flip, and otherwise contort loops for more speed. You can also reduce the strength of your expressions and loop conditions. I recently put up a live test page of some of these loop optimizations

Digital Web: Tools like ImageReady and Fireworks imply that slicing large images into smaller files will improve the load time—does it?

AK: For faster connections, yes. Multiple similar-sized images take advantage of browser multithreading (four is a good number), but for slower connections the effect is minimal. You are better off minimizing HTTP requests for slower connections.

Digital Web: What are some ways to improve the perceived speed of a site?

AK: Layer your tables or content to make something useful appear quickly while the rest of your page downloads. Give them something to look at, and preferably interact with (search box, nav bar) while your page loads. You can also use absolute positioning to display the content first, and position it earlier in your HTML for higher relevance.

Digital Web: What do you say to the Web site that’s done it all—it has clean code, uses server-side compression, and no superfluous multimedia?

AK: I say bravo. But there’s always room for improvement.

Digital Web: What about you? Now that Speed Up Your Site is out, what’s the next big project for you?

AK: Well, I do have some other book ideas in mind. But I’m taking a breather (if you can call it that) from book writing to work on the companion site and speed up the Web, one site at a time.

Related Topics: XHTML, Search Engine Optimization (SEO), Web Guru