Question

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

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

我知道Google建议只推广＆＃34; small＆＃34;样式表。我不会认为12 KB非常小。所以我对这个解决方案实际上并不满意，我可能会恢复以前的版本。

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

由于

Answer 1

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

Answer 2

目前正在讨论这个话题，谷歌的人建议在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>

Answer 3

如果是大型CSS文件，Google建议仅在内容上方内联所需的样式，并将其余样式推迟到上述内容之后。

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

在HTML中为页面速度内联CSS

3 个答案: