css - 为什么不异步加载 CSS 文件解析 PageSpeed 的 ‘Defer unused CSS’ 条目？

Question

在我的网站 (site here) 的 PageSpeed Insights 报告中，它列出了“延迟未使用的 CSS”作为机会。我不清楚我到底需要做什么来解决这个问题。我已经确保列表中的每个 CSS 文件都加载了 <link rel="preload">。标签，确保文件被异步加载(screenshots)。我什至用过loadCSS为此，根据 Google's instructions .为什么这不能解决“延迟未使用的 CSS？”听起来这正是我所做的。

我有理由相信 CSS 文件是异步加载的，因为 PageSpeed Insights 不再在“消除渲染阻塞资源”部分报告它们(之前这样做过)。

我看过 this previous Stack Overflow question .这个问题没有公认的答案，而且我相信我的问题有点不同。在那个问题中，OP 询问如何解决“延迟未使用的 CSS”。我特意问为什么 rel=preload不解决“延迟未使用的 CSS”。

Answer 1

要解决此问题，您需要完全删除页面中未使用的 CSS 规则。异步加载 CSS 文件无助于解决此问题

因此，此建议的命名存在歧义，导致混淆。这已在问题中讨论 - https://github.com/GoogleChrome/lighthouse/issues/6588

I agree with the issue author; I also see many people who read this label (ever since Google Pagespeed Insights started using Lighthouse) as that they still have render blocking CSS, when they don't (since this warning shows for any css, async or not, that is not used on the page). It gets worse because the page you link to for further info talks more about render-blocking and critical css than it does about "removing unused CSS". It also uses "Defer" in a the more typical sense (load async, not remove from page).

为了解决这种困惑，Lighthouse 团队决定在即将发布的版本中将此建议重命名为删除未使用的 CSS(请参阅 https://github.com/GoogleChrome/lighthouse/pull/7235)