3 ms·
If the stylesheet is less than a few kilobytes, it will generally be faster to inline it even for subsequent page views with an immutable cache header. Caches a
by chrismorgan 4y ago
If the stylesheet is less than a few kilobytes, it will generally be faster to inline it even for subsequent page views with an immutable cache header. Caches and separation into external files still aren’t free.
One other thing that is almost always overlooked is that you don’t tend to use all styles on a given page, and you could strip out the unused styles. For example, the front page linked here has over 4KB of stylesheet, unminified and with unused styles; minified, it’s 3KB; with unused styles removed (including the wonky body:hover), it’s about 662 bytes. Something in the vicinity of 1KB is for specific pages, and 1KB for editing (form fields and such). If you try actively minimising the front page (removing unnecessary whitespace and attribute quotation marks, minifying and paring the stylesheet, and removing a few pointless elements), the whole thing ends up under 3.4KiB (down from 7.8KiB).
(Mind you, most browsers can do some degree of intra-session sharing of an in-memory representation of a stylesheet, for performance and memory usage reasons, and doing this will thwart that. But that’s only likely to make things faster over inlining if you’ve got much heavier styles, dozens or hundreds of kilobytes, the sort that you wouldn’t be so likely to inline anyway.)
As for the “making additional requests thing”: you still have to remember latency, because you’re adding another whole round trip to the waterfall. In the case of bearblog.dev which is hosted somewhere on the other side of the world from me (I’m in Australia), that will add an absolute minimum of over 260ms, more commonly half a second or more. Inlining of small resources like this when you have a very short waterfall already significantly improves load performance. The HTTP/2 and HTTP/3 improvements are about requesting more than just a couple of resources: in a case like this if you had one HTML and one CSS resource from the same host, HTTP/2 would not improve anything over HTTP/1.1.