In some of the Web projects I’m working on, I have a choice of many small files vs few big files to download.
There are conflicting arguments. I’ve read that many small files are better, because you can choose to use only the required files, and they’ll be cached across the site. (These are typically CSS or Javascript files.) On the other hand, a single large file takes less time to download than the sum on many small files, because there’s less latency. (Latency is more important than bandwidth these days.)
I ran some tests, and the answer is rather easy. The graph below shows the average time taken to download a file of size 1KB – 100KB.
The X-axis is the size of the file. The Y-axis is the number of milliseconds taken to download the file, averaged over 10 attempts on my home computer. (I did the same thing at work and at a client site. The results are similar.)
The key thing is, it’s not linear. Larger files take less time. Specifically:
- A file twice as big only takes 30% longer to load.
- Breaking a file into two parts takes 54% longer to load.
These days, it looks like few big files are better.
To give you an example: my home page had the following components:
| Size (KB) | Load time (ms) | |
|---|---|---|
| HTML | 25 | 680 |
| CSS | 4 | 340 |
| Javascript | 6 | 400 |
| Total | 35 | 1420 |
The total time for these 3 files would be about 1.4 seconds. Instead, if I put them all on one file…
| Size (KB) | Load time (ms) | |
|---|---|---|
| All-in-one | 35 | 770 |
The combined file takes only 0.77 seconds — half the download time for split files. It’s a compelling argument to put all your CSS and Javascript (images, too, if possible) into a single page.
But what if people visit multiple pages on my site, and lose the benefit of caching? Not really. The benefit of caching is small. By having a single file, I have 770 – 680 = 90 ms additional time for each HTML to load. But I don’t have to load the CSS and Javascript individually, which takes 740 seconds. The breakeven is about 740 / 90 = 8 page visits.
So, on average, if people, visit more than 8 pages in my site, it’s worth breaking up the CSS and Javascript. But the average for my site is only 2 pages per person. (It’s a skewed distribution. Most, from Google, just visit one page. Few, from bookmarks, visit several pages. On average, it’s just over 2.) I’d argue that unless you’re using an external Javascript / CSS library (prototype, etc.) or people view many pages each visit, you’re better of having a single HTML+Javascript+CSS file.