为什么不异步加载CSS文件会解决PageSpeed的“延迟未使用的CSS”条目？

Question

在我的网站（site here）的PageSpeed Insights报告中，它列出了“推迟未使用的CSS”作为机会。我不清楚我到底需要做什么来解决这个问题。我已经确保列表中的每个CSS文件都装有一个<link rel="preload">标签，以确保该文件是异步加载的（screenshots）。根据{{​​3}}，我什至用loadCSS来做到这一点。为什么这不能解决“延迟未使用的CSS”？听起来这正是我所做的。

我有理由确定CSS文件是异步加载的，因为PageSpeed Insights不再在“消除渲染阻止资源”部分中报告它们（以前是这样做的）。

我见过Google's instructions。该问题没有公认的答案，而且我相信我的问题有所不同。在这个问题上，OP正在询问如何解决“延迟未使用的CSS”。我专门问为什么rel=preload不解决“推迟未使用的CSS”。

Answer 1

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

因此，此建议的命名含糊不清，导致混乱。问题已在问题-https://github.com/GoogleChrome/lighthouse/issues/6588

中进行了讨论

  

我同意问题作者；我也看到很多人   谁阅读了此标签（自Google Pagespeed Insights启动以来   使用Lighthouse），因为当   他们不这样做（因为此警告显示是否存在任何CSS，无论是否为异步，   在页面上未使用）。更糟的是，因为您链接到的页面   有关更多信息，请参阅有关渲染阻止和关键CSS的更多信息   比“删除未使用的CSS”要好。它还在   更典型的意义（加载异步，而不是从页面中删除）。

为解决此混乱，Lighthouse团队决定将此建议重命名为在即将发布的版本中删除未使用的CSS （请参阅https://github.com/GoogleChrome/lighthouse/pull/7235）

Answer 2

首先，我的经验是结果会有所不同，Mobile可能需要一些时间才能付出努力才能收回分数。 Desktop对我所做的工作迅速做出了反应，但是Defer offscreen images在Mobile上“工作”了几天。

对于您的页面，我将特别在折叠样式上方提取关键的css，并将所有样式表移至</body>之前，同时保留细丝组loadCSS方法。我对WP不太熟练，因此我无法进一步说明如何实现该目标，但是使用Google即时搜索应该可以立即解决该问题。

如果可以提供更多帮助，请告诉我。快速浏览该网站，我喜欢您的工作！

Answer 3

preload和defer使用onload javascript， 所以..也许您正在使用noscript标签？

Pagespeed看起来就像解析标签，并显示您收到的消息。