Loading CSS without blocking render

Avatar of Chris Coyier
Chris Coyier on

Typically you do want CSS to block rendering. Pages would load in a very awkward manner if you saw the page load with no CSS first, then shift around as the CSS is parsed and applied to the page.

But there are some situations where you want to defer loading of CSS – for instance a stylesheet of custom fonts you don’t mind downloading late. Or even your main stylesheet if you’re doing critical CSS.

Keith Clark presents a really simple way to do this in this article (no dependencies). Scott Jehl chimed in saying onload has spotty support though. His little async CSS loader is likely the best way to go for the best possible browser support.

Another way to defer loading of CSS is just to put it at the bottom of the document, like we often do with scripts. But bear in mind the advantage to doing it in the head is that the download gets triggered right away so it’s ultimately a bit faster. We put scripts in the footer because it’s not only the downloading of the script that can be blocking, but the execution as well (doubly whammy). I’m not sure if CSS has blocking execution (if you can call it that), but I don’t think so (?).

Direct Link →