Browsers do multiple requests at once, so trying to squeeze everything into as few requests as possible could make things slower as you lose the parallelism.
I would think it would be better to try and make all your requests a similar size. 3x100kb will probably be faster than 1x300kb
However, according the HTTP archive websites make about ~90 requests per page [1]. The average browser does about 6 requests per hostname, and 15-20 total [2]. In this situation, our critical path has at least 4 requests, thus we are paying 4xRTT in just latency.
Your example may be true, but many sites are actually 100x100kb, spread over 3-5 domains (tracking, ads, etc) and browsers limit the number of concurrent requests to any one domain.
Ideally, you'd be doing JavaScript and CSS minification as part of your build or release process and push to a CDN, though some packages do it on the fly and cache the output. It's a surprisingly interesting practice.
6 comments
[ 2.9 ms ] story [ 28.9 ms ] threadBrowsers do multiple requests at once, so trying to squeeze everything into as few requests as possible could make things slower as you lose the parallelism.
I would think it would be better to try and make all your requests a similar size. 3x100kb will probably be faster than 1x300kb
Here's a pretty good post on how latency dominates page load speed after a certain point: http://www.igvita.com/2012/07/19/latency-the-new-web-perform...
By bundling resources, we reduce the number of requests, and the number of round trips.
Disclaimer: I work at Mobify with Peter who authored the post.
However, according the HTTP archive websites make about ~90 requests per page [1]. The average browser does about 6 requests per hostname, and 15-20 total [2]. In this situation, our critical path has at least 4 requests, thus we are paying 4xRTT in just latency.
edit: formatting
[1] http://httparchive.org/trends.php
[2] http://www.browserscope.org/results?o=xhr&v=top&cate...
Generally only up to 6 at a time though, per hostname.
http://www.browserscope.org/results?o=xhr&v=top&cate...
The recommendations here are actually pretty simple (though the image responsiveness can become complex) and are in line with Google's recommendations (https://developers.google.com/speed/pagespeed/), which are also pretty much the same as Yahoo's (http://developer.yahoo.com/performance/rules.html).
Ideally, you'd be doing JavaScript and CSS minification as part of your build or release process and push to a CDN, though some packages do it on the fly and cache the output. It's a surprisingly interesting practice.