javascript - how to remove render blocking style error (lighthouse plugin )

Question

I am using external stylesheet in my application. When I check my application performance it show me remove render blocking style link. So I used link tag like this:

<link href="https://www.*****.com/asset/web/css/base.css" key="" rel="stylesheet" />
<link href="https://www.****.com/asset/web/css/styles.css" key="" rel="stylesheet" />

So to remove this error remove render blocking style link, I tried to preload my link like this:

<link href="https://www.*****.com/asset/web/css/base.css"
  key=""
  as="style"
  onLoad="this.rel = 'stylesheet'"
  rel="preload"
/>
<link href="https://www.*****.com/asset/web/css/styles.css"
  key=""
  as="style"
  onLoad="this.rel = 'stylesheet'"
  rel="preload"
/>

Now when I run my application my page become blank. When I open inspect element without doing anything it show all contend with css applied. What I am doing wrong? Why does it show a blank page?

Answer 1

use this

      <link href="https://www.*****.com/asset/web/css/base.css" 
              key=""
              as="style"
              rel="preload"
        />
        <link href="https://www.*****.com/asset/web/css/styles.css"
              key=""
              as="style"
              rel="preload"
        />
        <link href="https://www.*****.com/asset/web/css/base.css"
              key=""
              rel="stylesheet"
        />
        <link href="https://www.*****.com/asset/web/css/styles.css"
              key=""
              rel="stylesheet"
        />