多个CSS文件的Google PageSpeed Insights

Question

多个CSS文件的Google PageSpeed Insights

3

我正在根据Google的PageSpeed Insights优化我的网站。它建议我针对多个文件（名称简化为示例）“优化CSS传递”：

<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>标签移动到在闭合</body>标签之前通过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文件？

- Ryan

2个回答

0

如果网站已完成，只需要提高速度，您可以压缩所有 CSS 文件并将它们放在 head 标签中（当然不要删除原始文件），这样至少可以提高 15 分的性能。

- Tommy D

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xengravity · Accepted Answer

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

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);
}