優化CSS文件大小過大

Question

我試圖通過Google PageSpeed Tools檢查我的網站速度。

谷歌的PageSpeed工具結果：

http://cellsoftware.co.uk/wp-content/cache/autoptimize/css/autoptimize_741fb0cdb70079b195ed32dd2fe38206.css 

CSS文件太多大。我下載了檢查大小，它的大小爲1.11MB。之後我試圖減少css的Critical Path CSS Generator它的容量MAX：800000個字符，但我的css文件有1169501個字符。所以它不能減少。

那麼我可以使用什麼過程進行優化？

Answer 1

有點晚了，但我的方法是看看爲什麼你的CSS文件是如此之大。 1.11MiB造型太多了。爲了比較，一個好的CSS尺寸應該低於150KiB，也許最大200KiB。如果你的CSS結束了，你可能會做一些優化。幾點優化：

• 未使用的CSS。你的樣式表是否包含甚至沒有使用的CSS規則？有些工具可以掃描/抓取您的整個網站，併爲您提供未使用樣式行的引用。
• 任何數據URI就像CSS中的base64編碼圖像？也許考慮把這些拉出來。但是，如果這是您的情況，您可能可以通過某種圖像文件大小處理工具來優化圖像，然後將它們重新編碼爲您的CSS。
• 風格重複。如果一組類有很大一部分風格重疊，那麼它們應該共享一個風格定義，然後根據特定的風格要求在CSS下單獨進行更改。
• 過度使用複雜的選擇器。通常使用ID或類名是首選，應該避免使用複雜的級聯DOM選擇器。這不僅會傷害瀏覽器對CSS的解析，而且會使CSS文件本身膨脹。

如果您使用的模板（看起來像您使用Wordpress），那麼我幾乎建議扔掉您當前的模板，得到一個很好的靠近你想要的樣式和進一步的樣式那個有着上述規則的人。我相信這可能是您通往快速網站的最快途徑。