如何删除渲染阻塞样式错误(灯塔插件)

Question

我在应用程序中使用external stylesheet。当我检查应用程序性能时，它会显示remove render blocking style link。所以我使用了这样的链接标签：

<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" />

因此，为了删除这个错误remove render blocking style link，我尝试像这样preload我的链接：

<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"
/>

现在，当我运行应用程序时，我的页面将变为空白。当我在不做任何事情的情况下打开inspect元素时，它显示所有应用css的内容。我做错了什么？为什么显示空白页？

Answer 1

使用此

<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"
/>