Lighthouse（PWA）显示Bootstrap CSS的“消除渲染阻止资源”，但我使用的是“异步”

Question

这是Lighthouse报告中的部分：

这是有问题的网页： https://idealofficetemperature.web.app/

这是HTML：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" async>

那我做错了什么？我正在使用 async -我以为可以满足Lighthouse验证。

有什么想法吗？谢谢！

Answer 1

您可以提取所有关键项目并将其内联
这是上周的一篇文章，解释了
https://web.dev/extract-critical-css

另外两件事可能会起作用
两者都对我有用

1. 将 异步 更改为 惰性加载
   根据CanIUse的说法，它不受支持，但似乎可以用于灯塔吗？
   https://caniuse.com/#search=lazyload

2. 或添加此内容而不是异步
   media =“ nope！” onload =“ this.media ='all'”

在这里找到了解决方案
https://www.filamentgroup.com/lab/async-css.html