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.
- Use server-side sniffing.
- Convert table layout to CSS layout.
- Replace inline style with CSS rules.
- Minimize initial display time.
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
- 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
- Step 1: Minimize HTTP Requests
- Convert graphical text to styled text
- Convert spacer cells to CSS margins or padding
- Combine remaining images and map or sprite
- Step 2: Resize and Optimize Images
- 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
- Closing credits
- Flash Optimization Tips
- Step 5: Use Server-Side Sniffing
- Sniffing with BrowserHawk
- XSSI browser sniffing
- Step 7: Convert Table Layout to CSS Layout
- Step 8: Replace Inline Style with CSS Rules
- Step 9: Minimize Initial Display Time
- The perils of third-party widgets
- Give your widgets a WEDJE
- 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.
- 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
- 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.
- 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,"
- 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."
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
- Dellaert, B., and B. Kahn. 1999. "How Tolerable is Delay? Consumers' Evaluations of Internet Web Sites
- Journal of Interactive Marketing 13 (1): 41-54.
« Web Performance Optimization |
Web Page Optimization |
CSS Optimization »