Learn Performance - Render Blocking CSS
Partial FOUC
By placing your stylesheets in the
<head>
of your page, you can avoid a Flash of Unstyled Content (FOUC). On the
downside, this blocks the HTML parser from rendering the rest of the HTML.
This demo contains a stylesheet with the most critical styles in the
<head>
and another stylesheet with less critical CSS—in this example the heading
color—declared within the
<body>. You will notice that the page does not render
until the CSS has downloaded, eliminating the FOUC we had on the previous
demo. However, the page appears slower as nothing is shown to the user until
the CSS file has finished downloading. The heading color changes to pink
after the page has rendered as this stylesheet is placed inside the
body
and thus not render-blocking.
Note that styles applied after render may result in a layout-shift.
If you observe the waterfall chart above, you should notice that the Start
Render mark has now shifted to 2.2s, shortly after the render-blocking
style.css
has finished downloading.
View Source Code
<head>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="content">
<!-- content -->
</div>
<link rel="stylesheet" href="/demo.css" />
</body>