如何從main.css文件中刪除關鍵CSS

我正在努力提高頁面速度。我正在使用Critical Path CSS Generator tool來識別上面的CSS。然後，我將關鍵CSS嵌入as suggested，並異步加載完整的CSS。如何從main.css文件中刪除關鍵CSS

但我最終得到了很多重複的CSS，這並不是那麼理想。所以我的問題是：

如何從main.css文件中刪除關鍵的CSS？

在此先感謝。

2015-12-04 Damjan Pavlica

在我看來，這些工具中的一些超出了「上方」的建議。如果你的css被縮小，壓縮，並從一個文件加載，那麼它不會減慢你的頁面。從表單中抽取特定樣式以進行內聯「摺疊」樣式只會產生凌亂，難以管理的代碼，而這些代碼不會明顯更快。 Pagespeed分數是一個很好的參考，但它不是一切。 –

我同意，但客戶堅持使用Google PageSpeed結果。 –

然後，您只需將css文件放在頁腳中，並在文件頂部有內聯樣式，僅用於加載頁面時可見的項目（摺疊之上）。您將需要逐頁進行此操作。 –

雖然看起來像是一種反模式，但是所有在您的文檔中嵌入文檔SHOULD的上面的CSS應該複製到您的外部CSS文檔中。這樣，您可以製作一個站點範圍的整個包，可以爲整個站點提取一次，但是初始頁面加載速度會加快。雖然這確實會導致額外的「浪費」KB，但優點是，只要將HTML發送到客戶端，就可以獲得必要CSS的一小部分，從而減少呈現客戶端初始視圖所需的時間。另外，要清楚的是，如果你正確地遵循這種做法，網站上的每一頁都將有一組不同的摺疊css，因爲每個頁面都有不同的摺疊內容/標籤這將無法從完整的外部文件中移除上述摺疊的CSS（假設您將所有CSS連接到一個文件中）。

你可以閱讀更多關於上述摺疊css here的做法。

如果你真的關心代碼重複（儘管你不應該在這種情況下），你可以使用cookie來跟蹤用戶是否曾經訪問過該網站。如果用戶以前沒有用過，那麼你可以內聯上面的CSS。如果用戶之前已經使用過，則可以假定用戶已經擁有完整的CSS文件，並且CSS文件將從瀏覽器緩存中提取。

有很多關於瀏覽器緩存不可靠的文章，所以我的建議是，你只要做你已經做的事情來滿足客戶的需求。

應該提及的另一件事是，一旦HTTP/2變得更流行，這種做法將基本消失，因爲隨後的HTTP請求將不會像現在那樣昂貴。考慮到密集的工具/努力，這種做法需要（特別是在未來針對HTTP/2進行校對時），它可能會更好（我認爲是），以避免它完全。

來源

2015-12-07 23:19:23

爲什麼要在外部樣式表中複製上述的CSS？ – acjay

假設您正在遵循其他最佳做法，您的外部工作表應該是包含您網站所有CSS的一個文件。當用戶訪問您網站上的其他頁面時，您需要在瀏覽器緩存中進行瀏覽，因爲上述CSS應該根據您所在的頁面進行更改。 –

Gotcha。這就是我所設想的，但從你的回答中並不清楚。我編輯澄清。我認爲「最好」是有爭議的，因爲這取決於服務內容的具體細節和部署風格變化的頻率，並且有多種優化方法（正如你引用的，HTTP/2再次改變了遊戲）。總的來說，很好的答案:) – acjay

-3

您是否在瀏覽器中運行audit，然後轉到頁面速度見解
那裏您可以看到刪除未使用的css規則和內聯性能的建議。

一定要在頁面的開始寫整個style，避免影響性能比較

和頁面之間這些標記重要，inline應該是thumbnails但不能用於造型的頁面
例如：

<p style="padding:2px">something to have some padding</p>

來源

2015-12-09 16:53:40

@DhruvJoshi爲什麼它不是試圖回答這個問題？運行審計，轉到pageSpeed洞察，按照建議刪除內聯性能。聽起來像這可能是一個答案？ – Trilarion

我不明白！ :-( –

如何從main.css文件中刪除關鍵CSS

回答

相關問題