Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests

November 28, 2006 at 12:56 pm by Tenni Theurer | In Development, Performance | 128 Comments

This is the first in a series of articles describing experiments conducted to learn more about optimizing web page performance. You may be wondering why you’re reading a performance article on the YUI Blog. It turns out that most of web page performance is affected by front-end engineering, that is, the user interface design and development.

It’s no secret that users prefer faster web sites. I work in a dedicated team focused on quantifying and improving the performance of Yahoo! products worldwide. As part of our work, we conduct experiments related to web page performance. We are sharing our findings so that other front-end engineers join us in accelerating the user experience on the web.

The 80/20 Performance Rule

Vilfredo Pareto, an economist in the early 1900s, made a famous observation where 80% of the nation’s wealth belonged to 20% of the population. This was later generalized into what’s commonly referred to as the Pareto principle (also known as the 80-20 rule), which states for any phenomenon, 80% of the consequences come from 20% of the causes. We see this phenomenon in software engineering where 80% of the time is spent in only 20% of the code. When we optimize our applications, we know to focus on that 20% of the code. This same technique should also be applied when optimizing web pages. Most performance optimization today are made on the parts that generate the HTML document (apache, C++, databases, etc.), but those parts only contribute to about 20% of the user’s response time. It’s better to focus on optimizing the parts that contribute to the other 80%.

Using a packet sniffer, we discover what takes place in that other 80%. Figure 1 is a graphical view of where the time is spent loading http://www.yahoo.com with an empty cache. Each bar represents a specific component and is shown in the order started by the browser. The first bar is the time spent for the browser to retrieve just the HTML document. Notice only 10% of the time is spent here for the browser to request the HTML page, and for apache to stitch together the HTML and return the response back to the browser. The other 90% of the time is spent fetching other components in the page including images, scripts and stylesheets.

Figure 1. Loading http://www.yahoo.com

Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

Table 1. Time spent loading popular web sites
	Time Retrieving HTML	Time Elsewhere
Yahoo!	10%	90%
Google	25%	75%
MySpace	9%	91%
MSN	5%	95%
ebay	5%	95%
Amazon	38%	62%
YouTube	9%	91%
CNN	15%	85%

Note: Times are for page loads with an empty cache over Comcast cable modem (~2.5 mbps).

Shouldn’t everything be saved in the browser’s cache anyway?

The conclusion is the same: Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make. In the next article we’ll look at the impact of caching, and some surprising real-world findings.

Disclaimer: Design imperatives dictating visual richness need to be weighed against this request-reduction goal. When you need visual richness, additional steps can be taken — aggregating JS files, using CSS sprites, etc. — but visual richness does tend to run counter to a slender HTTP request pipeline.

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

128 Comments »

RSS feed for comments on this post. TrackBack URI

[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests [...]

Pingback by Web Site Optimization - Part 1 - Nate Koechley’s Blog — November 28, 2006 #
hi there,

good article.

I hope to see more of the same from which we can learn.

I saw a similar article from a google engineer from which I learnt some techniques.

It will be useful if you can post what tools to use to get the information that you’ve posted above and in your future articles.

thanks again ,

BR,
~A

Comment by anjan bacchu — November 29, 2006 #
[...] They have identified HTTP requests as a main performance killer. Browsers still only process two HTTP requests at a time, especially start pages are not cached as effectively as they imagined, and parsing JavaScript freezes the browser. Therefore they rather serve a single large file with CSS in the header, and JavaScript as close to the </body> tag as possible. [...]

Pingback by Learning the World » My @media 2006 Day Two — November 29, 2006 #
[...] Of course with Yahoo’s performance research about browser cache and HTTP requests you could discuss if external files load faster with several server requests through script src="foo.js" or just one request and internal HTML code, but either way you should use central, non-redundant files and include them in one way or another. [...]

Pingback by Learning the World » Best Practices in Web Development — November 29, 2006 #
Interesting, I guess that we should be concatinating CSS & JS files.

What about images referenced from the stylesheets? I would assume that they not included in the graph, as the stylesheet is loaded last. (Although that does run counter to how I thought CSS was loaded, which is at the same time as other parts of the head.)

Comment by AlastairC — November 29, 2006 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests » Yahoo! User Interface Blog Good post on the optimization of bandwidth (tags: optimization development performance) [...]

Pingback by watchingnow » Blog Archive » links for 2006-11-29 — November 29, 2006 #
Simon explains how it is possible to see this data…
http://simon.incutio.com/archive/2006/10/17/graph

I think next release of firebug (extension for firefox) will include this feature where you can see the requests made by the browser…I think you will have to pay for it though, not such a bad thing because it’s something you can’t develop without

C

Comment by Carlton Dickson — November 29, 2006 #
[...] Link [...]

Pingback by Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests « [REF] — November 29, 2006 #
Waiting for part 2 !!

Comment by Lightw4re — November 29, 2006 #
Maybe you could encance performance by making your page validate properly.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fyuiblog.com%2Fblog%2F2006%2F11%2F28%2Fperformance-research-part-1%2F

Comment by jim c — November 29, 2006 #
This makes me wonder if actually embedding images that don’t change (e.g. pieces of the layout) in “data:” strings would speed up the page’s load… It would certainly kill a little bit of the HTTP overhead, though possibly at the expense of some extra download and decoding time. It would be fun to find out, anyway… :)

-Mike

Comment by Mike West — November 29, 2006 #
[...] Yahoo! has had a User Interface blog going for a while, and their latest post raises a few interesting items. From the post: [...]

Pingback by rhjr.net » The other 80% of your time — November 29, 2006 #
For one of my pages, almost all of the delay in seeing the content occurs _after_ the downloads have completed. In other words, focusing on download optimization misses 80% of the problem.

I’d love to see an article on how layout affects rendering speed. Do tables withing s cost inordinate reflow? How much would making all table columns fixed-width help? Is there some exponential factor related to the number of form fields? (I have dozens in several hidden tabs).

Download performance is the most easily measured aspect of client speed, and there are lots of articles that discuss techniques for improving it. My big problem is elsewhere, and I can’t find any good tools to help me find it!

I can’t wait to see what FireBug 1.0 provides…

Comment by Randy — November 29, 2006 #
Agreed on the minimizing the HTTP requests, is absolutely crucial to consistent load times. The latency for retrieving web objects is indeterminate, so reducing their number has a positive effect on load time consistency. Talked about that in my book, Speed Up Your Site.

Web page load times should be viewed along with other factors however, site breadth and familiarity can actually dampen the negative effects of web delay, as this article summarizes a journal article on the subject:

http://www.websiteoptimization.com/speed/tweak/scent/

- Andy

Comment by Andy King — November 29, 2006 #
[...] Tenni over on the YUI Blog recently wrote part 1 on a piece about improving web performance by reducing HTTP Requests. [...]

Pingback by chad lindstrom’s blog » Blog Archive » Optimizing HTTP Performance — November 29, 2006 #
I think the focus is wrong. If you have an image file, whether it’s part of the content or part of the UI, it is absolutely part of the user experience. Additionally, the graphic itself should have already been optimized as far as file size, so that any significant optimization of the graphics is generally going to come from removal of files. This means you are not so much optimizing the graphics as you are changing the message the document was ’supposedly’ designed to deliver. Not an area to be tread lightly. At the very least the performance gains should be obvious.

Comment by Emphatic — November 29, 2006 #
AlastairC:

I would be strongly against concatinating CSS & JS files. First off, they are conceptually different things; and they get modified/enhanced by different people/teams for different purposes.

Secondly, CSS and JS are usually more stable than the content, so it’s likely they will be cached (locally on browser or net caches), if they are concatinated, then when one of them gets modified, both are invalidated in the caches, bad for performance.

Let’s see what the coming analysis say taking consideration about caches.

Comment by Yining — November 29, 2006 #
“I’d love to see an article on how layout affects rendering speed.” — Randy

I spent quite a lot of time on this a year ago on a complex site (and have been studying it for years on top of that). When looking at my http requests vs. rendering time in different browsers and the slight differences how the rendering was displayed the effects of slight placement of every piece of code kinda blew me away. Order matters. The difference of order not only effects your SEO results, but the time it reduce off how the user sees the effects of the page rendering.

I’ve for a long time had a problem with CSS and JS being linked too form a page, and putting it in-line saves a lot of loading time as well… but soooooo many people doing it that way is just wrong… Until you see the display rendering effects that can enhance a users expedience, opps, experience :)

Comment by Andrew — November 29, 2006 #
I think that the data presented here is critical to understanding what’s happening in browsers and how they load. To do it correctly, you’d have to have the load data over different browsers, as it’s possible they handle parallel requests differently.

I’d guess that the folks at Yahoo! know and understand this, as some of the behavior is critical to the way scripts interact with pages, etc. They seem pretty methodical in their analysis, so I wouldn’t second guess it.

I’ve seen a lot of data similar to this recently which supports the findings, and I find it very informative.

Certainly it’s a piece of the puzzle, and it’s wrong to discount things like file sizes, rendering complexity, and any interactivity which does inform the “time to view” or “time to interact”. Some of those issues have been discussed for quite some time now. This is newer information.

Looking forward to part 2.

@Randy, @Carlton – I’ve had a chance to use the new Firebug, and it delivers.

Comment by rob cherny — November 30, 2006 #
@Empathic: Yahoo! uses CSS sprites and sliding doors to reduce the number of images significantly. That doesn’t mean the user interface is less colorful, it means using smart techniques to load less image files.

Comment by Martin Kliehm — November 30, 2006 #
[...] Recently, the YUI team conducted an experiment on optimizing web page performance. Though the results are not ground-breaking, it is interesting to see the figures. Using the Pareto principle, which says 80% of the effects is achieved by 20% of the causes, the YUI team discovers where this 80% is. Table 1 shows popular web sites spending between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make. [...]

Pingback by the-double-0-project.net » Blog Archive » Increasing pipelines for a faster Firefox — November 30, 2006 #
@AlastairC — I use IBM Page Detailer for showing the components of an HTML page. If you have a page that contains components that aren’t really necessary to make the page usable, you can download those components after the page has loaded. In Figure 1, the images referenced in this particular stylesheet are not shown since the stylesheet is downloaded in the onload (after the page has already loaded).

@Carlton Dickson – Thanks for the reference, I’ll give it a try.

@Mike West – Combining scripts, stylesheets and images is a technique used to reduce the number of HTTP requests. If the combined image is small enough, you can place it as a data url directly in the CSS as a background image. Then there will be no HTTP request for the image since it will load with the CSS. This is not supported in IE but it is possible to adapt the CSS to use a data url for all browsers except IE.

Thanks,
Tenni

Comment by Tenni Theurer — November 30, 2006 #
[...] Web sitemizi nasıl optimize edebiliriz ve bant-genişliğin en iyi nasıl kullanabilmemizi anlatan güzel bir makale Link [...]

Pingback by Fatih Hayrioğlu’nun not defteri » 30 Kasım 2006 Web’den Seçme haberler — November 30, 2006 #
@Yining

I just meant that based on this it might be a good idea to make 3 separate CSS files one, and separate JS files into one, not combining CSS & JS files. Sorry for the confusion.

@Tenni Theurer: thanks, that makes sense.

Comment by AlastairC — December 1, 2006 #
[...] The first of a series of posts @ Yahoo! User Interface blog about some experiments to spot where most of the time a user waits for a page to show up is wasted. “Most performance optimization today are made on the parts that generate the HTML document (apache, C++, databases, etc.), but those parts only contribute to about 20% of the user’s response time. It’s better to focus on optimizing the parts that contribute to the other 80%.” [...]

Pingback by Revisiting the good old 80/20 rule: websites performances « Meltin’ Posts — December 1, 2006 #
probably that 25% doesn’t count for google pages since the size of google index is at least 80% less that the yahoo one :/

Comment by alphanews — December 1, 2006 #
If a web page appears to load slowly, it’s not because images are still loading, but because the web page hasn’t specified the dimensions of all its images. So then the visitor has to wait for all the images to load before reading, or risk losing his/her place as the images load and the web page repositions its contents.

In fact, this very web page is guilty of that.

Comment by Derek — December 1, 2006 #
This seems very obvious. So obvious that I am surprised Yahoo is publishing this as a finding in the year 2005.

Comment by tndal — December 1, 2006 #
Thank you. I have been wanting to perform this type of analysis for a while now, because most clients just don’t listen to reasoning. They prefer hard data, and it’s harder to justify this type of research then just making a ton of image rollovers and such (even if you use the modern technique of putting all of them into one image, which has issues of it’s own).

Comment by BTreeHugger — December 1, 2006 #
I believe concatinating JS and CSS should be don by server-side scripts. That might help a little. For eg.; using the readfile() PHP function might be worthwhile. That way seperation of CSS and JS from HTML is maintained for the developer/designer.

Comment by Didar Hossain — December 1, 2006 #
[...] * Web optimization (HTTP)Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests [...]

Pingback by vrypan|net|weblog » Blog Archive » Σημειώσεις-061202 — December 3, 2006 #
[...] Voici un article très intéressant sur le Blog de Yahoo expliquant comment améliorer les performances des requêtes HTTP en réduisant les fichiers CSS et JS secondaires. The conclusion is the same: Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make. in categories: TechnoWeb / Rétrolien / Laisser un commentaire [...]

Pingback by j’Alias » Réduction des requêtes HTTP — December 3, 2006 #
[...] Tenni Theurer, a performance engineer at Yahoo!, has written a post on What the 80/20 Rule Tells Us about Reducing HTTP Requests. [...]

Pingback by Ajaxian » Yahoo! Performance Engineers discuss what the 80/20 Rule Tells Us about Reducing HTTP Requests — December 3, 2006 #
[...] This article, the first in a series, discusses the performance impact of the number of HTTP requests, concluding that reducing this number is the most cost-effective way to reduce response time. This is consistent with my own experience as well as the recommendations from Brad Neuberg’s (frequently cited here) Ajax optimization tutorial. [...]

Pingback by Ajax Performance » A promising ‘Performance Research’ series from the YUI blog — December 3, 2006 #
[...] Geek Building The Bridge Part 2 Redefining myself into something a lil bit geek-ier Dec 4th 2006 Dejavu Day Posted in General | Monday ain’t so crowd. Ajaxian posted two entries that make me feel dejavu. The 80/20 principles articles from YUI developer blog is now standing within Ajaxian Monday page (I’ve read it yesterday and bookmarked already). Nevertheless, it’s a good article. 80/20 principles was actually an economic principle. Taken into HTTP performance context, 80/20 principle told us that most of our effort will likely giving 20 percent result only. Thus, it was not the most exact point to focus. As we’ve have known today, a lot of effort has been done with backend processes. Using more powerful machne, state of the art server side langauge, etc to squeeze the last seconds from content generation. While, actually, the most performance optimation could be done somewhere else, i.e: the 80 percent part. From YUI blog: Most performance optimization today are made on the parts that generate the HTML document (apache, C++, databases, etc.), but those parts only contribute to about 20% of the user’s response time. It’s better to focus on optimizing the parts that contribute to the other 80%. [...]

Pingback by Lust::Geek Building The Bridge Part 2 » Dejavu Day — December 3, 2006 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests » Yahoo! User Interface Blog (tags: Development ajax programming webdesign webdev) [...]

Pingback by Elroy Jetson » Blog Archive » links for 2006-12-04 — December 3, 2006 #
any significant optimization of the graphics is generally going to come from removal of files. This means you are not so much optimizing the graphics as you are changing the message the document was ’supposedly’ designed to deliver.

You can reduce the number of image files without affecting the experience by including multiple images in the same file, and using CSS positioning / clipping to show different sections of that image in different places of your site.

Comment by Joeri — December 4, 2006 #
[...] Tenni Theurer has a post regarding performance on the Yahoo! User Interface Blog. Tenni clarifies that performance finds place in the UI blog because web page performance is affected by the user interface design and development. The conclusion is that reducing the number of HTTP requests has the biggest impact on the response time. Typically the browser makes a separate HTTP request per component (images, scripts, stylesheets, …, anything other than HTML) in the page. This is one of the reasons why a lot of tools that analyze the sites look at the number of images, scripts and stylesheets are required for displaying a page. A good article, in fact, it is going to be a good series to follow. [...]

Pingback by 80-20 Rule For Optimizing Web Pages on iface thoughts — December 4, 2006 #
I like your first sentence. :-)

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebgen/html/ie_introfiddler2.asp

Comment by EricLaw — December 4, 2006 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests [...]

Pingback by Max Design - standards based web design, development and training » Some links for light reading (5/12/06) — December 4, 2006 #
I guess if we load a web page with no images and scrips, it would load as fast as shown on the graph above. But fancy graphics and interactive buttons are and will always be part of a web page. No one likes to read raw text, do you? So it’s kinda worth waiting a second or two for the page to load. So it is a second, right, not a minute?

Comment by Stylius — December 4, 2006 #
@Stylius – There are ways to reduce the number of HTTP requests without compromising the design of a web page. Combining scripts, stylesheets, or images reduces the number of requests for both the empty and full cache experience. Other strategies, like adding a far future expires header, reduces the number of HTTP requests for the full cache experience.

Comment by Tenni Theurer — December 5, 2006 #
Great article about “serving JS fast”: http://www.thinkvitamin.com/features/webapps/serving-javascript-fast

Comment by Simon Brüchner — December 6, 2006 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests » Yahoo! User Interface Blog Interesting article from Yahoo describing the results from some of their performance research: “Most performance optimization today are made on the parts that generate the HTML document (apache, C++, databases, etc.), but those parts only contribute to a (tags: webdev web performance optimization) [...]

Pingback by Jim O’Halloran’s Weblog » Blog Archive » links for 2006-12-07 — December 7, 2006 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests » Yahoo! User Interface Blog It’s no secret that users prefer faster web sites. I work in a dedicated team focused on quantifying and improving the performance of Yahoo! products worldwide. As part of our work, we conduct experiments related to web page performance. We are sharing (tags: webperf user-experience performancemgt) [...]

Pingback by links for 2006-12-07 » dougmcclure.net — December 8, 2006 #
[...] Many people recommend splitting CSS files down into smaller files for code organisation. Yahoo recently conducted some research proving that the more files downloaded by a page (css files, image files, javascript files etc) the longer a page takes to download. This means reducing the number of files loaded by a page will speed up the page loading. One or two CSS files will therefore be better than more. [...]

Pingback by Mark Kirby - Brighton » Blog Archive » Splitting CSS Files — December 8, 2006 #
[...] Sou fã do Yahoo. Isso é uma coisa que não se ouve muito por ai, geralmente o bam bam bam é sempre o Google. Mas o Yahoo tem umas sacadas para desenvolvedores que o Google não tem, como Hack Day e o Yahoo User Interface Blog. No YUI você encontra muita coisa interessante pouco divulgada por ai. Vi um dias desses um artigo chamado Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests relacionando a teoria de pareto com ganhos de performance nos sites. A idéia em si não é nova e nem sua aplicação, ainda assim achei muito pertinente. [...]

Pingback by Princípio de pareto: A teoria 80/20 aplicada ao desenvolvimento de web » Revolução Etc - Web Standards em uma casca de noz! — December 12, 2006 #
Yahoo! UK engineer Ed Eliot has a great article this morning on combining JS files using PHP; works for CSS as well. -Eric

Comment by Eric Miraglia — December 14, 2006 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests Most performance optimization today are made on the parts that generate the HTML document (apache, C++, databases, etc.), using only 20% of user’s response time, browsers download only two or four components in parallel per hostname, MINIMIZE REQUESTS! (tags: WebDesign) [...]

Pingback by All in a days work… — December 14, 2006 #
Make your pages load faster by combining and compressing javascript and css files…

As some of you may know, I am currently working on a content management system. Although I am not able to
share all of the code – it is proprietary after all – I already made one debugging tool……

Trackback by rakaz — December 18, 2006 #
Good post on Yahoo! User Interface blog on web site performance…

There’s a good post on web site performance on the Yahoo! User Interface blog. It says it’s part one…

Trackback by Dan Crevier's Blog — December 18, 2006 #
Good post on Yahoo! User Interface blog on web site performance…

There’s a good post on web site performance on the Yahoo! User Interface blog. It says it’s part one…

Trackback by WPF Community Bloggers — December 18, 2006 #
[...] An entertaining pair of posts from the Yahoo! User Interface group on optimizing performance (via Noah Lockwood). [...]

Pingback by The Third Bit » Blog Archive » Yahoo! on Optimization — January 5, 2007 #
Thanks for the nice article.
We should use HttpWatch in IE for considering the response time.Fiddler Tool is the another one.But Fiddler works as a proxy.

Comment by Huseyin Gedikli — January 7, 2007 #
[...] Tenni Theurer, a performance engineer at Yahoo!, has written a post on What the 80/20 Rule Tells Us about Reducing HTTP Requests. [...]

Pingback by Yahoo! Performance Engineers discuss what the 80/20 Rule Tells Us about Reducing HTTP Requests — January 8, 2007 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests » Yahoo! User Interface Blog The conclusion is the same: Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make. In the next article we’ll look at the impact of caching, and some surprising real (tags: performance optimization http yahoo) « links for 2006-12-12 | links for 2006-12-15 » [...]

Pingback by links for 2006-12-14 » Tank’s Thoughts — January 15, 2007 #
[...] The arch enemy of performance are HTTP requests. Many browser still can’t handle more than two or four requests at a time. Keep the number of files down, your website will be faster. [...]

Pingback by Learning the World » Website Performance Tweaks — January 25, 2007 #
[...] Martin Kliehm hat in einem interessanten Beitrag einen Teil seiner Erkenntnisse über Webseitenoptimierung zusammengetragen. Ich finde, für fortgeschrittene Webentwickler und für Profis ist dieses Thema ein Muß und der Artikel ein wirklich guter Einstieg. Interessanterweise erscheinen immer mehr Artikel zu diesem Thema und gerade Yahoo! hat in seinem YUI-Blog ein paar interessante Beiträge dazu gehabt. Die beiden Artikel über den Cache [1,2] fand ich sehr bemerkenswert. Und so manche Erkenntnis rüttelt mittlerweile an liebgewonnenem Best-Practice. Ich denke, wir haben in dieser Richtung noch einiges zu lernen. Viel Umdenken wird dafür vonnöten sein. [...]

Pingback by F-LOG-GE » Blog Archive » Website-Optimierung — January 25, 2007 #
[...] Wer mag kann inzwischen auch mal bei meinem Bruder, CSSImport, CSSBeauty, CSSGuy ,F-LOG-GE oder Alistapart vorbeigucken, für Zwecke der Seitenoptimierung empfehlen sich noch diese, diese und diese Seite – seeehr interessant. ersteres bei Interesse an Bergen, schönen Bildern und Tourberichten, letztere für CSS/Webwork-Interessierte. Und weil es immer iweder Spass macht: Beetlebum. [...]

Pingback by Mal was anderes… - Cywhale.de:CoreBlog — February 8, 2007 #
[...] Minimize Client Requests: Yahoo! pre-compiles some of their YUI libraries so that developers can just include one or two files in their apps and get the functionality they need, and we do the same thing with most of our libraries / applications. Separating thousands of lines of JS into separate files can really help with organizational purposes, but serving those multiple files to the client can really be a drag to visitors, especially in light in of studies like these. What we’ve done to help fix this is create a quick server-side app that reads an XML config file to determine which JS files to include in the single request. We can then ask for something like /CompressedScripts/Prototype.js to get our Prototype.js file, the Event.onDOMReady file, Justin Palmer’s awesome EventSelectors extension, something we wrote for generating SOAP requests, and Sylvain Zimmer’s impressive $$ addon. That’s five potential requests that we’ve merged into one request, saving an incredible amount of unnecessary requests over the lifetime of our app. I should note that we don’t use versioning (point 4) on our libraries just because it would probably degrade performance most of the time since the libraries rarely change. [...]

Pingback by » Best Ways to Serve Up Your JavaScript debugger; — February 12, 2007 #
[...] A JavaScript library is definitely the way to go for things like Animation effects, rich controls and wrapping the XMLHttpRequest object. Sure, you can do this yourself but someone else has already resolved the cross-browser issues, tested in terms of performance and stability and the library probably has several people constantly improving it. For these scenarios the slight overhead of an extra HTTP request is worth it, but only if the library is modular so you are only including the code you need! [...]

Pingback by Gavin Cornwell » Blog Archive » JavaScript Libraries - Friends! — February 13, 2007 #
[...] One small additional little .js.php only for the data you need? Look, I said “no”! .js.php will require a new database connection, since it’s a seperate request. Performance will suffer. In addition it’s a new HTTP request and those are expensive. [...]

Pingback by phpied.com » Blog Archive » JSON data island — February 14, 2007 #
[...] fonte Dove viene speso il tempo durante il download di una pagina? Nello scaricare le immagini ;-) Battute a parte… [...]

Pingback by refactor.it » Blog Archive » Performance HTTP — March 7, 2007 #
[...] So, I was reading a blog post on the Yahoo UI blog, Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests which basically argues that you can significantly improve the download time of your pages by reducing the number of HTTP requests that are made to your web servers. [...]

Pingback by Jason Lambert » Blog Archive » Stop favicon.ico requests and Prevent Favicon.ico 404 Errors! — March 8, 2007 #
Where can I find a program/site that will give me the information about my site? I believe you referred to it as a “packet sniffer”. I would like to create a similar chart as in Figure 1, as a diagnostic for different pages on my site. Are there any free tools out there or was that chart using some proprietary yahoo diagnostic?

Comment by Brian Laks — March 8, 2007 #
@Brian: I typically use IBM Page Detailer as my “packet sniffer” of choice. It’s the best tool for showing the components of an HTML page and you can get a 90-day trial version. There are many other similar tools out there such as LiveHTTPHeaders and Microsoft Fiddler, and the latest Firebug “Net” tab.

Comment by Tenni Theurer — March 13, 2007 #
Web 2.0 Expo group on slideshare has cool stuff!…

The web 2.0 Expo group on slideshare already has some nice stuff in it. Some highlights: Casual privacy from kellan (at Yahoo!) High performance web sites from Steve Souders and Tenni Theurer (also at Yahoo!). Are agile projects doomed to……

Trackback by Jonathan Boutelle's home on the net — April 19, 2007 #
[...] Some highlights: Casual privacy from kellan (at Yahoo!) High performance web sites from Steve Souders and Tenni Theurer (also at Yahoo!). Are agile projects doomed to half-baked design? from Alex Chaffee and Leslie Chicoine. Usability testing in the wild from Andre Charland Posted by jon Filed in Uncategorized [...]

Pingback by the slideshare blog » Blog Archive » Web 2.0 Expo group on slideshare has cool stuff! — April 19, 2007 #
[...] Il numero dei componenti da scaricare in una pagina è il parametro che più influenza i tempi di scaricamento della pagina. [...]

Pingback by refactor.it » Blog Archive » Download paralleli in HTTP — April 30, 2007 #
Ask10 Performance-Other Improvement Tasks…

To Do Utilize the same images for the top, left, right and bottom shadow effects on suggests, right rail sa and others. Defer the loading of the compete js and compress the compete js. Use the same button image for cross and close…….

Trackback by Confluence: Ask Site Engineering — May 9, 2007 #
[...] YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ [...]

Pingback by » How to Build Insanely Fast Web Pages · Tech Blog · Techasaur.us Rex - Tech News Encyclopedia | Yesterday, Today & Tomorrow’s Tech News — May 12, 2007 #
[...] For example, the a November post made me think about my techniques a bit differently — they pointed out that having a low-weight page is nice, but the speed experience is much more greatly affected by the number of elements on the page. An understanding of latency vs. bandwith makes this point even clearer, once you consider it. [...]

Pingback by Unthinkingly.com» Blog Archive » Low-Bandwidth user experience — May 12, 2007 #
[...] Their four-part article on reducing HTTP requests is lengthy, and may contain more details than you you’ll care about, so to break it down, here’s the key point in regards to this write-up: “Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.” In the context of Evolved CSS, we can make a large impact by using PHP/ASP/JSP et al to take all of our style sheets and combine them into a single document. [...]

Pingback by Style Evolution - Dynamic CSS Part 2 at Alex Jones — May 14, 2007 #
[...] Also, Tenni Theurer has written a great series of articles about some of our research on the Yahoo! User Interface Blog. I’m presenting at OSCon in July. This high level of interest in improving web performance is [...]

Pingback by HTMLHelp.blog : Rules for High Performance Web Sites — May 15, 2007 #
[...] YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ [...]

Pingback by Top methods for faster, speedier web sites — May 23, 2007 #
[...] and scriptaculous javascript libraries which also consists of a couple of different files. Now that an article about the same problem featured on the Yahoo! User Interface blog, I decided to make my solution [...]

Pingback by SourceLOG » Make your pages load faster by combining and compressing javascript and css files — May 25, 2007 #
I made a post on my blog about the increase in page load speeds I saw while concatenating YUI scripts…

http://rob.cogit8.org/blog/2007/may/08/reducing-http-requests-using-make/

Comment by Rob — May 25, 2007 #
[...] includes. At times one plugin will even depend on another adding even more server requests. A revealing YUI post recently discussed the negative performance impact of so many [...]

Pingback by Combining Javascript Files :: PseudoCoder.com — July 16, 2007 #
Enabling keepalive on the server side will reduce HTTP overhead as it will allow keepalive supporting browsers (pretty much every modern browser) to reuse an open HTTP socket to send multiple assets instead of closing and reopening the connection for each asset being downloaded. Of course this doesn’t reduce the bandwidth requirements of the page but something else that might is the use of gzip compression of the text files being sent. Apache has a module to do this dynamicly and you oculd also staticly gzip content that doesn’t change.

Comment by Gordon — July 17, 2007 #
[...] it can dramatically improve the performance of a site by reducing the number of HTTP requests (see this article for more information). Alpha transparency is also quickly becoming a favorite feature among web [...]

Pingback by Julien Lecomte’s Blog » IE6, CSS Sprites and Alpha Transparency — July 23, 2007 #
[...] tags using the Apache server setttings. According to research at Yahoo they have come up with the 80/20 rule of reducing HTTP traffic. Since browsers spend 80% of the time fetching external components [...]

Pingback by Seifi.org » Blog Archive » YSlow Review, add-on for the firebug add-on — July 25, 2007 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests [...]

Pingback by Mrasnika’s Lair » Eх, малко време за четене на блогове — August 1, 2007 #
[...] at Yahoo, Google and elsewhere have found that as much as 80% of the user’s time can be spent waiting for things other than the main HTML to …. Furthermore, browsers may not be caching as many files as you [...]

Pingback by Client side web site performance — onenaught.com — August 6, 2007 #
[...] year, Steve has worked with Tenni Theurer (author of a four-part YUIBlog series on performance: part one | part two | part three | part four) and their Exceptional Performance team to hone the message. [...]

Pingback by YUI Theater — Steve Souders: “High Performance Web Sites: 14 Rules For Faster Pages” » Yahoo! User Interface Blog — September 4, 2007 #
The chart posted about shows that 3 images and a script are taking the lion’s share of the time. While it is not specified, I would be willing to bet that some if not all the slow loading images are ad related. Fetching banners takes longer than get a simple image call. Also, a script at the bottom of the page tends to be tracking related.

How much of the that excess time is loading content that is not the real content of the site but the ads? My experience, sorry no graphs, suggests that ads are a major contributor to user perceivable slowness. Try loading a page in Firefox with AdBlock and without and see the difference for yourself.

Comment by Matt — September 6, 2007 #
There’s a good post on web site performance on the Yahoo! User Interface blog. It says it’s part one…

Comment by Mateusz — September 17, 2007 #
[...] What the 80/20 Rule Tells Us about Reducing HTTP Requests [...]

Pingback by User First Web » Speed Matters: Presentation Files and Resources — September 19, 2007 #
[...] Those organizations that are spending hundreds of thousands of dollars on speeding up their sites are probably looking in the wrong spots for the speed improvements. They are probably spending their time with expensive efforts to increase their server and database speed while ignoring the reality of Yahoo’s 80/20 Rule that the majority of the savings come from frontend design decisions. [...]

Pingback by User First Web » Speed of Site and Usability — September 24, 2007 #
[...] is consistent with Yahoo’s 80/20 rule and indicates that the biggest benefit will come from optimizing front-end [...]

Pingback by User First Web » Repaying Guy Kawasaki — Truemors Site Optimization Analysis — September 29, 2007 #
[...] for Improving Web Site Performance 7 Easy-to-Apply Tips to Improve Your Web Site Performance Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests Firebug [...]

Pingback by 出家如初，成佛有余 » CSS Sprites研究 — October 2, 2007 #
I think these blog is really useful for new comers and Excellent resource list.
It´s a very interesting Blog and simple answer of many questions.
Keep up the good work!

Comment by Skischule — October 6, 2007 #
[...] properties. It is part art and part science. Let’s look at the science. He writes in his Yahoo! User Interface Blog: “When we optimize our applications, we know to focus on that 20% of the code. This same [...]

Pingback by Yahoo! Performance Research and 80/20 | Group 8020 — October 9, 2007 #
[...] good folks over at the YUI blog posted this: What the 80/20 Rule Tells Us about Reducing HTTP Requests a while ago. I bookmarked it, but wanted to point it out to other folks–it’s a nice bit [...]

Pingback by Dan Moore! » Interesting posts about web application performance — October 10, 2007 #
[...] got an HTML page that includes a bunch of Javascript files, which makes development easy but which hurts performance in [...]

Pingback by Erik A. Hanson » Blog Archive » A Ruby Script to Concatenate and Compress Javascript Files — October 16, 2007 #
[...] fewer HTTP requests turns out to be the most important optimization technique, with the biggest impact. If your time is limited, and you can only complete one optimization task, pick this one. HTTP [...]

Pingback by WebBait | Notes » Blog Archive » SEO - Make Fewer HTTP Requests — October 25, 2007 #
Where can I find a program/site that will give me the information about my site? I believe you referred to it as a “packet sniffer”. I would like to create a similar chart as in Figure 1, as a diagnostic for different pages on my site. Are there any free tools out there or was that chart using some proprietary yahoo diagnostic..

Comment by Ski Schule — October 26, 2007 #
The web 2.0 Expo group on slideshare already has some nice stuff in it. Some highlights: Casual privacy from kellan (at Yahoo!) High performance web sites from Steve Souders and Tenni Theurer (also at Yahoo!).

Comment by Skischule Bodenmais — November 7, 2007 #
[...] look at a quote from the article “Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests” by Tenni Theurer on the Yahoo! User Interface Blog. Table 1 shows popular web sites [...]

Pingback by CSS Sprites: What They Are, Why They’re Cool, and How To Use Them - CSS-Tricks — November 15, 2007 #
[...] Использование множества отдельных изображений довольно привычный способ и наиболее часто используется в процессе создания сайта. Вырезали из дизайна огромное количество иконок и вставили во все необходимые элементы. На первый взгляд создается впечатление, что страница грузится быстрее; графические элементы появляются один за другим, постоянно создавая дополнительные HTTP запросы, что далеко не улучшает эффективность вашей страницы (Оптимизация веб сайтов Web Site Optimization: 13 Simple Steps и Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests). [...]

Pingback by Информационный блог VideoShot.ru » Архив блога » CSS Sprites и их использование — November 29, 2007 #
[...] and scriptaculous javascript libraries which also consists of a couple of different files. Now that an article about the same problem featured on the Yahoo! User Interface blog, I decided to make my solution [...]

Pingback by Wordpress Test » Blog Archive » Make your pages load faster by combining and compressing javascript and css files — December 9, 2007 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests “This is the first in a series of articles describing experiments conducted to learn more about optimizing web page performance. You may be wondering why you’re reading a performance article on the YUI Blog. It turns out that most of web page performance is affected by front-end engineering, that is, the user interface design and development.” [...]

Pingback by How To Minimize Your Javascript and CSS Files for Faster Page Loads at Internet Articles | Updates | Tips & Tricks — January 2, 2008 #
[...] Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests “This is the first in a series of articles describing experiments conducted to learn more about optimizing web page performance. You may be wondering why you’re reading a performance article on the YUI Blog. It turns out that most of web page performance is affected by front-end engineering, that is, the user interface design and development.” [...]

Pingback by How To Minimize Your Javascript and CSS Files for Faster Page Loads | Internet Articles | Updates | Tips & Tricks — January 6, 2008 #
I think next release of firebug (extension for firefox) will include this feature where you can see the requests made by the browser…I think you will have to pay for it though, not such a bad thing because it’s something you can’t develop without

Comment by naturyzm — January 11, 2008 #
[…] is consistent with Yahoo’s 80/20 rule and indicates that the biggest benefit will come from optimizing front-end […]

Comment by Anglia praca — January 11, 2008 #
[…] got an HTML page that includes a bunch of Javascript files, which makes development easy but which hurts performance in […]

Comment by pozycjonowanie stron — January 15, 2008 #
[...] of articles describing experiments conducted to learn more about optimizing web page performance (Part 1, Part 2, Part 3, Part 4). You may be wondering why you’re reading a performance article on [...]

Pingback by Performance Research, Part 5: iPhone Cacheability - Making it Stick » Yahoo! User Interface Blog — February 6, 2008 #
[...] Shea and Tenni Theurer have continued their performance series by delving into the iPhone and its poor little [...]

Pingback by Small is beautiful on the iPhone if you want a good cache on devphone — February 6, 2008 #
[...] Shea and Tenni Theurer have continued their performance series by delving into the iPhone and its poor little [...]

Pingback by Ajaxian » iPhone Cachability: Watch your weight — February 7, 2008 #
[...] Shea and Tenni Theurer have continued their performance series by delving into the iPhone and its poor little [...]

Pingback by Javascript News » Blog Archive » iPhone Cachability: Watch your weight — February 7, 2008 #
[…] got an HTML page that includes a bunch of Javascript files, which makes development easy but which hurts performance in […]

nice one

Comment by pozycjonowanie — February 7, 2008 #
[...] the quicker it loads. Performance related research by Yahoo! User Interface has proven this point. The 80/20 performance rule shows that “only 10% of the time is spent […] for the browser to request the HTML page [...]

Pingback by CSS Sprites: Speed Up Your Site — 测试818 — February 15, 2008 #
[...] And a lot about optimisation and preloading. Presume that the server is faster than the client at dealing with data. See http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ [...]

Pingback by Numiko » @media ajax conference — February 20, 2008 #
I’m looking for an explanation for improving performance for a website in which they are using external image server to host all images.

Has anyone done any detailed analysis on performance of website w.r.t external server and same server?

Comment by SEO — March 19, 2008 #
@SEO: It’s best to use a CDN to host your images rather than your own web server. This moves the static content closer to your users, thus improving performance for your users. Take a look at Rule 2: Use a CDN. Hosting assets on different domains has the added advantage of increasing the number of parallel downloads by the browser as discussed in Performance Research Part 4. Stoyan Stefanov has written a great article that touches on these points as well.

Comment by Tenni Theurer — March 21, 2008 #
[...] want to minimise requests to the server if they’re not necessary – it’s been shown that reducing HTTP requests can reduce response times and improve server [...]

Pingback by Load only the jQuery plugins you need, when you need them at gradient dropshadow curve — April 22, 2008 #
Hi,

For lack of a better place to post this, I wonder if you would answer this for me…

I have two websites,(site1.com and site2.com) and both use the same main.css hosted at site3.com.

A visitor browses through site1.com(user agent downloads and caches main.css), and then visits site2.com. Does the css get downloaded a second time or does the main.css already in the cache get used?

I hope that makes sense.

Thanks.

Comment by Mark Simpson — June 1, 2008 #
…and how do I get to the next article?

Comment by sam — June 6, 2008 #
Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
Performance Research, Part 2: Browser Cache Usage – Exposed!

Performance Research, Part 3: When the Cookie Crumbles
Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane
Performance Research, Part 5: iPhone Cacheability – Making it Stick

Comment by Eric Miraglia — June 6, 2008 #
[...] “What the 80/20 Rule Tells Us about Reducing HTTP Requests”a blog post on the YUI blog explaining the precedence of front-end performance for optimal response times. [...]

Pingback by 15 Tools to Help You Develop Faster Web Pages | PaulSpoerry.com — June 12, 2008 #
[...] Videoda bahsettiğim Yahoo ekibinin bulgularının yer aldığı ve videoda kullandığım tablo > Performans Araştırması 1 [...]

Pingback by Sayfanız kaç adet HTTP-İsteğinde bulunuyor? — July 3, 2008 #
[...] been talking for a long time at Yahoo about the importance of minimizing HTTP requests to improve performance. One important technique for YUI users has long been to use the pre-build "rollup" files [...]

Pingback by Combo Handler Service Available for Yahoo-hosted JS » Yahoo! User Interface Blog — July 16, 2008 #
[...] articles describing experiments conducted to learn more about optimizing web page performance (Part 1, Part 2, Part 3, Part 4, Part [...]

Pingback by Performance Research, Part 6: Less is More — Serving Files Faster by Combining Them » Yahoo! User Interface Blog — July 21, 2008 #
Sites can provide two versions of their most important web pages. One an vanilla text version and the other with images, css, scripts. Users which want quick download times can use the vanilla text version. It would be interesting to study download times for APPLE as they use a lot of graphics.

Comment by Deepak — August 15, 2008 #
I thought you might want to know that this blog content has been copied, without attribution, on this blog:

http://web-performance-research.blogspot.com/2008/05/performance-research-part-1-what-8020.html

They have copied some of our research as well, and have requested that they take it down. I suggest you do the same.

Chris

Comment by Chris Merrill — January 13, 2009 #
Thanks for the nice article.
We should use HttpWatch in IE for considering the response time.Fiddler Tool is the another one.But Fiddler works as a proxy.

Comment by Iklan Baris — June 29, 2009 #
[...] and scriptaculous javascript libraries which also consists of a couple of different files. Now that an article about the same problem featured on the Yahoo! User Interface blog, I decided to make my solution [...]

Pingback by Make your pages load faster by combining and compressing javascript and css files | rakaz — July 6, 2009 #
[...] especially when compared to several smaller images? The answer lies in HTTP requests and Yahoo’s 80/20 rule explains this much better than I could! To summarise, the numbers of HTTP requests to the websites [...]

Pingback by CSS Sprities for Website Optimization | Web Design Talk — August 18, 2009 #
[...] What the 80/20 Rule Tells Us about Reducing HTTP Requests [...]

Pingback by 15 Helpful In-Browser Web Development Tools | The NewMediaStudio, Custom PHP and MySQL Applications — August 24, 2009 #

Yahoo! User Interface Blog (YUIBlog)