PageSpeed中的渲染攔截CSS - 單個文件

我正在測試前端的優化最佳實踐。所以我已經學會了使用gulp和npm合併和縮小我的CSS和JS文件到單個all.min.css和js.min.cssPageSpeed中的渲染攔截CSS - 單個文件

在Google PageSpeed中，我警告「在上面消除渲染阻塞JavaScript和CSS摺疊內容「。所以我在我的js腳本中添加了「async」。

<script async src="/dist/js/all.min.js"></script>

工作正常，但如何處理我的.css文件？

<link rel="stylesheet" href="/dist/css/all.min.css">

這是我的網站（33kb）中的單一css文件。它包括bootstrap，字體真棒，幾個小庫和我的style.css。

在html源代碼中包含這個大文件是一個好習慣嗎？我做錯了什麼？我想至少得到一次100分，但不要做出愚蠢，不實際的事情。

來源

2017-10-19 norr

您只需將CSS文件移動到頁面的底部，以便HTML在CSS之前加載。

BE的，這可以引起無樣式內容的閃光，

的無樣式內容的閃光（FOUC，也閃爍無樣式文本或FOUT的）1 [2]是其中出現一個網頁的實例由於Web瀏覽器引擎在檢索到所有信息之前呈現頁面，所以在加載外部CSS樣式表之前簡單地使用瀏覽器的默認樣式。

Source

來源

2017-10-19 21:33:34

你可以防止此通過簡單地增加直列式'顯示：無;上主體'，然後在後來加載的CSS文件'。體{顯示：塊; }' –

你得到了

<link rel="stylesheet" href="/dist/css/all.min.css">

在 <header>頁面

。這是常見的做法。 Pagespeed Insights希望您將其刪除，並將其放置在內容後面（在頁面加載時不顯示滾動的情況下，屏幕上顯示的內容之後的「below-the-fold」=>）。例如將其放置在頁腳中。

來源

2017-10-19 21:33:41

Google PageSpeed工具提供了一般準則，而不是實際的速度測量。因此，如果你沒有達到完美的100分，你就不應該失眠。

這就是說，在沒有「堵以上的倍渲染」送你的CSS的最佳方式：

添加所必需的上面屏內容作爲內嵌樣式的所有樣式HTML頭。例如：

<style> 
    #logo { 
     // ... 
    } 
    #navigation { 
     // ... 
    } 
    .hero-banner { 
     // 
    } 
</style>

負載其餘樣式（級聯和你的情況精縮到一個文件中），異步，它是在結束標記之前通過延遲或異步JavaScript典型的做法。例如：

<script> 
    var deferstyles = document.createElement("link"); 
    deferstyles.rel = "stylesheet"; 
    deferstyles.href = "/dist/css/all.min.css"; 
    document.getElementsByTagName('head')[0].appendChild(deferstyles); 
</script>

來源

2017-10-19 21:54:22 tobiv

PageSpeed中的渲染攔截CSS - 單個文件

回答

相關問題