CSS /頁面加載速度

Question

只是想真正得到一些意見，我試圖提高我的網站的加載速度，並且Google pagespeed提出的一種方法是從我的CSS文件中爲每個CSS文件移除未使用的CSS頁。

目前我正在爲網站上的每個頁面使用一個主CSS文件。

我的問題是每個頁面都有單獨的CSS文件會使整體加載時間更快？我想第一頁會加載得更快，但是每個頁面都會有一個不同的CSS文件，這可能最終在整個網站訪問中花費更長的時間？

另外的PageSpeed似乎警惕包括多個CSS文件，所以我想我不能真的「層」起來......

Answer 1

在這種情況下有兩個相互矛盾的優化指令。當然，如果可能的話，你應該減小文件的大小，但你也應該儘可能少的請求。使用全局樣式表減少了請求的數量，但它意味着一個更大的文件。

你只需要看看你的需求。如果您需要縮短初始加載時間，則應將樣式移出全局樣式表。如果您需要減少請求數量，則應使用全局樣式表而非單個頁面樣式表。

Answer 2

如果CSS文件緩存則包括多個文件不會是一個優點。

注

出於性能方面的規則關於CSS可以

1. 嘗試涅槃你的CSS

2. 優化CSS精靈

3. 避免使用濾鏡

4. 避免CSS表達式

如需更詳細的閱讀經歷這個

Best Practices for Speeding Up Your Web Site

Answer 3

我不會擔心太多。通過過濾器運行你的CSS去除評論和空白，知道的小快捷方式，如padding: 1em 3em .5em 5px等，確保文件正確緩存，並從你的服務器發送gzipping，你會沒事的。 CSS通常只是有效載荷的一小部分，不值得失眠。

我分裂一個CSS文件（交付給客戶端）的唯一時間是，如果我的網站有很大的部分需要獨特的風格，大多數人永遠不會冒險：例如，管理部分。

Answer 4

做一點思考典型用戶如何使用你的視線。如果（像很多網站一樣）普通用戶在繼續之前只查看單個頁面，那麼爲每個頁面分配專門的CSS文件可能是值得的。

然而，在絕大多數情況下，一個CSS文件肯定是首選的解決方案

Answer 5

CSS文件被瀏覽器緩存無論如何，所以要麼你有一個單一的文件或多個分立的，不會在第一次使用之後，所有這些東西都會被加載。

Answer 6

對所有頁面只使用一個CSS。一旦你的css被緩存了，那麼就不會有一次又一次地下載這個css的開銷。
此外，廣告亞當說Minify你的CSS

Answer 7

下載並安裝YSlow，它會給你的你的網頁速度有多快，以及實際的步驟來提高性能的準確描述。

Answer 8

DustMeSelectors是您需要的擴展。它會通過你的所有網站（並提供所有這些都是相互關聯的）將獲取你的CSS中哪些選擇器不被使用任何地方。