Learn Performance - Render Blocking CSS
FOUC
A flash of unstyled content (FOUC) is when you see a brief flicker of the page's content without any styles applied to it. Refresh this page in case you missed it.
CSS is render-blocking by design. Placing any stylesheets in the
<head>
will block the HTML parser until the stylesheet is downloaded and parsed. In
this demo, the stylesheet is placed outside of the
<head>
and placed before the closing
<body>
tag. The browser discovers the CSS file
after
parsing and rendering the HTML, resulting in a FOUC.
The above image is taken from
WebPageTest
and shows the resources loaded for this page. You should notice that the
Start Render mark—denoted by the dark green vertical line—appears
between 0.8s - 1.0s, before
style.css
has downloaded.
Note that the resources in this demo include a
delay
query string parameter to exaggerate the server response times and make
the waterfall chart easier to follow.
View Source Code
<body>
<div class="content">
<!-- content -->
</div>
<link rel="stylesheet" href="/style.css" />
</body>