Google 具有多个 CSS 文件的 PageSpeed Insights

Question

我正在根据 Google 的 PageSpeed Insights 优化我的网站。它建议我 "Optimize CSS Delivery" 几个文件（为示例起见简化名称）：

<link rel="stylesheet" href="css/app.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<link rel="stylesheet" href="css/styles.css" type="text/css">

...通过将它们从 <head> 中的 <link> 标记移动到通过结束标记之前的 JavaScript 调用：

<script>
  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'css/app.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>

</body>

如您所见，只有 app.css 被调用。

我的问题是，有没有办法在这个脚本中添加所有三个 CSS 文件？

Answer 1

如果网站做完了，你只是想提高速度，你可以把你所有的css文件都压缩下来放到head里（当然不删掉原件）你至少会有一个提高 15 点。

Answer 2

您需要扩展 Google 的脚本，以便您可以像这样添加多个文件：

var loadCSSFiles = function() {
    var links = ["style1.css", "style2.css", "style3.css"],
        headElement = document.getElementsByTagName("head")[0],
        linkElement, i;
    for (i = 0; i < links.length; i++) {
        linkElement = document.createElement("link");
        linkElement.rel = "stylesheet";
        linkElement.href = links[i];
        headElement.appendChild(linkElement);
    }
};

var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) {
    raf(loadCSSFiles);
} else {
    window.addEventListener("load", loadCSSFiles);
}

Google 具有多个 CSS 文件的 PageSpeed Insights

Google PageSpeed Insights with Multiple CSS Files

javascript

css

pagespeed