Considering only page speed, at what point is CSS or JS big enough to externalize

Question

Common advice is to keep your CSS and JS files external. The reason: What you lose in the additional HTTP request*, you often gain back by not having to download cacheable static content (which CSS and JS usually is).

However, the smaller your external file, the more penalizing the additional HTTP request -- even if it is a 304 Not Modified response. So the smaller the external file, the more reason to favor inlining your CSS and JS content, at least when speed is your primary concern.

I ran some tests. Without going through the details, my results look like this:

External File Size    Average Gain
----------------------------------
               1KB          -3.7ms
               2KB          -3.7ms
               4KB          -4.0ms
               8KB          -3.0ms
              16KB          -2.7ms
              32KB           1.0ms
              64KB           2.7ms
             128KB          10.0ms
             256KB         493.7ms
             512KB        1047.0ms
            1024KB        2569.7ms

My general conclusion is that using external files doesn't really matter until they get BIG. And by BIG, I mean the 50-100KB range... And that's minified and gzipped, if you take advantage of those.

Can anyone confirm or refute these results with additional data?

(* Assuming you don't use the HTTP "Expires" header)

Answer 1

I don't have additional data, but I can confirm that your results logically make sense. Most people today are on fast broadband connections, and most web servers will automatically gzip any text-based content that they send, so in many cases the overhead of sending a second request to load an external resource (or verify that it has not been modified) is going to be greater than the cost incurred by downloading a bit more data as part of the original request.

You can even work this out mathematically if you want, by assuming an average connection speed of 5 Mbps and a typical round-trip time of 100 ms. With those assumptions you will see that you can add up to approximately 62,500 bytes to the payload of the first request before the overhead of making the second request becomes justified. And that correlates very nicely with your numbers.

However, that doesn't mean that "using external files doesn't really matter", as there are other reasons to use them apart from the caching/page-load aspect. For instance, they help keep your code and overall site structure sane, particularly if you have common CSS styles and JavaScript utilities that are reused across multiple pages. I'd argue that this is at least as important as any small gain or loss in page-load time that you might get from using/not using external files. So in that context using external files makes sense even for smaller resources.