优化首屏 CSS答案

【问题标题】：Optimizing above-the-fold CSS优化首屏 CSS
【发布时间】：2014-05-16 23:30:47
【问题描述】：

我想修复“消除首屏内容中的渲染阻止 JavaScript 和 CSS”要求以获得更好的 PageSpeed Insights 分数，但我不太确定解决此问题的最佳方法是什么。

如何最好地平衡新访问者和回访者的页面负载？
什么时候应该异步加载我的 CSS，什么时候不应该？
我应该只对小屏幕使用内联 CSS 吗？

示例

由于内联大量 CSS 会导致后续访问时页面加载速度变慢，因此我可以根据 cookie 为重复访问者提供不同的版本。为了检测首屏 CSS，我可以使用本文中的书签：paul.kinlan.me/detecting-critical-above-the-fold-css/

对于新访客：

<!DOCTYPE HTML>
<html>
<head>
  <title>New Visitor</title>
  <style><!-- insert above the fold css here --></style>
  <noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
  <!-- insert content here -->
  <script>
    // load css
    var node = document.createElement('link');
    node.rel = 'stylesheet';
    node.href = 'style.css';
    document.head.appendChild(node);
    // set cookie
    var exp = new Date();
    exp.setTime(exp.getTime() + 3600 * 1000);
    document.cookie = 'returning=true; expires=' + exp.toUTCString() + '; path=/';
  </script>
</body>
</html>

回访者：

<!DOCTYPE HTML>
<html>
<head>
  <title>Returning Visitor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- content here -->
</body>
</html>

这种方法有什么问题吗？

【问题讨论】：

“为了获得更好的 PageSpeed Insights 分数” – 首先，我会问自己：我的页面实际上是否需要优化，或者是您在引用中所写的一切都是为了score 而优化，而不是因为对用户有任何实际好处？
如果您只使用 1 个外部样式表，性能改进将是微不足道的，因此除非您正在构建下一个 Facebook，否则您将在优化它上投入的时间被浪费了。还有更重要的事情要处理
假设页面确实需要优化，并且所有更重要的事情都已经完成。如何优化关键渲染路径中的 CSS 以获得更好的 PageSpeed 分数，以及实际页面加载时间甚至页面排名？

标签： html css optimization google-pagespeed

【解决方案1】：

存在过度优化之类的事情。您的示例方法增加了不必要的复杂性。您应该查看的是头部部分的最小样式表，它将使折叠上方的所有内容都有意义并符合设计和布局（但不一定要 100% 尊重它）。

对于页面的其余部分，只需在页面末尾加载其余的 CSS，就可以了。如果对您而言重要的是首屏，那么您加载的第一个 CSS 也是如此。其他一切都可以延迟。

【讨论】：