时间戳

首页 > 解决方案 > Lighthouse (PWA) 为 Bootstrap CSS 显示“消除渲染阻塞资源”，但我使用的是“异步”

progressive-web-apps - Lighthouse (PWA) 为 Bootstrap CSS 显示“消除渲染阻塞资源”，但我使用的是“异步”

问题描述

这是灯塔报告中的部分：

在此处输入图像描述 这是有问题的网页： 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>

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

有任何想法吗？谢谢！

标签： progressive-web-appslighthouse

解决方案

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

另外两件事可能
对我有用

  1. 将async更改为lazyload
    根据 CanIUse 的说法，它不受支持，但似乎适用于灯塔？
    https://caniuse.com/#search=lazyload

  2. 或者添加这个而不是 async
    media="nope!" onload="this.media='all'"

在此处找到该解决方案
https://www.filamentgroup.com/lab/async-css.html

推荐阅读