灯塔(PWA)显示了引导CSS的“消除呈现阻塞资源”，但我使用的是“异步”。

Question

这是灯塔报告中的一节：

​

这就是问题中的网页：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>

那我做错什么了？我正在使用异步-我认为这将满足灯塔验证。

有什么想法吗？谢谢!

Answer 1

您可以提取所有关键项，并将它们内联。

这是上周的一篇文章，解释了

https://web.dev/extract-critical-css

另外两件事可能会起作用

两人都为我工作

1. 将异步更改为lazyload 根据CanIUse的说法，它不受支持，但似乎适用于灯塔？ https://caniuse.com/#search=lazyload
2. 或者添加这个而不是异步。 Media=“不！”Onload=“this.media.onload==‘all’”

在这里找到了那个解决方案

https://www.filamentgroup.com/lab/async-css.html