📌 Jake Archibald, “The future of loading CSS” (Feb 11, 2016)
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>
Jake Archibald’s technique is 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.