8

For years, web developers have followed the logic that minimizing HTTP connections speeds up applications because the browser isn't choking on the download/execution of code. For example Yahoo has long touted their best practices, and tell us to combine CSS/JavaScript/image resources into single files - thereby reducing the total number of HTTP requests and compressing the total resource size.

But other "best practices" exist with regards to increasing webpage speed - specifically, maximizing the number of parallel HTTP downloads (from Google). This approach tells us that by spreading the HTTP connections across multiple hostnames the browser can do more simultaneously.

So as modern web applications are becoming very large (e.g. 3MB+ of JavaScript alone) the question must be asked:

Will my application load faster with 3MB+ of JavaScript in a single file? Or will it load faster with multiple, smaller files spread across hostnames?

For the sake of simplicity we should also assume other "best practices" are being followed, so this question best exists in a vacuum.

I have yet to see any empirical data on the subject, but I imagine there has to be a point where the performance of these approaches diverge - so knowing where that sweet-spot exists would be ideal.

arthurakay
  • 5,631
  • 8
  • 37
  • 62
  • 1
    +1 because I think this question needs to get asked again for today's web. I think it depends though. Are we talking about a SPA, or an e-commerce website who needs different pieces of JS on different pages? Is the strategy to cater to a wide internet audience, or target a specific demographic of users (with faster connection speeds)? I think a good answer would address these concerns / questions. – xDaevax Aug 05 '14 at 12:44
  • I would say that my question is coming more from the arena of Single Page Apps, but it certainly applies in other scenarios. And while faster connection speeds mitigates this problem to some degree, many SPAs exist in the enterprise where older browsers have longer lives. I doubt there's a one-size-fits-all answer, but I would love to see any empirical data. – arthurakay Aug 05 '14 at 12:56

2 Answers2

3

I think this depends on number of sockets available for the browser. Say the browser has it's 4 sockets available, 4 smaller requests will be faster than 1 large request.

The trick here would be knowing at startup what requests your application will send and maximize the # of requests for # of sockets a browser can use. I believe browsers only have 4 but to be honest I haven't ever looked to see if that number has changed in modern browsers.

Looks like each browser can have it's own number of sockets, some having 2: Max parallel http connections in a browser?

https://stackoverflow.com/a/985704/925782 says IE10 is winner with 8 sockets, wow, go IE :)

Cache control would also play part in this of course where first load would be everything, subsequent loads would be less actual requests.

If you want to get geeky: http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

I agree that some charts and real data would be a great blog post, my response is purely theoretical in nature.

Community
  • 1
  • 1
Mitchell Simoens
  • 2,516
  • 2
  • 20
  • 29
1

I would pick parallel downloads.

Smaller JS files can be parsed faster than one monster-sized package. In most of the cases you do not need all of the JS at once either.

Concatenating assets is considered better practice currently because of expensive http requests. One of HTTP/2.0 goals is to make it cheap by multiplexing requests within same tcp connection. Server push in HTTP/2.0 can leverage it even more by sending some essential assets to the client ahead of time.

Chrome, FF, Opera and IE11 already support HTTP/2.0, and its support is available for popular webservers (apache, nginx)

Eisenhorn
  • 314
  • 2
  • 4
  • 2
    I don't think it's an either or type question, there is a sweet spot. You have to also consider network latency, loading many files may not be faster than loading a single or a couple large files. – Mitchell Simoens Aug 05 '14 at 14:08
  • Good points, but is there any actual data to back this up? I would expect some sort of bell curve for both approaches, and as Mitchell says I'm looking for where the sweet spot is. – arthurakay Aug 05 '14 at 17:34