CSS blocks rendering of a web page until all stylesheets load. As Harry Roberts put it, “your page will only render as quickly as your slowest stylesheet.”
So link to stylesheets in-body.
<head> <link rel="stylesheet" href="/site.css"> </head> <body> <link rel="stylesheet" href="/site-header.css"> <header>…</header> <link rel="stylesheet" href="/article.css"> <main>…</main> <link rel="stylesheet" href="/comments.css"> <section class="comments">…</section> <link rel="stylesheet" href="/about.css"> <aside class="about">…</aside> <link rel="stylesheet" href="/site-footer.css"> <footer>…</footer> </body>
That’s Jake Archibald’s technique in “The future of loading CSS” (Feb 11, 2016). It’s a win for both performance for the user and workflow for the developer. Stylesheet
- Loads CSS at the component level, avoiding redundant rules and downloading
- Allows for stylesheets to be independently cached, minimizing impact of changes (“cache-busting”)
- Progressively renders (displays) the web page rather than blocking the entire page
- Avoids the need to decide what’s “above-the-fold” critical CSS
- Fits into modern component-based design systems (keeps styles with components or includes)
The plan is for each
<link rel="stylesheet">to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes
<link rel="stylesheet">behave similar to
- Pay attention to layout that may shift during progressive rendering.
- This technique works across all modern browsers (see Chrome Platform Status — Stylesheets activated after the body is started do not block paint). Without browser support, it simply falls back to old render-blocking behavior.
- Loading multiple stylesheets is only performant with the updated protocol, HTTP/2. Browser support for HTTP/2 is almost certain. HTTP/2 is already enabled on many host servers and CDNs. Secure connectivity (HTTPS) is required. This technique is still a good idea even if you avoid loading multiple stylesheets. Inline the CSS styles in-body instead of linking to the stylesheets.