[zz] High Performance Web Sites: The Importance of Front-End Performance
High Performance Web Sites: The Importance of Front-End Performance
March 20, 2007
Steve Souders is Yahoo!’s Chief Performance Yahoo!. This is one in a series of blogs describing the best practices he’s developed at Yahoo! for improving performance. This article is based on Chapter 1, The Importance of Front-End Performance from Steve’s forthcoming book High Performance Web Sites, published by O’Reilly.
In 2004, I started the Exceptional Performance group at Yahoo!. We’re a small team chartered to measure and improve the performance of Yahoo!’s products. Having worked as a back-end engineer most of my career, I approached this as I would a code optimization project – I profiled web performance to identify where there was the greatest opportunity for improvement. Since our goal is to improve the end-user experience, I measured response times in a browser over various bandwidth speeds. What I saw is illustrated in the following chart showing HTTP traffic for http://www.yahoo.com.
In the figure above, the first bar, labeled "html", is the initial request for the HTML document. In this case, only 5% of the end-user response time is spent fetching the HTML document. This result holds true for almost all web sites. In sampling the top ten U.S. websites, all but one spend less than 20% of the total response time getting the HTML document. The other 80+% of the time is spent dealing with what’s in the HTML document, namely, the front-end. That’s why the key to faster web sites is to focus on improving front-end performance.
There are three main reasons why front-end performance is the place to start.
- There is more potential for improvement by focusing on the front-end. Cutting it in half reduces response times by 40% or more, whereas cutting back-end performance in half results in less than a 10% reduction.
- Front-end improvements typically require less time and resources than back-end projects (redesigning application architecture and code, finding and optimizing critical code paths, adding or modifying hardware, distributing databases, etc.).
- Front-end performance tuning has been proven to work. Over fifty teams at Yahoo! have reduced their end-user response times by following our performance best practices, often by 25% or more.
Our performance golden rule is: optimize front-end performance first, that’s where 80% or more of the end-user response time is spent.