Google PageSpeed 建议在头部的 <style> 标记中添加关键 CSS，并将外部 CSS 推迟到 HTML 的末尾。
通过在 HTML 中内联 CSS（应该分开）以及在 CSS 加载时创建 FOUC，这违反了 Web 标准。可见性可以设置为在加载 CSS 后一次性显示整个页面，但这会创建整个页面的 FOUC，看起来也不好看。
在头部使用 <link> 正确加载 CSS 和延迟加载 CSS 之间没有实际的时间差异，因此没有真正需要延迟加载样式表。加载页面仍然需要相同的时间。你为什么要为用户提供一个半样式的页面，而最好只显示样式页面。
我的问题是：为什么网络巨头 Google 会提出这种不符合标准的荒谬做法并造成像 FOUC 这样的加载时间问题？就像提出这些想法的人没有标准的概念一样。
【问题讨论】：
标签： pagespeed web-standards pagespeed-insights fouc
以下几点有助于更好地理解这个概念。
这违反了 Web 标准，因为在 HTML 中内联 CSS（应该分开）
将 css 规则放在 <style> 标记中的文档头部是完全可以接受的，如果它用于特定目的，如您所描述的情况。在我们使用 styled-components 和 css-in-js 之类的东西的世界中，没有空间进行这种概括（指“这种荒谬的做法”）
以及在 CSS 加载时创建 FOUC
如果你已经准备好你的关键 css，那么每个断点的所有首屏规则都应该在那里，并且不会发生首屏 FOUC。在页面的其余部分，如果您有一个优化良好的页面，很可能没有人会设法真正看到 FOUC 的发生。它会发生得非常快且低于可见内容。
在头部使用 a 正确加载 CSS 和延迟加载 CSS 之间没有实时差异，因此没有真正需要延迟加载样式表。
在大型项目中，css 文件不包含 10 个 css 规则和 2kb 大小。您可能有一些捆绑的 css（或多个 css 文件），其中包含数百个组件、模板和页面的样式规则，而您可能只需要一些规则来处理首屏内容。当浏览器偶然发现链接的 css 文件时，它会立即停止页面渲染，发送对特定资产的请求，并且在完成获取样式表并解析其内容之前不会继续渲染过程。 这个时间很重要。这是绘制屏幕上第一个像素之前的时间。使用上述技术，您可以让浏览器在获取文档后立即开始绘制，而不会让 css 阻塞（除非您有其他阻塞资源）
加载页面仍然需要相同的时间。
为什么网络巨头 Google 会提出如此荒谬的做法，这些做法不符合标准并会造成像 FOUC 这样的加载时间问题？就像提出这些想法的人没有标准的概念一样。
我已经提到的事情应该已经回答了这个问题，所以我只想在这里给你一个建议。这类公司有很多真正有才华和经验丰富的人（他们甚至在编写网络标准和工具等方面做出了贡献）。如果您第一眼不理解某些事情，请进行进一步的研究，询问（就像您所做的那样:-)），并尝试了解您发现错误的事情背后的原因。大多数情况下，有人会发现他之所以认为某些事情“荒谬”和“违反标准”，是因为他的理解不完整，而不是“没有标准概念”。
【讨论】：
<style> 标签适用于少量 CSS - 我对它们没有任何问题。我确实有一个问题，那就是里面的每一点首屏规则。这可能是很多 CSS 为页面增加了额外的重量。当为 WordPress 添加这个 CSS 时，对于每个页面，这是很多甚至可能不会使用的额外 CSS，所以最好只包含标题，然后在页面的其余部分有 FOUC。