High Performance Web Sites: Essential Knowledge for Front-End Engineers

High Performance Web Sites: Essential Knowledge for Front-End Engineers

Steve Souders

Language: English

Pages: 170

ISBN: 0596529309

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.

The rules in High Performance Web Sites explain how you can optimize the performance of the Ajax, CSS, JavaScript, Flash, and images that you've already built into your site -- adjustments that are critical for any rich web application. Other sources of information pay a lot of attention to tuning web servers, databases, and hardware, but the bulk of display time is taken up on the browser side and by the communication between server and browser. High Performance Web Sites covers every aspect of that process.

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
  • Make JavaScript and CSS External
  • Reduce DNS Lookups
  • Minify JavaScript
  • 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

Oh My JS: The Best JavaScript Articles

On Computing: The Fourth Great Scientific Domain

Content is Currency: Developing Powerful Content for Web and Mobile

Nagios Core Administration Cookbook

Linux Voice [UK], Issue 24 (March 2016)





















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

Download sample