High Performance Web Sites: Essential Knowledge for Front-End Engineers
Format: PDF / Kindle (mobi) / ePub
Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web. Even sites that had already been highly optimized, such as Yahoo! Search and the Yahoo! Front Page, were able to benefit from these surprisingly simple performance guidelines.
Each performance rule is supported by specific examples, and code snippets are available on the book's companion web site. The rules include how to:
- Make Fewer HTTP Requests
- Use a Content Delivery Network
- Add an Expires Header
- Gzip Components
- Put Stylesheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Reduce DNS Lookups
- Avoid Redirects
- Remove Duplicates Scripts
- Configure ETags
- Make Ajax Cacheable
If you're building pages for high traffic destinations and want to optimize the experience of users visiting your site, this book is indispensable.
"If everyone would implement just 20% of Steve's guidelines, the Web would be adramatically better place. Between this book and Steve's YSlow extension, there's reallyno excuse for having a sluggish web site anymore."
-Joe Hewitt, Developer of Firebug debugger and Mozilla's DOM Inspector
"Steve Souders has done a fantastic job of distilling a massive, semi-arcane art down to a set of concise, actionable, pragmatic engineering steps that will change the world of web performance."
-Eric Lawrence, Developer of the Fiddler Web Debugger, Microsoft Corporation
concern. Compress your content and use Vary: Accept-Encoding. This improves the user experience by reducing the size of components and leveraging proxy caches. • If you’re watching bandwidth costs closely, do the same as in the previous case: compress your content and use Vary: Accept-Encoding. This reduces the bandwidth costs from your servers and increases the number of requests handled by proxies. • If you have a large, diverse audience, can afford higher bandwidth costs, and have a reputation
would behave in the pattern shown in Figure 6-2, with four components downloaded in parallel (two per hostname). Tto give a visual cue as to how much faster this page loads, the horizontal width of the box is the same as in Figure 6-1. Limiting parallel downloads to two per hostname is a guideline. By default, both Internet Explorer and Firefox follow the guideline, but users can override this default behavior. Internet Explorer stores the value in the Registry Editor.* You can modify this
the download statistics, is an increase in page weight and HTTP requests, resulting in a slower user experience. Also, internationalization is more challenging, as each translation requires a new set of images. Rule 1 tells us that reducing the number of components is the most important step to faster performance. Replacing these images with text would yield the biggest performance improvement for this page. Similarly, there are 16 images used for CSS backgrounds. If these were combined into a
67, 68 MSN, 124 MySpace, 128 reducing, 68 Dojo Compressor, 70 size reductions after gzip compression, 74 size reductions using, 71 Domain Name System (see DNS; DNS lookups) downloads parallel, 46–48 cost, 47 limiting, 46 scripts blocking, 48 Duplicate Scripts—10 Cached (example), 87 Duplicate Scripts—Cached (example), 86 Duplicate Scripts—Not Cached (example), 86 Dynamic Inlining (example), 61 E eBay DNS lookups, 117 ETags, 117 Expires header, 117 HTTP requests, 117 IFrames, 117 images, 117
To use CSS sprites, multiple images are combined into a single image, similar to the one shown in Figure 1-2. This is the “Ouija board.” CSS Sprites | 11 Figure 1-2. CSS sprites combine multiple images into a single image The “planchette” is any HTML element that supports background images, such as a SPAN or DIV. The HTML element is positioned over the desired part of the background image using the CSS background-position property. For example, you can use the “My” icon for an element’s