在 HTML 中内联 CSS 以提高页面速度答案

【问题标题】：Inlining CSS in HTML for page speed在 HTML 中内联 CSS 以提高页面速度
【发布时间】：2016-05-31 21:54:42
【问题描述】：

我正在尝试针对 Google 的 PageSpeed Insight 优化我的网站速度。速度测试抱怨我的外部 CSS 文件，所以我尝试将它们内联到 HTML 文档中，这导致报告的页面速度显着提高。

现在，我的 CSS 样式并不是很小。我已经内联了大约 12 KB 的 CSS 代码，使每个页面有效地增大了 12 KB。因此，从本质上讲，这应该会使所有查看多个页面的用户的页面速度变慢。

我知道 Google 建议只内联“小”样式表。我真的不会认为 12 KB 非常小。所以我实际上对这个解决方案不是很满意，我可能会恢复我以前的版本。

是否有关于何时内联和何时不内联的建议？

谢谢

【问题讨论】：

要获得 100，您可能需要内联它，我也为 30k-60k IIRC 这样做了。
您是否使用任何其他样式表，例如 google 字体，或任何其他链接到实际 URL 的自定义外部表？
请注意，如果您网站上的多个页面使用相同的 css 样式，那么在外部文件中提供它们可能是有意义的，因为浏览器通常会将该文件保存在缓存中并且不需要下载再说一遍。内联样式实际上意味着为每个 html 页面再次下载它们。
是的，允许缓存的可能性也是我将其保存在外部文件中的动机。但谷歌似乎在他们的速度测试中不这么认为。

标签： html css performance pagespeed

【解决方案1】：

最好的方法是使用外部 css 文件，但先压缩它们，然后再使用这些压缩版本。这将显着减小文件大小并提高页面速度。

【讨论】：

谢谢，我想这就是我要做的。

【解决方案2】：

这个话题目前正在争论中，Google 的人建议在您的 HTML 中内联首屏/关键 CSS 以优化您的网站并快速进行初始绘制。然而，这确实违反了separation of concerns 的原则。

您的大部分 CSS 保留在外部压缩样式表中，但您的布局/标题等的一些基本大块将被内联。您可以手动选择这些样式或使用关键的 CSS 生成器like this one

The latest advice from Jake Archibald at Google 是内联关键 CSS，然后将压缩的样式表拆分为组件，这些组件在组件本身加载到标记中时加载：

  <link rel="stylesheet" href="/site-header.css">
  <header>…</header>

  <link rel="stylesheet" href="/article.css">
  <main>…</main>

  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>

【讨论】：

【解决方案3】：

对于大型 CSS 文件，Google 建议仅对首屏内容所需的内联样式，并将其余样式推迟到首屏内容之后加载。

有关更多信息，请阅读 Pagespeed Insights 文档。 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

【讨论】：