Google PageSpeed Insights с несколькими файлами CSS

Question

Google PageSpeed Insights с несколькими файлами CSS

Я оптимизирую свой сайт на основе 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">

... перемещая их из <link> тегов в <head> в вызываемый через 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-файла в этот скрипт?

2 3

javascript css pagespeed

2 ответа:

Если сайт закончен и вам просто нужно улучшить скорость, вы можете сжать все ваши css-файлы и поместить их в голову (конечно, не удаляя оригиналы), у вас будет по крайней мере 15 пунктов улучшения.

0

xengravity · Accepted Answer · 2015-03-31 23:03:34

Вам нужно будет расширить скрипт 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);
}