Scott Jehl:
One of the most impactful things we can do to improve page performance and resilience is to load CSS in a way that does not delay page rendering. That’s because by default, browsers will load external CSS synchronously—halting all page rendering while the CSS is downloaded and parsed—both of which incur potential delays.
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Don’t just up and do this to all your stylesheets though, otherwise, you’ll get a pretty nasty “Flash of Unstyled Content” (FOUC) as the page loads. You need to pair the technique with a way to ship critical CSS. Do that though, and like Scott’s opening sentence said, it’s quite impactful.
Interesting side story… on our Pen Editor page over at CodePen, we had a FOUC problem (warning, there is a very fast flash of white in this video):
This has done this for (years?) on CodePen in @firefox.
We have a totally normal <link rel=“stylesheet”> at the top of the page that is supposed to be render-blocking, yes?
Would love to understand. pic.twitter.com/HGTHwpemiy
— Chris Coyier (@chriscoyier) June 20, 2019
What makes it weird is that we load our CSS in <link> tags in the <head> completely normally, which should block-rendering and prevent FOUC. But there is some hard-to-reproduce bug at work. Fortunately we found a weird solution, so now we have an empty <script> tag in the <head> that somehow solves it.
It should be noted that you probably want some fallback for browsers/users with javascript disabled:
Can’t you achieve the same thing using
rel="alternate stylesheet"?This feature has been around since HTML 4 and it covers various use cases, including yours.
MDN has a great article about it: https://mdn.io/docs/Web/CSS/Alternative_style_sheets