pagespeed - PageSpeed Insights 不符合标准

Question

Google PageSpeed 建议<style>在头部的标签中添加关键 CSS，并将外部 CSS 推迟到 HTML 的末尾。

通过在 HTML 中内联 CSS（应该分开）以及在 CSS 加载时创建 FOUC，这违反了 Web 标准。可见性可以设置为在加载 CSS 后一次性显示整个页面，但这会创建整个页面的 FOUC，看起来也不好看。

在头部使用 a 正确加载 CSS 和延迟加载 CSS 之间没有实际的时间差异<link>，因此没有真正需要延迟加载样式表。加载页面仍然需要相同的时间。当最好只显示样式页面时，为什么要为用户提供半样式页面。

我的问题是：为什么一个网络巨头谷歌会提出如此荒谬的做法，这些做法不符合标准并造成像 FOUC 这样的加载时间问题？就像提出这些想法的人没有标准的概念一样。

标签： pagespeedweb-standardspagespeed-insightsfouc

Answer 1

这里有一些要点可以帮助更好地理解这个概念。

通过在 HTML 中内联 CSS（应该分开），这违反了 Web 标准

将 css 规则放在文档头部的<style>标签中是完全可以接受的，如果它用于特定目的，如您所描述的情况。在我们使用 styled-components 和 css-in-js 之类的东西的世界中，没有空间进行这种泛化（参考“这种荒谬的做法”）

以及在 CSS 加载时创建 FOUC

如果你已经准备好你的关键 css，那么每个断点的所有首屏规则都应该在那里，并且不会发生首屏 FOUC。在页面的其余部分，如果您有一个优化良好的页面，很可能没有人会设法真正看到 FOUC 的发生。它会发生得非常快并且低于可见的内容。

在头部使用 a 正确加载 CSS 和延迟加载 CSS 之间没有实际的时间差异，因此没有真正需要延迟加载样式表。

在大型项目中，css 文件不包含 10 个 css 规则和 2kb 大小。您可能有一些捆绑的 css（或多个 css 文件），其中包含数百个组件、模板和页面的样式规则，而您可能只需要一些规则来处理首屏内容。当浏览器偶然发现一个链接的 css 文件时，它会立即停止页面渲染，它会发送对特定资产的请求，并且在完成获取样式表并解析其内容之前不会继续渲染过程。这个时间很重要。这是绘制屏幕上第一个像素之前的时间。使用上述技术，您可以让浏览器在获取文档后立即开始绘制，而不会让 css 阻塞（除非您有其他阻塞资源）

加载页面仍然需要相同的时间。

1. 它并不总是需要相同的数量。
2. 性能优化不仅在于实际完成加载页面/资源的每一位等所需的时间。还在于您可以多快地为用户提供有用的内容（或任何内容），以及更多......

为什么网络巨头谷歌会提出如此荒谬的做法，这些做法不符合标准并造成像 FOUC 这样的加载时间问题？就像提出这些想法的人没有标准的概念一样。

我已经提到的事情应该已经回答了这个问题，所以我只想在这里给你一个建议。这种类型的公司有很多非常有才华和经验的人（他们甚至在编写网络标准和工具等方面做出了贡献）。如果您乍一看不明白，请进行进一步的研究，询问（就像您所做的那样:-)），并尝试了解您发现错误的原因。大多数情况下有人会发现，他之所以认为某些事情“荒谬”和“违反标准”，是因为他的理解不完整，而不是他们“没有标准概念”。