用于改善页面加载时间的非阻塞样式表答案

【问题标题】：Non-blocking stylesheet for improving page load time用于改善页面加载时间的非阻塞样式表
【发布时间】：2014-07-02 16:08:25
【问题描述】：

我正在尝试优化网站的页面加载时间。现在我已经实现了 Google PageSpeed Insights 给我的几乎所有建议。但是它一直建议使用非阻塞样式表，以便可以在加载样式表之前呈现首屏内容（使用内联 CSS）：

消除首屏内容中阻止渲染的 JavaScript 和 CSS。

您的页面有 X 阻止 CSS 资源。这会导致您的页面呈现延迟。

您页面上大约 Y% 的首屏内容可能是无需等待以下资源加载即可呈现。尝试延迟或异步加载阻塞资源，或内联这些资源的关键部分直接在 HTML 中。

它指的是the following information 应该如何做。基本上：

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

虽然我从未在 HTML 标记之外看到指向样式表标记的链接，但我使用此策略更改了我的网站。

但是，Google PageSpeed 洞察的在线版本仍然抱怨样式表。更奇怪的是，类似的浏览器插件（PageSpeed Insights for Chrome）说the exact opposite thing：

当你从文档的主要文本中移除内联样式块和元素并将其放在页眉中时，显示性能将得到改善。

现在我的问题是：

哪一个是正确的？（从 SEO 的角度来看，当然从 UX 的角度来看）
还有其他让他们都满意的方法吗？（如果 HTML5 和 JavaScript 解决方案是跨浏览器并且确实可以缩短页面加载时间，则可以接受）

【问题讨论】：

我不认为“AJAX'ing in”你的样式表会有所帮助，甚至不会起作用，因为这意味着这些样式将在事后应用。在我的书中，将链接标签放在 html 标签之外绝对是不正确的。愚蠢的问题，但是如果您不需要当前页面的样式，为什么要首先在此处加载样式表？此外，影响页面加载时间的第一件事是请求数量，这意味着更简单的解决方案是尽可能组合样式表。
@oliakaoil 我完全同意。即使我的样式表已经以任何其他方式组合和优化，我仍然想摆脱谷歌的建议（以改善 SEO）。
对不起，应该事先问清楚，错误消息的确切文本是什么。还有，这个你刷了吗？ stackoverflow.com/questions/8197072/…
@oliakaoil 有趣的问题，但答案并没有真正说明样式表。我已经添加了两种产品的建议/错误消息。

标签： javascript css html cross-browser seo

【解决方案1】：

如果可能的话，我建议您优先获得在线 PageSpeed Insights 的最高分，如下所示获得 100/100。它将使您的页面参与 Google 搜索排名，因为页面速度得分是 SEO 因素之一，正如 here 所解释的那样。

除非找出 CSS 的哪一部分用于页面的 above-the-fold initial view，否则没有其他解决方案。一旦你知道这一点，你应该在你的 HTML 标题中 inline 这个 CSS 并延迟加载你的 CSS 的其余部分。

然后你可以找到任何解决方案来最小化影响，只要分数以及每个重要方面的验证，例如html5 和 css 保持不变。

]

【讨论】：

【解决方案2】：

Google 希望您尽可能快地加载“首屏”内容，因为您可以创建一个单独的样式表，为其提供基本结构编码，如宽度等。您也可以尝试删除该区域中的任何重图像，如果不能，则尝试减小这些图像的大小。

然后，您可以创建第二个样式表以在第一个样式表加载后加载，您可以消除有关 css 的错误。

【讨论】：