html - 内联 Critical CSS 值吗？

Question

当您在外部文件中阻止 CSS 时，Google Pagespeed 会提示。在 HTTP/1 中这可能是有道理的，但是现在对于 HTTP/2 呢？

如果您内联关键 CSS(在首屏之上)，那么这些字节仍然需要下载、解析和其他一切，所有这些都在文档呈现之前完成。

使用 HTTP/2，无需建立另一个连接，因为可以重用相同的连接，因此这不是开销。此外，借助服务器推送，您甚至可以在 CSS 文件被请求之前推送它。

那么...内联关键 CSS 仍然是推荐的做法吗？

---

我同意在繁重的站点中，您可能不想下载所有 CSS。例如，如果您正在访问画廊，则只需要 gallery.css，不需要 profile.css，也不需要 forum.css 等。但这可以通过 block 和其他技术进行管理(并且仍然使用外部 css 文件，无需内联他们)

内联还使 CSS 不可缓存。

我错过了什么？

---

这与可能的重复问题无关。将此标记为重复的人不知道什么是关键 CSS，或者可能甚至没有读过这个问题。

Answer 1

是的，它仍然可以提供帮助。很多。

当您下载 HTML 时，您仍然需要等待它下载，然后处理它，然后再次请求 CSS 文件并等待这些文件下载。

虽然在 HTTP/2 下下载额外的资源会更快，并且当你有很多额外的资源要下载的时候使用它时没有那么大的瓶颈，但 CSS 文件仍然不能请求，直到 HTML 文件已下载并处理。此外，CSS 文件通常由浏览器确定优先级，因为它是渲染阻塞的，因此通常是请求的第一个资源之一，这意味着避免 HTTP/2 的行头阻塞对 CSS 资源没有好处。

当 HTTP/2 推送变得更加普遍时，它可能不会像对 HTML 页面的请求也可以推送所需的 CSS 文件那样产生那么大的影响，但这增加了复杂性，并且仍然存在一些关于它如何工作的问题(例如，如果浏览器已经有 CSS 文件，那么服务器应该以某种方式知道不要推送它)。

如果您想了解更多详细信息(这是在 HTTP/2 站点上)，我写了一篇关于这个主题的博客文章:https://www.tunetheweb.com/blog/inlining-css-is-not-for-me/ .正如我在那篇文章中解释的那样，我仍然不是这个过程的忠实粉丝......