Question

我正在尝试优化网站的页面加载时间。现在我已经实现了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标记之外看到过样式表标记的链接，但我使用此策略更改了我的网站。

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

当您从文档的主文本中删除内联样式块和元素并将其放在标题中时，显示性能将得到改善。

现在我的问题是：

哪一个是正确的？（从用户体验的角度看SEO和课程的视角）
还有另一种让他们都高兴的方式吗？（如果HTML5和JavaScript解决方案是跨浏览器且执行改善页面加载时间，则可以接受它们）

Answer 1

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

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

您可以找到任何解决方案，只要分数以及每个重要方面的验证，例如最小化效果， html5得到维护。

PageSpeed Score 100/100 ]

Answer 2

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

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

用于缩短页面加载时间的非阻塞样式表

2 个答案: