Stylesheets are render blocking

If I link to a stylesheet using <link href="my.css" rel="stylesheet">, is it guaranteed that the browser will use this CSS before the initial render of my document?

Yes. Stylesheets in (both <style> and <link>) are render blocking.

De facto it is “common knowledge”, and we can also observe it using, e.g. the performance pane of Chrome Dev Tools.

De jure needed a dig. From the proposal to introduce the blocking="render" attribute on <link>:

“All current browsers already have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated (or a UA-defined timeout is reached)”

Does this cover stylesheets added via <link rel="stylesheet">? We need to head over to the WHATWG HTML standard:

“The stylesheet keyword may be used with link elements … A link element of this type is implicitly potentially render-blocking if the element was created by its node document's parser”

The “potentially” in there is, I assume, hinting at the "UA-defined timeout" and other wiggliness.


What this means is that:

  1. There won't be a FOUC (we can rely on these stylesheets being applied for the first render).
  2. The page will take longer to load since there is an extra network request.

To avoid the second problem while having the first cake, bundlers bundle all the CSS into style tag(s).