Learn Performance - Render Blocking CSS

@import - preload

If you are unable to remove the @import (for example when loading a third-party stylesheet), then you can preload the imported CSS file using the link rel="preload" resource hint.

In addition to the import.css stylesheet in the document's <head>, this page also contains <link rel="preload" href="vars.css" as="style">. The link rel="preload" resource hint informs the browser to download the resource immediately, without waiting for the CSS parser to discover it.

Note that preload should be used sparsely and only for late-discovered resources. Overusing the preload resource hint can deviate network bandwidth to less-critical resources.

WebPageTest waterfall chart showing four resources. The Start Render mark appears at 2.2s.

This waterfall chart resembles the one in the previous demo where both stylesheets are downloaded in parallel.

View Source Code 
/* index.html */
<head>
  <link rel="preload" href="/vars.css" as="style" />
  <link rel="stylesheet" href="/import.css" />
</head>


/* import.css */
@import url(./vars.css);
// style rules...