Learn Performance - Render Blocking CSS
@import
Stylesheets loaded using
@import
negatively affect your rendering performance as they are not caught by the
preload scanner and are a late-discovered resource.
In this demo, we are loading
import.css
in the document's
<head>. This stylesheet includes
@import url(./vars.css);
—where we define our CSS variables.
As you can see in the waterfall chart, the Start Render mark is delayed
until the render-blocking
vars.css
has downloaded.
Additionally, vars.css
is downloaded in sequence, after
import.css
finishes downloading.
View Source Code
/* index.html */
<head>
<link rel="stylesheet" href="/import.css" />
</head>
/* import.css */
@import url(./vars.css);
// style rules...