Question

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

如何才能最好地平衡新访问者和回访者的页面加载量？
我应该何时异步加载我的CSS？
我是否应该只为小屏幕内联CSS？

相关演示文稿：Optimizing the Critical Rendering Path

实施例

由于内联大量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>

这种方法有什么问题吗？

Answer 1

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

对于页面的其余部分，只需在页面末尾加载其余的CSS，你应该没问题。如果对你来说重要的是首要问题，那么你加载的第一个CSS也是如此。其他一切都可以推迟。

优化首屏CSS

实施例

1 个答案: