Web Page Optimization Chapter 6

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.

• Web Page Optimization
  • Common Web Page Problems
    • Oust Oodles of Objects
    • Untangle Tables
    • Optimize Overweight Graphics
      • The cost of banner advertising
    • The Growth of Multimedia
      • Figure 6-1. Growth in the duration of web videos
  • How to Optimize Your Web Page Speed
    • Switch to Semantic Markup
      • High Performance Web Site Tips (sidebar)
      • Code: Semantic Markup
      • Use container cells for descendant selectors
        • Code: Use Container Cells
    • Step 1: Minimize HTTP Requests
      • Convert graphical text to styled text
        • Code: Convert graphic text
        • Use text overlays
      • Convert spacer cells to CSS margins or padding 
        • Code: Convert spacer cells
      • Combine remaining images and map or sprite
        • Figure 6-2 + Code. A tale of two images = two requests
      • Combine and optimize CSS and JavaScript files
        • Code: Combine JavaScript and CSS Files
        • Suture CSS or JavaScript files
          • Code: Suturing CSS files together
        • Caching dynamic files
          • Code: Caching dynamic CSS files
        • Put CSS at the top, JavaScript at the bottom
      • Eliminate (i)frames and JavaScript includes
        • Figure 6-3. SSI inserted banner ad eliminates JavaScript includes
    • Step 2: Resize and Optimize Images
      • Figure 6-4. Image file size versus format
    • Step 3: Optimize Multimedia
      • Optimizing videos for the Web
        • Video frame rates and dimensions
        • Video production tips: Minimize noise and movement
        • Editing your video
        • Compressing videos for the Web
          • Figure 6-5. Episode Pro optimizing a video
          • Figure 6-7. QuickTime Pro standard video compression settings
          • Figure 6-8. Temporal compression slider
        • Closing credits
      • Flash Optimization Tips
        • Figure 6-9. Creating a Flash motion tween
    • Step 4: Convert JavaScript Behavior to CSS
    • Step 5: Use Server-Side Sniffing
      • Sniffing with BrowserHawk
        • Code: Sniffing with BrowserHawk
        • Figure 6-10. The BrowserHawk home page, which sniffs your browser environment variables
      • XSSI browser sniffing
        • Code: XSSI browser sniffing
    • Step 6: Optimize JavaScript for Execution Speed and File Size
    • Step 7: Convert Table Layout to CSS Layout
      • Figure 6-11. BrowserCam.com renders web pages on different browsers
      • CSS page layout
    • Step 8: Replace Inline Style with CSS Rules
      • Code: Replace inline style with CSS rules
    • Step 9: Minimize Initial Display Time
      • Figure 6-12. Weather Underground loads useful content first
      • Figure 6-13. QuickTime Pro Fast Start movie
    • Step 10: Load JavaScript Wisely
      • The perils of third-party widgets
        • Give your widgets a WEDJE
          • Code: Giving widgets a WEDJE
  • Summary

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 https://v2. 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.