Yahoo! Developer Network Blog
« Previous | Main | Next »
March 20, 2007
High Performance Web Sites: The Importance of Front-End Performance
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.
Steve Souders
[Steve Souders is Yahoo!'s Chief Performance Yahoo!. This is one in a series of Best Practices for Speeding Up Your Web Site. This article is based on Steve's book High Performance Web Sites, published by O'Reilly.]
Posted at March 20, 2007 9:16 AM | Permalink
Comments
Everything old is new again! Actually really interesting though-- I think it's great to get back to the fundamentals, and even better to hear how much it can really help.
The book looks great, reading it on Safari now.
Posted by: Morgan at March 20, 2007 8:49 PM
Are we gonna get the rest of the book for free over here, or is this a teaser?
Posted by: Fahed at March 20, 2007 10:15 PM
I doubt we'll get the whole thing but I read as much as I could on Safari, and hopefully he won't mind me sharing the companion website, it has all 14 rules but not all have examples yet.
Still great. This is a must buy as soon as it's ready.
Posted by: Morgan at March 20, 2007 11:49 PM
The book looks great. I like it.
Posted by: C# at May 10, 2007 7:41 PM
Is there a tool that analyses how the browser downloads the different elements on the page and gives something like the chart you posted?
Posted by: Nick at May 21, 2007 7:48 PM
You can get charts like this from IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer
Posted by: Steve Souders at May 22, 2007 9:47 AM
I totally agree that reducing web page weight is a good idea. One thing to be aware of is that the user doesn't have to wait for all the files to load before the page is rendered. AFAIK the files are loaded in the order they are specified in the HTML doc, so once the HTML and CSS has loaded, the user will see the page with empty spaces where the images and swfs will be. That's why it seems odd on your graph that the stylesheet is loaded at the end.
Posted by: felix at May 25, 2007 10:53 AM
Not everyone puts their stylesheets in the head of the HTML document. They should, and that's the topic of Rule 5. In the example above, the stylesheet and script at the end are most likely downloaded via DHTML in the page's onload handler. Scripts also delay the rendering of pages, as shown in this example: http://stevesouders.com/examples/move-scripts.php
Posted by: Steve Souders at May 25, 2007 11:54 AM
Are you sure that the 'Use a CDN' item in the performance tab is working? I am using a CDN, and it's telling me that I'm not.
Posted by: Chris at July 31, 2007 7:34 AM
Fiddler2's new Timeline extension (http://www.fiddler2.com/Fiddler2/extensions.asp#Timeline) shows charts like this as well.
Posted by: EricLaw at August 14, 2007 1:59 PM
You can add your CDN to the YSlow configuration settings (see http://developer.yahoo.com/yslow/faq.html#faq_cdn).
Yes, Fiddler 2 has great HTTP request timeline charts.
Posted by: Steve Souders at August 20, 2007 2:19 PM
pingdom has a web-based tool to make these charts http://tools.pingdom.com/fpt
Posted by: Greg at September 27, 2007 12:17 AM
Steve Souders has done a great job putting together these recommendations, and I applaud his book, but am I the only one that thinks Yahoo! happens to have one of the slowest and most bloated page loads around? It's kind of disappointing to realize that they've already squeezed and optimized these pages and they are still slow loaders! The culprit is almost always fat flash files for ads and video. Nothing new here, but interestingly, I don't see flash files listed on the chart above. Perhap they are lumped in with images. While Yahoo! uses mostly open source (php, etc.) Flash is proprietary and Adobe has done next to nothing to open it up compared to other internet technologies - even compared to other proprietary tech. That seems to me to be the biggest opportunity for page load improvement - open up the flash tech so we can better manage it at the developer and user levels.
Posted by: Outtanames999 at October 18, 2007 9:03 AM
I'm all for making Yahoo!'s pages faster, but I will point out that across the ten top sites in the U.S., Yahoo! is in the middle. Again, I'd still like to see things faster and we continue to work (hard!) on making that happen.
Your comment on ads is true. Third party ads have become the #1 slowdown on Yahoo! pages. I've started discussions with the IAB (Interactive Advertising Bureau) to setup a performance working group to get industry-wide support for improving the performance of ads. If you see bad ads, complain! Don't buy that brand. Complain to the publisher (like Yahoo!). This feedback will encourage advertisers to improve their performance practices so they don't drive away consumers.
We are starting to dig into Flash performance. The Flash group at Yahoo! has built some cool tools to analyze Flash performance. But it's going to take awhile to gather the best practices and make the tools public. We'll share what we have when we have it.
Posted by: Steve Souders at October 18, 2007 9:47 AM
Steve, colleague saw your presentation at Future of Web Apps in London and suggested I take a look at what your group is doing. What are your feelings about hardware Application Front End appliances like F5's BIG-IP and Citrix's NetScaler? Think they are overkill if one could "fix" front end issues in software?
Posted by: Jsn at October 26, 2007 6:13 AM
These hardware appliances are generally focused on delivery of the HTML document. Since that's less than 10-20% of the overall user experience, the higher priority is focusing on the other 80-90% of the time. So these are not a first priority when it comes to optimizing the user response time. If your focus is to improve your _back end_ performance (e.g., requests/second), these can play a role.
Posted by: Steve Souders at October 26, 2007 1:25 PM
Steve, do you think there will eventually be a guideline involving cookies based off of the "When the Cookie Crumbles" article? Perhaps something YSlow could check?
If images are on the same server as a cookie it gets returned in the HTTP request. If you have a site with a lot of new images, such as e-commerce, a lot of savings could be made. For example, on a search results page or a page that features new products with unique images. Since a cookie can be 4-5kb it seems that a large cookie could have a pretty sizable performance impact.
Posted by: Rob at October 29, 2007 8:37 AM
Hi, Rob. Yes, I'm baking 5-6 new rules now that address cookies and cookie-free domains. That definitely helps.
Posted by: Steve Souders at October 29, 2007 11:54 AM
Hi!
I look at the chart that illustrates HTTP traffic and I am wondering about how did you get it. Did you use any measuring tool that analizes and provides this information on the fly or add some "smart" javascript measuring code to the page? Thanks.
Posted by: Vladimir Krasilschik at November 4, 2007 12:40 PM
See the comment from May 22.
Posted by: Steve Souders at November 4, 2007 6:33 PM
Thanks ... Dude...
Posted by: mp3 indir at December 20, 2007 3:01 AM
Hi, Rob. Yes, I'm baking 5-6 new rules now that address cookies and cookie-free domains. That definitely helps.
Posted by: e-okul at February 23, 2008 9:46 AM
hey there,
Are you guys looking for charting component if yes then chk this out visifire i really enjoyed drawing chart with various animations
Posted by: kavin4u at June 3, 2008 5:21 AM
First, thanks for Your helpful work, Steve!
Take a look at http://site-perf.com/, may be You'll find it useful.
It's another online site download measurement tool, like pingdom.com, but looks more realistic.
Posted by: zuborg at June 3, 2008 7:08 AM
Steve, just wondering how the Flash performance work is coming along.
Posted by: Outtanames999 at July 12, 2008 5:42 PM
Thank you very much for this useful article and the comments.
Posted by: sohbet at November 14, 2008 11:30 AM
Hi,Its really nice post.I totally agree that reducing web page weight is a good idea. One thing to be aware of is that the user doesn't have to wait for all the files to load before the page is rendered.
Posted by: telephone engineer london at April 23, 2009 12:17 AM
Post a comment
Comment Policy: We encourage comments and look forward to hearing from you. Please note that Yahoo! may, in our sole discretion, remove comments if they are off topic, inappropriate, or otherwise violate our Terms of Service. Fields marked with asterisk '*' are required.
Subscribe
Recent Blog Articles
view all
YQL Open Table for Google Buzz now live
Tue, 09 Feb 2010
INSERT INTO twitter.status ...
Mon, 08 Feb 2010
Announcing the Yahoo! Brasil Open Hack Day 2010, 20-21 March
Mon, 08 Feb 2010
Marketing hacks, linchpins, and tech women of valor
Sun, 07 Feb 2010
Yahoo! India invites you to join the first India Hadoop Summit
Thu, 04 Feb 2010
Recent Links
Appcelerator Titanium + Yahoo YQL on Vimeo
Mon, 08 Feb 2010
Tue, 02 Feb 2010
PhoneGap | Cross platform mobile framework
Sat, 30 Jan 2010
Web developers can rule the iPad - O'Reilly Radar
Sat, 30 Jan 2010
rc3.org - Is the iPad the harbinger of doom for personal computing?
Thu, 28 Jan 2010
Archives
2010
2009
2008
2007
2006
2005
Recent Readers

