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

Question

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

现在，我的 CSS 样式并不小。我内联了大约 12 KB 的 CSS 代码，使每个页面实际上大了 12 KB。所以从本质上讲，这应该会使所有查看多个页面的用户的页面速度变慢。

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

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

谢谢

Answer 1

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

Answer 2

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

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

Answer 3

这个话题目前正在争论中，Google 的人建议在您的 HTML 中内联 above-the-fold/critical CSS 以优化您的网站并进行快速初始绘制。然而，这确实违背了 separation of concerns.

的原则

大部分 CSS 保留在外部压缩样式表中，但 layout/headings 等的一些基本大块将被内联。您可以手动 select 这些样式或使用关键 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>

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

Inlining CSS in HTML for page speed

html

css

performance

pagespeed