A straightforward post with some perf data from Tomas Pustelnik. It’s a good reminder that CSS is a crucial part of thinking web performance, and for a huge reason:
Any time [the browser] encounters any external resource (CSS, JS, images, etc.) it will assign it a download priority and initiate its download. Priorities are important because some resources are critical to render a page (eg. main stylesheet and JS files) while others may be less important (like images or stylesheets for other media types).
In the case of CSS, this priority is usually high because stylesheets are necessary to create CSSOM (CSS Object Model). To render a webpage browser has to construct both DOM and CSSOM.
That’s why CSS is often referred to as a “blocking” resource. That’s desirable to some degree: we wouldn’t want to see flash-of-unstyled-websites. But we get real perf gains when we make CSS smaller because it’s quicker to download, parse, and apply.
Aside from the techniques in the post, I’m sure advocates of atomic/all-utility CSS would love it pointed out that the stylesheets from those approaches are generally way smaller, and thus more performant. CSS-in-JS approaches will sometimes bundle styles into scripts so, to be fair, you get a little perf gain at the top by not loading the CSS there, but a perf loss from increasing the JavaScript bundle size in the process. (I haven’t seen a study with a fair comparison though, so I don’t know if it’s a wash or what.)
CSS is always blocking my website display from rendering as fast as possible, but it’s always good to have all of them minimized
whenever i come across articles about how to influence how and when the css is loaded and applied, i’m thinking about instead of tinkering with that, it would be cool if we had a standardised filename for “that main css file that we need anyway in all cases” – let’s call it base.css
if that name was standardized (and it’s location relative to the url / domain too), then the browser could just look for it and download it simultaneously to downloading the html document – without having to wait for that html, parsing it, find external sources and prioritizing downloads, download them, apply them to the document, … …
So that css would be there already or right on it’s way while the html is still being parsed? A meta tag could tell the browser whether to apply that base.css to the document or make an exception and ignore it on a per document basis.
Bad idea?
Yes, it would be one more request, that may be pointless if there was no “base.css” … could be done in a protocol way then while loading the html document (like the server delivers that base.css if it’s there automatically, and the browser understands)?
Aren’t we doing such a thing already when browsers look for a favicon.ico just in case, even if there is no reference to it in the html head?
Everyone is hung up about loading resources. How does it compare to rendering time with complex css when using gradients everywhere and triple box shadows etc.