Web Page Optimization Chapter 6

Web page optimization streamlines your content to maximize display speed. Fast display speed is the key to success with your website. It increases profits, decreases costs, and improves customer satisfaction (not to mention search engine rankings, accessibility and maintainability).

Streamlining transforms your pages to display navigable content faster, and to defer or delay off-site content. In this chapter, you'll learn how to reduce HTTP requests, convert to semantic markup to more easily style with Cascading Style Sheets (CSS), optimize graphics and multimedia, and to defer or delay the loading of off-site content.

To maximize display speed you can employ the following 10 techniques:

  • Minimize HTTP requests.
  • Resize and optimize images.
  • Optimize multimedia.
  • Convert JavaScript behavior to CSS.
  • Use server-side sniffing.
  • Optimize JavaScript for execution speed and file size.
  • Convert table layout to CSS layout.
  • Replace inline style with CSS rules.
  • Minimize initial display time.
  • Load JavaScript wisely.

Using the best practices in this chapter you'll transform your HTML and multimedia to give your site more hurtle and less turtle. First, let's explore some common web page problems and trends that confront web performance engineers. An outline of the chapter follows.

Footnotes

Chung, S. 2007. "The investigation and classifying the web traffic delay & Solution plans presentation."
In ICACT2007 2 (February 12-14, 2007): 1158-1161.
In a July 2007 random survey of 500 pages indexed by Binghamton University's Ryan Levering for this book,
62.6% of pages used the table tag and 85.1% used the div tag. Tables nested to an average maximum depth of 1.47, with an average number of 12.57 table tags per page. The average maximum HTML depth was 15.35, demonstrating how divs have replaced table nesting. The data for this web survey is available at http://www. websiteoptimization.com/secrets/web-page/survey.xls.
Levering, R., and M. Cutler. 2006. "The Portrait of a Common HTML Web Page."
In DocEng '06 (Amsterdam, The Netherlands: October 10-13, 2006), 200. Tables nested to an average maximum depth of 2.95.
According to Levering's 2007 survey,
the average total image size was 118,683 bytes. The average total page size was 218,937 bytes, and 266,070 uncompressed. Thus, images make up at least 54.2% of the average web page.
Levering and Cutler. "The Portrait of a Common HTML Web Page,"
200. More than 60% of the area above the fold is used for graphics in the average web page.
Krishnamurthy, B., and C. Wills. 2006. "Cat and Mouse: Content Delivery Tradeoffs in Web Access."
In WWW 2006 (Edinburgh, Scotland: May 23-26, 2006), 337-346.
Ibid,
346.
Acharya, S., and B. Smith. 1998. "An Experiment to Characterize Videos Stored On the Web.
In MMCN 1998 (San Jose, CA: January 1998), 166-178.
Li, M. et al. 2005. "Characteristics of Streaming Media Stored on the Web."
ACM Transactions on Internet Technology 5 (4): 601-626.
Gill, P. et al. 2007. "YouTube Traffic Characterization: A View From the Edge."
In IMC 2007 (San Diego: October 24-26, 2007), 15-28. About 24% of videos are interrupted because of poor performance or poor content quality.
Guo, L. et al. 2005. "Analysis of Multimedia Workloads with Implications for Internet Streaming."
In WWW 2005 (Chiba, Japan: May 10-14, 2005), 519-528.
Gill, P. et al. "YouTube Traffic Characterization,"
20.
Levering's 2007 survey
concluded that 32.8% used the font tag and only 58.5% used the h1 tag.
Levering's 2007 survey
found that most frames are iframes (found in 51.2% of web pages), whereas only 0.8% are frames. Note that some dynamically created frames were not counted in this survey, so these figures will be higher.
Gulliver, S., and G. Ghinea. 2006. "Defining User Perception of Distributed Multimedia Quality."
ACM Transactions on Multimedia Computing, Communications and Applications 2 (4): 241-257.
The :hover behavior hack
is a JScript behavior used to add the :hover pseudoclass to elements other than the anchor element in Internet Explorer 5 through 7, which do not properly support the :hover pseudoclass on all elements.
According to Jeffrey Zeldman's Designing with Web Standards /dt>
(New Riders), converting to CSS layout typically saves from 25% to 50% off XHTML file size, and a net savings overall. We've found similar results in our conversions.
Dellaert, B., and B. Kahn. 1999. "How Tolerable is Delay? Consumers' Evaluations of Internet Web Sites after Waiting."
Journal of Interactive Marketing 13 (1): 41-54.

« Web Performance Optimization | Web Page Optimization | CSS Optimization »