說明

使用 PageSpeed 或 Lighthouse 測試網頁的時候，很容易遇到這個錯誤，原因也如字面上一樣的淺顯易懂，就是 CSS 過大。可參考官方提供的如何減少無用的 CSS 建議作法。
減少無用的 CSS

解決方法

我整理了以下幾種解決方法

  1. 壓縮 CSS
  2. 減少無用的 CSS
  3. 拆分檔案

壓縮 CSS

由於有另一個檢測項目就是壓縮 CSS，所以文件沒有寫到，這邊就大概提一下。現在很多框架和工具都可以壓縮 CSS，所以也算是有效又簡單解決方案之一，就不做過多說明。

減少無用的 CSS

如同字面上和官方文件所說，找出並刪除無用的 CSS。然而實務上常常會直接使用 CSS 框架，例如 Bootstrap，很容易就無法通過這項檢測。在允許的情況下，我們可以嘗試只引用需要的部分，例如原本在 SCSS 中引用 Bootstrap 可能是這樣寫：

1
@import "bootstrap";

改為依據實際情況引用需要部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
// @import "bootstrap/root";
@import "bootstrap/reboot";
// @import "bootstrap/type";
// @import "bootstrap/images";
// @import "bootstrap/code";
@import "bootstrap/grid";
// @import "bootstrap/tables";
// @import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
// @import "bootstrap/button-group";
// @import "bootstrap/input-group";
// @import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
// @import "bootstrap/card";
// @import "bootstrap/breadcrumb";
// @import "bootstrap/pagination";
// @import "bootstrap/badge";
// @import "bootstrap/jumbotron";
// @import "bootstrap/alert";
// @import "bootstrap/progress";
// @import "bootstrap/media";
// @import "bootstrap/list-group";
// @import "bootstrap/close";
// @import "bootstrap/toasts";
// @import "bootstrap/modal";
// @import "bootstrap/tooltip";
// @import "bootstrap/popover";
// @import "bootstrap/carousel";
// @import "bootstrap/spinners";
@import "bootstrap/utilities";
// @import "bootstrap/print";

上面是 Bootstrap 4 的例子，請依據使用的框架版本找到引用的寫法，其他框架應該也能如法泡製。

拆分檔案

這個方法的核心概念就是，優先載入第一個畫面必要的 CSS，其他不是首次繪製畫面需要用到的 CSS，可以延遲或只在需要時載入。詳細作法請參考非同步載入 CSS 這篇文章。上面使用 Bootstrap 框架的案例，可以拆成 Bootstrap 核心的部分和其他次要的部分，例如 modal 和 popover 可以延遲載入。