谷歌PageSpeed洞察與多個CSS文件

我正在優化我的網站基於谷歌的PageSpeed見解。它建議我「優化CSS交貨」爲多個文件（名稱簡化例如的緣故）：從<link>標籤在<head>移動他們的結束標記前通過JavaScript調用谷歌PageSpeed洞察與多個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">

...：

<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文件？

來源

2015-03-31 Ryan

您將需要擴展谷歌的腳本，以便您可以添加多個文件是這樣的：

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

來源

2015-03-31 19:54:23 xengravity

完美的作品 - 謝謝！ – Ryan 2015-03-31 20:32:11

這個東西實際上有效嗎？因爲我在「PageSpeed建議」一節中做了同樣的事情，所以我有相同數量的建議 - 更多，當我打開「PageSpeed Insights」時，在執行此操作之前，我遇到了更多問題。實際上，對我而言，唯一的方法是將這種方法的單個樣式追加到另一個我聲明的特定頭部分 – sTx 2016-03-31 08:05:06

如果網站已經完成並且您只需要提高速度，那麼您可以壓縮所有的css文件並將其放在首位（當然，不會刪除原始文件），您至少可以獲得15分的改進。

來源

2015-03-31 19:41:37

谷歌PageSpeed洞察與多個CSS文件

回答

相關問題