One JS/CSS bundle Vs. One with default and one with custom

Question

On a few of my sites, we use Javascript/CSS bundles to reduce load time. I've always used two bundles for each type (4 in total) so I have

• JS Bundle 1: Contains scripts that are standard on every page (jQuery, cross page functions etc.)
• JS Bundle 2: Contains scripts specific to that page
• CSS bundle 1: Contains general site CSS (Layout, colors etc.(
• CSS Bundle 2: Contains CSS specific to that page

My theory behind that is, JS Bundle 1 and CSS Bundle 1 never change, so by having them in a separate bundle they can be cached and re-used on every page, whereas JS bundle 2 and CSS bundle 2 contain the code that changes per page. Sometimes these might only have one or two lines of code in them. I did some freelance work for a web development company using this method, and they told me it was bad/wrong and I should only use one bundle for each media type because using two bundles increases the number of requests and slows the page. I don't understand why this is slower than using two bundles?

Just as an example with Javascript (Though almost identical for CSS)

First page visited (Say page1.html): 100kb of standard scripts used on every page and 5kb of custom scripts
With my method a user would have to download 105kb of media in two requests
With their method a user would have to download 105kb of media on one request
So on the first visit, I accept their method is faster but

Second page visited (page2.html): 100kb of standard scripts and 3kb of custom scripts
With my method, the standard scripts would already be cached so they would only have to download 3kb of scripts
With their method the user would have to downoad 103kb of scripts, just for the 3kb of custom scripts.

Yet they insist their method is faster, how is this possible? I'm sure having to make one extra request can't decrease the page load so much it's more effective to re-download 100kb of data they already have, and that's just the JS, adding the CSS that becomes nearer to double

Answer 1

My theory behind that is

That's your problem. Don't theorize - test. You can use the network profiler in Firebug or IE dev tools to see exactly, down to the millisecond, which method is fastest.

Answer 2

They are probably* right.

It can be bad to split your JavaScript and CSS code into multiple files. Even if some of the code in those files is used on one page only, it's worth keeping it all in a single file to reduce page requests. Let me show you why:

Their method (all CSS in one file):

1. First page loads (1 request, 108KB CSS file loaded over HTTP)
2. Second page loads (0 requests, 108KB CSS file from browser cache)
3. Third page loads (0 requests, 108KB CSS file from browser cache)

Your method (CSS in multiple files):

1. First page loads (1 request, 100KB CSS master file loaded over HTTP)
2. Second page loads (1 request, 5KB file over HTTP, 100KB file from browser cache)
3. Third page loads (1 request, 3KB file over HTTP, 100KB file from browser cache)

With each page load, you need an extra HTTP page request for the custom CSS that would otherwise have been included in the request for the original master file. If the custom code for each subpage grows much bigger, then you might want to test to see which is faster, but in the scenario you describe, I would wager that a single 108KB request is faster than three requests for a 100KB, 5KB, and 3KB file, because HTTP requests are expensive.

Beyond that -- and the actual performance difference is likely tiny anyway -- it's easier to keep one file open when editing code than it is to hop between multiple files. A big site could quickly result in 10 or more separate CSS files, and that's never fun to manage. For that reason alone it's worth keeping code in one file if you can.

*I say probably because there are other factors to consider. e.g. There are times when splitting up big CSS and JavaScript files makes sense. If one rarely-visited page needs an extra 500kb of JavaScript, you could argue against including it in the site's main JS file. You can also use things like minify to reduce HTTP requests when multiple CSS/JS files are requested, but it still doesn't get away from the fact that you've got to juggle all those files in your code editor in the first place.