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 в этот скрипт?


javascript css pagespeed
person Ryan    schedule 31.03.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам нужно будет расширить скрипт 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);
}
person xengravity    schedule 31.03.2015
comment
Эта штука вообще работает? потому что я сделал то же самое в разделе PageSpeed ​​Suggestions, у меня такое же количество предложений - больше, когда я открываю PageSpeed ​​Insights, у меня возникает еще больше проблем, чем до этого. Единственный способ, который действительно сработал для меня, - это добавить один стиль с этим методом выше другого, который я объявляю специфичным в разделе заголовка. - person sTx; 31.03.2016

arrow_upward
0
arrow_downward

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

person Tommy D    schedule 31.03.2015