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



















world of web performance.” — Eric Lawrence, Developer of the Fiddler Web Debugger, Microsoft Corporation “As the stress and performance test lead for Zillow.com, I have been talking to all of the developers and operations folks to get them on board with the rules Steve outlined in this book, and they all ask how they can get a hold of this book. I think this should be a mandatory read for all new UE developers and performance engineers here.” — Nate Moch, www.zillow.com “High Performance Web

Usage of Expires and max-age Web site Expires max-age ✓ ✓ http://www.ebay.com ✓ ✓ http://www.google.com ✓ http://www.msn.com ✓ ✓ http://www.wikipedia.org ✓ ✓ http://www.yahoo.com ✓ ✓ http://www.amazon.com http://www.aol.com http://www.cnn.com ✓ http://www.myspace.com http://www.youtube.com Empty Cache vs. Primed Cache Using a far future Expires header affects page views only after a user has already visited your site. It has no effect on the number of HTTP requests when a

http://stevesouders.com/hpws/move-scripts.php Deferred Scripts (Chapter 6) http://stevesouders.com/hpws/js-defer.php Expression Counter (Chapter 7) http://stevesouders.com/hpws/expression-counter.php xvi | Preface One-Time Expressions (Chapter 7) http://stevesouders.com/hpws/onetime-expressions.php Event Handler (Chapter 7) http://stevesouders.com/hpws/event-handler.php Inlined JS and CSS (Chapter 8) http://stevesouders.com/hpws/inlined.php External JS and CSS (Chapter 8)

grade is a weighted average of each rule’s score. YSlow provides other tools as well, including a summary of the page’s components and an analysis of all the JavaScript in the page using JSLint (http://jslint.com). Figure 15-3. YSlow 106 | Chapter 15: Deconstructing 10 Top Sites Amazon YSlow grade Page weight HTTP requests Response time D 405K 84 15.9 sec Figure 15-4. http://www.amazon.com Amazon (http://www.amazon.com) is a relatively heavy page with a total page weight of 405K and 84

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

Download sample