CSS优化和PageSpeed Insights

Question

我在我的网站 - www.gpsheatmap.com 运行了 Google PageSpeed Insights，并建议我更改我的样式表(https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example)的加载方式 -

<link href="/static/css/landing-page.css" rel="stylesheet">

致 -

<script>
  var cb = function() {
    var l = document.createElement('link'); 
    l.rel = 'stylesheet';
    l.href = '/static/css/landing-page.css';
    var h = document.getElementsByTagName('head')[0]; 
    h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>

我在我的样式表中尝试了这个方法，它明显改变了加载方式，你会先看到没有应用CSS的界面，然后一秒钟后才会看到样式表被应用。这是在Firefox中测试的。

我应该忽略这种方法，还是可以修复它？

- farrellmr

---

请查看这个链接。 - Shayan

CSS和JS文件在第一次加载后会存储在缓存中，因此我认为运行脚本来加载它不会有任何影响。如果您将CSS文件存储在本地存储中，速度会更快--https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/ - Tasos

我认为这是谷歌推荐的真正糟糕的东西。通过JavaScript函数在DOM准备就绪时加载CSS真的很烦人。而且它会导致Farrellmr所描述的问题：稍后才能看到应用的样式。为什么谷歌会推荐这种垃圾？这不是谷歌在推荐垃圾时的第一选择（例如，对于您需要的所有功能，请使用“-webkit-”前缀）。 - Marcos Pérez Gude

Answer 1

你应该考虑关键路径并将所有必要的样式放在部分，以避免FOUC（仅针对折叠前内容的样式）。这可以通过手动提取样式或使用像critical-path-css-demo for gulp这样的自动任务来完成，特别是对于大型网站。

无论如何，如果选择使用javascript加载所有样式表，请考虑仍将它们包含在

- Fabrizio Calderan