Learn Performance - Render Blocking CSS

@import - link

If you can replace the @import with a regular <link rel="stylesheet" >, the preload scanner will pick up the CSS files and download them in parallel, resulting in an improved Start Render.

On this page, we are loading vars.css and import-link.css using link rel="stylesheet" in the document's <head>.

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

Both render-blocking stylesheets are downloaded in parallel and the Start Render time is significantly better.

View Source Code
<head>
  <link rel="stylesheet" href="/vars.css" />
  <link rel="stylesheet" href="/import-link.css" />
</head>