Bundling == Slower load times?

Web Performance Discuss Test Results
1

Hi I’m looking at adding a script/css bundling feature to my application.

However, I measured the before and after and found my load times were slower with the bundling enabled.

So I ended up creating a stripped down app to reproduce the problem.

IE8 with bundling:
http://www.webpagetest.org/result/120703_6F_eceb4e22ef68dbcdaf1e2cbbdb582b8c/

IE8 without bundling:
http://www.webpagetest.org/result/120703_WW_736e82a9615402808e7e576053a55634/

IE7 with bundling:
http://www.webpagetest.org/result/120703_43_ce50cf1c86acc9a5fc932d05c072698a/

IE7 without bundling:
http://www.webpagetest.org/result/120703_Q6_12e48c871ed502db160ce53a5dd39189/

The only browser where bundling seems faster is with IE7. I imagine this is because of it’s 2 connection limit per domain and blocking script downloads.

Am I missing something here? I’ve always read bundling scripts and css were a best practice. Is that not the case with newer browsers?

2

Bundling is no longer the clear win that it used to be (at least when you are talking about a sane number of scripts). Each new connection needs to ramp up the connection through TCP’s slow start. With 6 connections running in parallel the browser gets 3x as much data in each round trip as when you only have 2.

You are still better off getting as much script content out of the top of the document as possible but it’s not strongly recommended that you collapse everything into a single script (particularly if that means moving things up the page to do it).

There are always exceptions so looking at the full waterfall and how the page renders is generally the best way to do it.