優化CSS加快網站速度的方法

• 2019 年 11 月 6 日
• 筆記

• 使用簡寫
• 查找並刪除未使用的 CSS
• 內聯關鍵 CSS
• 用 CSS 替換圖片
• 使用顏色快捷方式
• 刪除不必要的零和單位
• 刪除過多分號
• 使用紋理圖集
• 省略 px
• 避免需要性能要求的屬性
• 刪除空格
• 刪除注釋
• Sass 的檢查
• 設置快取
• 其它

使用簡寫

p { margin-top: 1px;      margin-right: 2px;      margin-bottom:  3px;      margin-left: 4px; }    p { margin: 1px 2px 3px 4px; }

查找並刪除未使用的 CSS

使用Google瀏覽器：

• 查看>開發人員>開發人員工具，並在最近的版本中打開Sources選項卡，然後打開命令菜單。然後，選擇Show Coverage，在Coverage analysis窗口中高亮顯示當前頁面上未使用的程式碼
• 使用Audits進行逐行分析，打開開發者工具，點擊 Audits 欄位，點擊 Run audits 開始分析結果

內聯關鍵 CSS

載入外部樣式表需要花費時間，這是由於延遲造成的——因此，可以把最關鍵的程式碼位放在 head 中。

用 CSS 替換圖片

例，以下這個程式碼片段可以確保所討論的圖片顯示為其自身的灰度版本

img {      -webkit-filter: grayscale(100%);      /* old safari */      filter: grayscale(100%);  }

使用顏色快捷方式

某些情況下，速記描述或顏色名稱可以更短

target { background-color: #ffffff; }  target { background: #fff; }

刪除不必要的零和單位

可以刪除尾隨和跟隨的零

padding: 0.2em;  margin: 20.0em;  font-size: 0px;    padding: .2em;  margin: 20em;  font-size: 0;

刪除過多分號

允許省略屬性組中的最後一個分號

div {  . . .  	font-size: 1.33em  }

使用紋理圖集

將一系列小圖片組合成一個大的PNG 文件，然後通過 CSS 規則將其分解

省略 px

為 0 的數值默認單位是 px—— 刪除 px 可以為每個數位元組省兩個位元組

div {padding:0px; margin:0px;}    div {padding:0; margin:0}

避免需要性能要求的屬性

影響性能的屬性

border-radius  box-shadow  transform  filter  :nth-child  position: fixed;

刪除空格

解析器的角度看，空格沒有什麼用處。在發布前刪除它們，更好的方法是將此任務委託給 shell 腳本或類似的工具(gulp…)

刪除注釋

注釋對編譯器也沒有任何作用,可以在發布前刪除

Sass 的檢查

輸出文件不一定最優

設置快取

伺服器上設置快取頭，非覆蓋式發布等

其它

伺服器使用 HTTP/2 和 gzip 壓縮