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 <link> in <body>:

  • 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
  • Avoids asynchronous loading of stylesheets which are complicated or JavaScript-dependent
  • 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 <script src="…"></script>.

Some notes:

  • 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.