文章

CSS 優化與性能

發布於 更新於
作者 Ned Hsu 8 分鐘閱讀

CSS 優化與性能

在現代網頁設計中，CSS 的性能對網站的載入速度和用戶體驗有著重要影響。隨著網頁規模和樣式複雜性的增加，優化 CSS 成為提升網站性能的關鍵一環。以下是一些 CSS 優化的實踐方法，可以幫助你提高網站的性能。

1. 移除不必要的 CSS

  • 刪除未使用的樣式：隨著時間的推移，CSS 文件中可能會累積許多未使用的樣式規則。定期檢查並刪除未使用的樣式可以減少文件大小，提高加載速度。
  • 使用工具檢查未使用的 CSS：工具如 PurifyCSS、UnCSS 和 CSSNano 可以自動檢測和移除未使用的 CSS 規則。

2. 壓縮和最小化 CSS

  • 壓縮 CSS 文件：通過移除所有不必要的空白、換行和註釋來減小 CSS 文件的大小。這可以使用工具如 CSSNano 或 CleanCSS。
  • 最小化文件請求數量：將多個 CSS 文件合併為一個文件，減少 HTTP 請求數量。HTTP/2 協議雖然改善了多個文件的並行請求，但減少請求數量仍有助於提升性能。

3. 使用高效的選擇器

  • 避免使用高複雜度的選擇器：例如，避免使用後代選擇器 (.parent .child)，因為它會導致瀏覽器花費更多時間進行 DOM 查詢。優先使用類選擇器 (.class-name) 或 ID 選擇器 (#id-name) 進行樣式設置。
  • 最小化選擇器深度：選擇器的嵌套層次不應該過深，這會增加樣式的計算複雜度。減少選擇器深度可以幫助瀏覽器更快地解析和應用樣式。

4. 使用 CSS 預處理器

  • 採用 CSS 預處理器（如 SASS 或 LESS）：這些工具允許你使用變數、函數、循環和條件語句，從而減少代碼重複，提高代碼的可讀性和可維護性。它們還支持自動壓縮和最小化 CSS。

5. 合理使用 CSS Variables（CSS 變數）

  • CSS 變數提高重複樣式的效率：CSS 變數可以讓你定義全局的顏色、字體大小等樣式，並在整個樣式表中多次使用，這樣不僅提高了可維護性，還能減少樣式的重複定義。
1
2
3
4
5
6
7
8
9

:root {
  --primary-color: #4CAF50;
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
  color: var(--primary-color);
}

6. 使用響應式設計的最佳實踐

  • 避免冗餘的媒體查詢：當為不同的屏幕尺寸設置樣式時，確保不重複定義相同的樣式。將通用樣式放在一處，僅針對特定情況使用媒體查詢進行覆蓋。
  • 使用 min-width 和 max-width 媒體查詢：優化響應式設計中的媒體查詢，確保它們的定義覆蓋合理且不重疊。

7. 延遲或異步加載 CSS

  • 將重要樣式放在頁面上部：確保頁面首屏內容的關鍵樣式優先加載，讓頁面盡快渲染，減少頁面首次渲染時間（FCP, First Contentful Paint）。
  • 延遲加載非關鍵 CSS：對於不影響首屏內容的 CSS，可以使用異步加載的方法。可以使用屬性 media="print"，然後在頁面加載後動態更改為 media="all"。
1

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

8. 使用更小的圖片和 SVG

  • 壓縮圖片：減少圖片大小對於優化 CSS 和提升網站性能至關重要。使用 WebP 格式代替 PNG 或 JPEG，可以進一步減小圖片大小。
  • 使用 CSS sprites：將多個小圖標合併成一個大圖片，並使用 CSS 的背景定位技術顯示相應的部分，減少多個 HTTP 請求。
  • 使用 SVG：SVG 是一種基於 XML 的矢量圖像格式，具有縮放不失真的特點。SVG 內嵌於 CSS 或 HTML，可以減少 HTTP 請求數。

9. 使用內容分發網絡（CDN）

  • CDN 加速 CSS 文件加載：將 CSS 文件存放在 CDN 上，根據用戶的位置自動選擇最近的伺服器，縮短文件傳輸時間，提升加載速度。

10. 減少重繪和重排

  • 避免頻繁更改樣式：頻繁修改樣式會導致瀏覽器重繪和重排，增加渲染時間。盡量將所有樣式更改合併到一次操作中完成。
  • 使用 will-change 屬性：告訴瀏覽器哪些屬性可能會更改，例如 transform 或 opacity，以便瀏覽器提前優化相應元素的渲染。
1
2
3

.element {
  will-change: transform, opacity;
}

11. 使用瀏覽器開發者工具進行性能分析

  • 使用 Chrome DevTools：這些工具提供了 CSS 規則的計算速度、重繪/重排次數和樣式應用時間的詳細數據，幫助找出性能瓶頸。
  • 分析樣式和佈局：利用開發者工具中的 “Performance” 面板，查看頁面中的重繪和重排次數，定位性能問題。

12. 避免使用 !important

  • 避免過度使用 !important：這會使樣式難以維護，並影響樣式表的可讀性和覆蓋順序的管理。僅在絕對必要時使用 !important，並確保其合理。

小結

通過遵循這些 CSS 優化實踐，你可以減少頁面加載時間、優化性能並提升用戶體驗。定期評估和調整你的 CSS 是保持高效網站運行的關鍵，並確保為用戶提供快速和流暢的瀏覽體驗。

Software, CSS
CSS
本文章以 CC BY 4.0 授權