PageSpeed Insights 不符合标准

Question

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

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

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

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

Answer 1

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

This goes against Web Standards by inlining CSS in HTML (which should be separated)

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

as well as creating FOUC when the CSS does load

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

There is no real time difference between loading CSS correctly using a in the head and deferring it until later, so there's no real need to defer the loading of the stylesheet.

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

It still takes the same amount of time to load the page.

它并不总是需要相同的数量。

性能优化不仅在于实际完成加载页面/资源等的每一位需要多长时间。它还在于您可以多快地为用户提供有用的内容(或任何内容)，等等...

Why does a Web giant Google suggest such ridiculous practices which are not Standards compliant and create load-time issues like FOUC? It's like the people that come up with these ideas have no concept of Standards.

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