Save and Share:
當 CSS 打包成單一檔案時，即使經過 tree-shaking，由於不同的 @media 環境（行動裝置、平板、桌機、深色/淺色/其他主題等），仍然包含許多未使用的 CSS。
這對 Core Web Vitals 不利：首次輸入延遲 (FID)、最大內容繪製 (LCP)、累積版面配置偏移 (CLS)，以及其他重要的效能和可用性指標：首次內容繪製 (FCP)、總封鎖時間 (TBT)、可互動時間 (TTI) 和 DOMContentLoaded 事件。
有一種方法可以透過將 CSS 分割成不同的檔案來顯著改善 CSS 的載入和渲染效能，其中每個檔案僅包含該環境所需的程式碼。
將您的 CSS 分割成不同的檔案：
📄main.css - 包含所有 @media 條件所需的 CSS
📄screen.css - 僅包含螢幕 @media 條件所需的 CSS
📄print.css - 僅包含列印 @media 條件所需的 CSS
📂breakpoints
📄x-small.css - 僅包含超小斷點所需的 CSS
📄sm.css - 僅包含小斷點所需的 CSS
📄md.css - 僅包含中斷點所需的 CSS
📄lg.css - 僅包含大斷點所需的 CSS
📄xl.css - 僅包含特大斷點所需的 CSS
📄xxl.css - 僅包含超特大斷點所需的 CSS
📂themes
📄light.css - 僅包含淺色主題所需的 CSS
📄dark.css - 僅包含深色主題所需的 CSS然後，像這樣引入 CSS 檔案：
<link rel="stylesheet" href="main.css" media="all">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="x-small.css" media="(max-width: 575px)">
<link rel="stylesheet" href="sm.css" media="(min-width: 576px)">
<link rel="stylesheet" href="md.css" media="(min-width: 768px)">
<link rel="stylesheet" href="lg.css" media="(min-width: 992px)">
<link rel="stylesheet" href="xl.css" media="(min-width: 1200px)">
<link rel="stylesheet" href="xxl.css" media="(min-width: 1400px)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">透過這種方法，現代瀏覽器會優先載入目前 @media 條件所需的 CSS，因此頁面渲染速度會快得多，因為使用者不需要等待載入未使用的 CSS 部分。
如果您將所有 CSS 打包在一個檔案中，並且未在 link 標籤的 media 屬性中指定條件，則瀏覽器會等待整個 CSS 集合載入完成後才開始頁面渲染。這會大幅減慢頁面渲染速度。
此範例中的斷點基於 Bootstrap 5。 鑑於他們即將新增對淺色/深色/其他主題的支援，這種方法對於 Bootstrap 來說將變得更加重要。
如果您想讓網路變得更好、更快，請：
- 分享這篇文章，
- 將這篇文章發送給您使用的框架開發人員，
- 在您的網站上實作這種 CSS 分割方法。
在社群媒體上分享或稍後儲存：
如果您想閱讀更多關於此最佳化和瀏覽器行為的資訊，請參閱以下內容：
- Vadim Makeev 的文章「條件式自適應 CSS。可能提升您效能的瀏覽器行為」。本文的封面截圖取自他的優秀文章，其中有更多截圖和實驗。
- MDN Web Docs：CSS 效能最佳化。