dark

如何優化 CSS 以獲得峰值站點性能

2021年11月4日

即使在 2021 年，網路性能仍然是一個問題。根據 HTTP Archive，平均頁面需要 2 MB 下載，發出超過 60 個 HTTP 請求，在移動設備上完全載入可能需要 18 秒。樣式表占 60 kB，分為七個請求，因此在嘗試解決性能問題時，它很少是首要任務。

嘗試免費演示

然而，CSS 確實有效果，無論它看起來多麼微弱。一旦你解決了你的 JavaScript，學習如何正確優化 CSS 應該是下一個優先事項。

讓我們開始吧！

CSS 如何影響頁面性能

CSS 看起來很簡單，但可能需要一些繁重的處理。

CSS 是渲染阻塞

當您的瀏覽器遇到 <link> 標記時，它會在獲取和解析 CSS 文件時停止其他瀏覽器的下載和處理。

JavaScript 也可以阻止瀏覽器呈現，但非同步處理是可能的：

  1. 用於並行下載腳本的 async 屬性，腳本準備就緒後立即運行。
  2. defer 屬性並行下載，然後在 DOM 準備好時按順序運行。
  3. 用於載入 ES 模塊的 type=”module” 屬性（其行為類似於 defer）。

圖像等資產通常需要更多帶寬，但可以使用高效格式，並且可以延遲載入（loading=”lazy” 屬性）而不會阻止瀏覽器渲染。

這一切都無法通過 CSS 實現。該文件被緩存，因此後續頁面載入應該更快，但渲染阻止過程仍然存在。

novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height: 18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9 ;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4 }body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare -ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}想要改進您網站的表現？🚀從CSS開始💥點擊推文 性能？🚀從CSS開始💥點擊推文

大型 CSS 文件需要時間來處理

樣式表越大，下載並處理成 CSS 對象模型 (CSSOM) 所需的時間就越長，瀏覽器和 JavaScript API 可以使用它來顯示頁面。儘管 CSS 樣式表比大多數其他網站文件小，但它們也不能倖免於「越小越好」的經驗法則。

CSS 文件增長

識別不再使用的樣式可能很困難，刪除錯誤的樣式可能會對網站造成嚴重破壞。開發人員通常會選擇最安全的「保留一切」方法。不再使用的頁面樣式、組件和小部件繼續存在於 CSS 中。結果？文件大小、複雜性和維護工作呈指數級增長，使得開發人員越來越不可能刪除冗餘代碼。

樣式表可以引用其他資產

CSS 可以使用 @import 規則引用其他樣式表。這些導入會阻止對當前樣式表的處理並依次載入更多 CSS 文件。

也可以引用其他資產，例如字體和圖像。瀏覽器將嘗試優化下載，但如果有疑問，它會立即獲取它們。內聯的 base64 編碼文件需要進一步處理。

CSS 效果渲染

瀏覽器具有三個渲染階段：

  1. 布局（或迴流）階段計算每個元素的尺寸以及它如何影響周圍元素的大小或位置。
  2. 繪製階段將每個元素的視覺部分繪製到單獨的圖層上：文本、顏色、圖像、邊框、陰影等。
  3. 複合根據堆疊上下文、定位、z 索引等以正確的順序將每個圖層繪製到頁面上。

如果您不小心，CSS 屬性更改和動畫可能會導致所有三個階段重新渲染。某些屬性，例如陰影和漸變，在計算上也比塊顏色和邊距更昂貴。

CSS 性能分析工具

承認您有 CSS 性能問題是恢復之路的第一步！查找和修復原因是另一回​​事。

以下工具和服務（不按任何順序排列）可以幫助您識別代碼中的樣式瓶頸。

1. DevTools 網路面板

Web 性能專家在 DevTools 和網路面板上花費了大量時間。儘管我們將在示例中使用 Google Chrome，但大多數現代瀏覽器都自帶 DevTools。

DevTools 可以從瀏覽器菜單打開，通常在更多工具 > 開發者工具，或通過鍵盤快捷鍵 Ctrl | Cmd + Shift + I 或 F12。

切換到網路選項卡並確保選中禁用緩存以防止緩存文件影響報告。您還可以更改限制選項以模擬較慢的移動網路。

刷新頁面查看下載和處理瀑布圖：

DevTools 網路面板。

DevTools 網路面板。

任何長條都值得關注，但您應該特別警惕阻塞/停滯的長條（以白色顯示）。在此示例中，在 HTML 頁面頂部處理阻止渲染的 CSS 和 JavaScript 文件之前，突出顯示的行和所有後續行無法開始下載。

過濾器框允許您顯示或隱藏特定資產：

  • 大於：<S>：限制為大於 <S> 的文件，表示為位元組 (10,000)、千位元組 (1,000 kB) 或兆位元組 (1 M)
  • -larger-than:<S>：限制為小於 <S> 的文件
  • -domain:*<.yourdomain.com>：顯示未從您的主域載入的第三方請求。這些是導致網站緩慢的主要因素。

具有優化 CSS 的高性能頁面通常具有較少的資產與短的阻塞/停滯條並行載入。

2. 網頁測試

WebPageTest 提供了類似的網路瀑布視圖，以及許多其他性能圖表：

WebPageTest.org 資產瀑布幫助優化 css

WebPageTest.org 資產瀑布。

該服務使用位於全球各個位置的設備，因此您可以評估實際性能和 CSS 優化。

3. Chrome DevTools 燈塔面板

DevTools Lighthouse 面板在基於 Chromium 的瀏覽器中提供，例如 Chrome、Edge、Brave、Opera 和 Vivaldi。您可以為移動和桌面設備生成性能、漸進式 Web 應用程序、最佳實踐、輔助功能和搜索引擎優化報告。

DevTools 燈塔面板。

DevTools 燈塔面板。

該工具會提出改進建議，包括優化 CSS 的方法。並非所有的都可行或可行，但突出顯示了最有益的速贏。

4. 谷歌 PageSpeed Insights

PageSpeed Insights 是 Lighthouse 的在線版本。它的功能較少，但可以在任何瀏覽器中使用，並提供一些替代見解。

例如，樹狀圖使用覆蓋率指標顯示最大的 JavaScript 資產，該指標指示已使用和未使用的代碼比例：

谷歌 PageSpeed Insights 樹狀圖幫助優化 css

Google PageSpeed Insights 樹狀圖。

CSS 不顯示，但 JavaScript 的數量會影響樣式的效率。

類似的網站速度測試工具包括 Pingdom 網站速度測試和 GTmetrix。

5. Chrome DevTools 覆蓋面板

基於 Chromium 的瀏覽器中的 DevTools Coverage 面板有助於定位未使用的 CSS（和 JavaScript）代碼。從 DevTools More tools 子菜單中選擇 Coverage，然後刷新您的頁面並瀏覽您的站點/應用程序：

開發者工具覆蓋面板。

開發者工具覆蓋面板。

CSS 和 JavaScript 資產顯示在 Coverage 面板中，未使用代碼的比例為紅色。單擊任何文件以查看其源代碼，其中行號間距中未使用的代碼以紅色突出顯示。

需要注意的幾點：

  • 如果您刷新或導航到新頁面，覆蓋率指標會重置，這在 WordPress 網站上是典型的。僅當您瀏覽載入內容而無需刷新頁面的單頁應用程序時，未使用的代碼指標才會減少。
  • 該工具只能說明在特定時間點之前使用的 CSS。它無法確定小部件是否未被查看或具有多個 JavaScript 綁定狀態。

6. Chrome DevTools 實時性能監控器

基於 Chromium 的瀏覽器具有實時性能監視器。同樣，這可以從 DevTools More tools 菜單中獲得。當您導航頁面、滾動和觸發動畫時，圖表會更新：

DevTools 實時性能監視器。

DevTools 實時性能監視器。

以下指標對優化 CSS 性能特別重要（越低越好）：

  • CPU 使用率：處理器使用率從 0% 到 100%。
  • 布局/秒：瀏覽器重新布局頁面的速率。
  • 樣式重新計算/秒：瀏覽器重新計算樣式的速率。

如果 CSS 由於外部因素而陷入困境，其他指標也可能有用（同樣，較低的值表示更好的性能）：

  • JS 堆大小：JavaScript 對象使用的總內存。
  • DOM 節點：HTML 文檔中元素的數量。
  • JS 事件偵聽器：已註冊的 JavaScript 事件偵聽器的數量。
  • 文檔：資源的數量，包括頁面、CSS 文件、JavaScript 模塊等。
  • 文檔框架：框架、iframe 和 JavaScript 工作腳本的數量。

7. DevTools 性能報告

DevTools Performance 面板允許您記錄頁面活動以供進一步分析並幫助識別性能問題。生成的報告很複雜，許多開發人員都避免使用它們，但它們提供了有價值的信息。

性能面板的設置圖標允許您設置各種選項，例如降低網路和 CPU 的速度。您還可以禁用 JavaScript 示例，以便不記錄詳細的調用堆棧。

首先，單擊圓形記錄圖標，載入和/或使用您的頁面，然後單擊停止按鈕查看報告：

幫助優化 css 的 DevTools 性能報告

開發者工具性能報告。

幾乎所有這些指標都對 JavaScript 開發人員有用，但 CSS 優化問題可能在以下方面尤為明顯：

  • 頂部紅色條：這表示幀速率顯著下降，這可能會導致性能問題。這是在頁面載入開始時預期的，但過多的 CSS 動畫也可能是一個問題。
  • 總結圖表：高載入、渲染和繪製指標可能表明 CSS 問題。

間接 CSS 性能修復

以下修復不會直接解決 CSS 問題，但它們可以幫助您以相對較少的努力解決一些性能問題。

使用好主機

使用物理上更靠近用戶的伺服器的優質主機將帶來直接的性能優勢。託管計劃各不相同，但主要分為三種類型：

  1. 共享託管：您的網站託管在物理伺服器上，可能與數百個其他站點一起託管。共享磁碟空間、RAM、CPU 時間和帶寬。計劃通常很便宜，但性能和可用性受其他站點的影響。升級是可能的，但您的站點通常會保留在相同的基礎架構上。
  2. 專用主機：您的站點託管在您擁有的一台或多台物理伺服器上。硬體可根據需要進行配置和升級。計劃通常很昂貴，並且硬體故障仍然存在問題。
  3. 雲託管：雲託管將硬體基礎設施抽象為一組可以按需訪問的服務。您的站點可以跨一系列設備進行配置，以便輕鬆升級。

雲託管計劃和價格差異很大。你可以考慮：

  1. 平台即服務 (PaaS) 選項，例如虛擬 Web 伺服器和資料庫，或
  2. 軟體即服務 (SaaS) 選項，提供完全託管的應用程序，例如 WordPress。

切換主機可以提高性能。它不太可能解決您的所有問題，但它是解決後端和帶寬問題的經濟高效的解決方案。

您還可以考慮使用內容交付網路 (CDN) 或專業圖像和視頻 CDN，它們可以將負載分布在地理位置更接近用戶的多個位置。

利用瀏覽器和伺服器效率功能

大約 10% 的站點不激活 gzip（或更好的）壓縮，這通常是默認的伺服器選項。通過在傳輸前壓縮文件，這將 CSS 的大小減少了 60% 或更多。它不會修復低效的 CSS，但代碼會更快到達！

您還應該激活 HTTP/2（或更好），它以較小的二進位格式發送數據，壓縮標頭，並且可以在同一個 TCP 連接上發送多個文件。

最後，確保瀏覽器可以有效地緩存 CSS 和其他文件。這通常是在 HTTP 標頭中設置 Expires、Last-Modified 和/或 ETag 哈希值的問題。

優化您的 CMS

WordPress 等內容管理系統可以使用為自己的 CSS 提供服務的主題和插件進行擴展。在可能的情況下，您應該加快 CMS 以：

  1. 刪除未使用的插件。
  2. 使用更精簡的主題
  3. 啟用緩存以防止過度的頁面重新生成。

優化您的圖像

圖像沒有 HTML、CSS 和 JavaScript 的處理和渲染開銷，但它們占頁面權重和可用帶寬的很大一部分。考慮：

  1. 刪除不需要的圖像。
  2. 調整大圖像的大小——可能不超過它們可以出現在屏幕上的最大尺寸的 150%。
  3. 使用適當的圖像格式 – 理想情況下是高度壓縮的選項，例如 WebP 或 AVIF，但對於徽標和圖表可能使用 SVG。
  4. 用 CSS 漸變或其他效果替換圖像。
  5. 將寬度和高度屬性添加到 HTML <img> 標籤或使用新的 CSS 縱橫比屬性以確保在圖像下載之前在頁面上保留適當的空間。

專業圖像 CDN 可以為您處理其中的一些工作。

刪除未使用的 CSS

最快的樣式是那些您永遠不需要載入或渲染的樣式！嘗試刪除您不再需要的任何 CSS 代碼，例如遺留頁面、小部件或框架的代碼。這在較大的站點上可能很困難，並且並不總是清楚特定的樣式集是否必不可少。

以下工具在構建時或通過抓取 URL 以識別冗餘代碼來分析 HTML 和 CSS 使用情況。這並不總是足夠的，因此可以設置其他配置以確保允許列出由 JavaScript 和用戶交互觸發的樣式：

  • 取消CSS
  • 未使用的CSS
  • 清除CSS
  • 凈化CSS

有一個更好的選擇：將 CSS 拆分為具有明確職責和相應文檔級別的單獨文件。刪除不必要的樣式然後變得相當容易。

優化 CSS 載入性能

並非所有 CSS 都被同等載入。不起眼的 <link> 標籤有許多並不總是合乎邏輯的選項和怪癖。

優化網頁字體使用

Google Fonts 和類似的字體代工廠已經徹底改變了網路字體，但幾行字體代碼可能會產生數百 KB 的帶寬。

以下是我們的優化建議：

  1. 只載入您需要的字體：刪除您不使用的字體並檢查是否需要新字體。
  2. 僅載入您需要的權重和樣式：大多數字體製造商可以將下載限制為某些字符集（例如僅拉丁文）、權重（粗細）和斜體（斜體）。瀏覽器可以自動呈現缺失的樣式，儘管結果可能很差。
  3. 限制所需的字元：可以將不常用的字體限制為特定字元。例如，Open Sans 中的標題「CSS 教程」可以通過在 Google 字體查詢字元串中添加 &text= 參數來定義：fonts.googleapis.com/css?family=Open+Sans&text=CStuorial
  4. 考慮可變字體：可變字體使用矢量插值定義了多種樣式、粗細和斜體。字體文件稍大一些，但您只需要一個而不是多個。遞歸字體展示了可變字體的靈活性。
  5. 從本地伺服器載入字體：自託管字體比使用代工廠更有效。需要更少的 DNS 查找，並且您可以將下載限制為所有現代瀏覽器都支持的 WOFF2。較舊的瀏覽器（我在看你的 IE）可以回退到操作系統字體。
  6. 考慮操作系統字體：500 kB 的網路字體可能看起來很棒，但是如果您切換到常用的 Helvetica、Arial、Georgia 或 Verdana，有人會注意到嗎？操作系統或網路安全字體是提高性能的一種簡單方法。

使用適當的字體載入選項

下載和處理 Web 字體可能需要幾秒鐘的時間。瀏覽器將：

訂閱時事通訊

想知道我們是如何將流量增加超過 1000% 的嗎？

加入 20,000 多名其他人，他們會收到我們的每周時事通訊，其中包含 WordPress 內幕技巧！

現在訂閱

  1. Show a Flash of Unstyled Text (FOUT)：最初使用第一個可用的後備字體，但一旦網路字體準備好就會被替換。
  2. Show a Flash of Invisible Text (FOIT)：在 Web 字體準備就緒之前，不會顯示任何文本。這是現代瀏覽器中的默認進程，通常在恢復到後備字體之前等待三秒鐘。

兩者都不是理想的。CSS font-display 屬性和 Google Font & display = 參數可以選擇一個替代選項：

  • auto：瀏覽器的默認行為（通常是 FOIT）。
  • 阻止：有效地FOIT。文本最多不可見三秒鐘。沒有字體交換，但文本可能需要一些時間才能出現。
  • 交換：有效地FOUT。在 Web 字體可用之前，將使用第一個後​​備。文本立即可讀，但字體交換效果可能不和諧。Font Style Matcher 可用於定義類似大小的後備。
  • 回退：FOIT 和 FOUT 之間的妥協。文本在短時間內不可見（通常為 100 毫秒），然後使用第一個回退直到網路字體可用。
  • 可選：類似於回退，但不發生字體交換。網路字體只有在初始期間可用時才會使用。您的第一頁視圖可能會顯示後備字體，後續視圖使用下載和緩存的 Web 字體。

使用交換、回退或可選可以提供明顯的性能提升。

避免使用 CSS @import

@import at-rule 允許 CSS 文件包含在其他文件中：

/* main.css */
@import url(“https://kinsta.com/blog/optimize-css/reset.css”);
@import url(“grid.css”);
@import url(“widget.css”);

這似乎是載入較小組件和字體的有效方法。不幸的是，每個@import 都是渲染阻塞的，並且每個文件都必須依次載入和解析。

HTML 中的多個 <link> 標籤效率更高，並且可以並行載入 CSS 文件：

<link rel=”stylesheet” href=”https://kinsta.com/blog/optimize-css/reset.css”>
<link rel=”stylesheet” href=”grid.css”>
<link rel=”stylesheet ” href=”widget.css”>

也就是說，最好…

連接和縮小 CSS

現代構建工具、CSS 預處理器（如 Sass）和 WordPress 插件可以將所有部分組合成一個大型 CSS 文件。然後刪除不必要的空格、注釋和字元以將文件大小減小到最小。

使用 HTTP/2 及更高版本，多個文件的性能問題較少，但單個文件只需要一個標頭，並且可以更有效地壓縮和緩存。

單獨的 CSS 文件只有在您有一個或多個經常更改的樣式表時才實用——也許每周更改幾次。即便如此，大部分靜態 CSS 代碼仍然可以合併到一個文件中。

避免 Base64 編碼

工具可以將圖像編碼為 base64 字元串，您可以將其用作 HTML <img> 標籤和 CSS 背景中的數據 URI：

.background {
background-image: url(‘data:image/jpg;base64,ABC123…’);
}

這減少了 HTTP 請求的數量，但會損害 CSS 性能：

  • base64 字元串可以比它們的二進位等價物大 30%。
  • 瀏覽器必須先解碼字元串才能使用圖像，並且
  • 改變一個圖像像素會使整個 CSS 文件無效。

如果您使用非常小的、不經常更改的圖像，並且結果字元串不比 URL 長得多，則僅考慮使用 base64 編碼。

也就是說，您可以對可重用的 SVG 圖標進行 UTF8 編碼，例如

.svgbackground {
background-image: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 600 600″><circle cx=”300″ cy=”300″ r=”150″ stroke-width=”3″ stroke=”#f00″ fill=”#ff0″ /></svg>’);
}

刪除 CSS Hacks 和 IE Fallbacks

除非您不幸並且擁有高比例的 Internet Explorer 用戶，否則可以從您的 CSS 中刪除 IE 條件樣式表和 hacks。在大多數情況下，IE 用戶仍然會看到一些東西，特別是如果您使用移動優先設計，默認情況下顯示更簡單的線性視圖。結果可能不是很好，也不會是像素完美的，但是考慮到所有用戶的可訪問性，您的開發預算最好花費。

預載入 CSS 文件

<link> 標籤提供了一個可選的 preload 屬性，可以立即開始下載而不是等待 HTML 中的真正引用：

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>我的頁面</title>
<!– 預載入樣式 –>
<link rel=”preload ” href=”https://kinsta.com/css/main.css” as=”style” />
<!– 更多代碼 –>
<!– 載入預載入樣式 –>
<link rel=”樣式表” href=”https://kinsta.com/css/main.css” />

這在 WordPress 和其他 CMS 中特別有用，其中插件可以在頁面下方添加樣式表。

使用關鍵的內聯 CSS

分析工具可能會建議您「內聯關鍵 CSS」或「減少渲染阻塞樣式表」。這通過以下方式提高了性能：

需要為您的電子商務網站提供快速、可靠且完全安全的託管服務？Kinsta 提供所有這些以及來自 WooCommerce 專家的 24/7 世界級支持。查看我們的計劃

  1. 識別摺疊上方元素使用的基本樣式（頁面載入時可見的樣式）
  2. 將該關鍵 CSS 內聯到 <head> 中的 <style> 標籤中
  3. 非同步載入剩餘的 CSS 以避免渲染阻塞。這可以通過以瀏覽器給予較低優先順序的「列印」樣式載入樣式表來實現。一旦頁面載入完畢，JavaScript 就會將其切換為「所有」媒體樣式（<noscript> 確保 CSS 工作在 JavaScript 不可用的情況下）：

<style>
/* 關鍵樣式 */
body { font-family: sans-serif; 顏色：#111；}
</style>
<!– 載入剩餘樣式–>
<link rel=”stylesheet”
href=”https://kinsta.com/css/main.css”
media=”print”
onload=”this.media =”all””>
<noscript>
<link rel=”stylesheet” href=”https://kinsta.com/css/main.css”>
</noscript>

諸如critical和criticalCSS之類的工具可以幫助提取視圖中元素的樣式。

該技術顯著提高了性能並提高了審計分數。具有一致界面的站點或應用程序應該更容易實現，但在其他地方可能更難：

  • 除了最簡單的站點之外，構建工具對於所有站點都是必不可少的。
  • 每個設備上的「摺疊」都不同。
  • 站點可能有多種布局，需要不同的關鍵 CSS。
  • 關鍵的 CSS 工具可能會與特定的框架、HTML 生成的客戶端和動態內容發生衝突。
  • 該技術主要有利於首頁載入。CSS 會為後續頁面緩存，因此額外的內聯樣式會增加頁面權重。

使用媒體查詢呈現

單個串聯和縮小將使大多數網站受益，但需要大量較大屏幕樣式的網站可以拆分 CSS 文件並使用媒體查詢載入：

<!– 在所有設備上載入的核心樣式 –>
<link rel=”stylesheet” href=”https://kinsta.com/blog/optimize-css/core.css”>
<!– 服務於屏幕至少 40em 寬 –>
<link rel=”stylesheet” media=”(min-width: 40em)” href=”40em.css”>
<!– 用於至少 80em 寬的屏幕 –>
<link rel= “stylesheet” media=”(min-width: 80em)” href=”80em.css”>

此示例假定採用移動優先方法。移動設備載入 core.css 但可能不需要下載或解析剩餘的樣式表。

使用漸進式渲染

漸進式呈現是一種為單獨的頁面或組件定義單獨的樣式表的技術。它可以使單個頁面由大量組件構建的大型站點受益。

每個 CSS 文件在 HTML 中引用組件之前立即載入：

<head>
<!– 核心樣式 –>
<link rel=”stylesheet” href=”https://kinsta.com/blog/optimize-css/core.css” />
</head>
<body>
< !– header –>
<link rel=”stylesheet” href=”header.css” />
<header>…</header>
<!– 主要內容 –>
<link rel=”stylesheet” href =”main.css” />
<main>
<!– 小部件樣式 –>
<link rel=”stylesheet” href=”widget.css” />
<div class=”mywidget>…</div>
</main>
<!– 頁腳 –>
<link rel=”stylesheet” href=”footer.css” />
<頁腳>…</頁腳>
</正文>

這在大多數瀏覽器中運行良好。（Safari 在載入所有 CSS 之前會顯示一個空白頁面，但它不應該比單個大樣式表更糟糕。）

採用 Web 組件還鼓勵使用在呈現自定義元素時載入的作用域樣式。

優化 CSS 性能

CSS 技術和屬性給瀏覽器、CPU、內存、帶寬和其他資源帶來了不同的壓力。以下提示可以幫助您避免不必要的處理和性能下降。

採用現代布局技術（Grid 和 Flexbox）

基於浮動的布局難以創建，使用大量屬性，需要不斷調整邊距和填充，必須使用媒體查詢進行管理，並且需要大量的瀏覽器處理。多年來，它們是唯一可行的布局方法，但不再需要。使用：

  • 用於一維布局的 CSS Flexbox，可以換行到下一行。它是菜單、圖片庫、卡片等的理想選擇。
  • 用於具有顯式行和列的二維布局的 CSS 網格。它非常適合頁面布局。

兩者都更易於開發，使用更少的代碼，渲染速度更快，並且無需媒體查詢即可適應任何屏幕尺寸。

非常老的瀏覽器無法識別現代的 flexbox 和 grid 屬性，因此每個元素都變成了一個塊。以類似移動設備的簡單線性布局展示它們：無需使用基於浮動的回退來模擬設計。

用 CSS 漸變和效果替換圖像

在可能的情況下，選擇 CSS 代碼而不是圖像。嘗試漸變、邊框、半徑、陰影、濾鏡、混合模式、蒙版、剪裁和偽元素效果，以重複使用或替換現有圖像。

CSS 效果使用的帶寬要少得多，更容易修改，而且通常可以製作動畫。

避免過度使用昂貴的屬性

您可能有簡潔的聲明性代碼，但某些 CSS 需要比其他 CSS 進行更多處理。以下屬性會觸發繪畫計算，過度使用時可能會很昂貴：

  • 位置：固定
  • 邊界半徑
  • 盒子陰影
  • 文字陰影
  • 不透明度
  • 轉變
  • 篩選
  • 背景過濾器
  • 背景混合模式

儘可能使用 CSS 過渡和動畫

CSS 過渡和動畫總是比 JavaScript 驅動的效果更平滑，後者修改類似的屬性。它們不會在非常舊的瀏覽器中處理，但是，由於這些瀏覽器可能在功能較弱的設備上運行，這是最好的。

但是，避免過度的動畫。效果應增強用戶體驗，而不會對性能產生不利影響或導致暈車。檢查首選減少運動媒體查詢並在必要時禁用動畫。

避免動畫屬性觸發重新布局

改變元素的尺寸（寬度、高度、內邊距、邊框）或位置（頂部、底部、左側、右側、邊距）可能會導致整個頁面在每個動畫幀上重新布局。最有效的動畫屬性是：

  • 不透明度
  • 濾鏡：模糊、對比、陰影和其他效果
  • 變換：平移（移動）、縮放或旋轉元素

瀏覽器可以使用硬體加速的 GPU 在自己的層中渲染這些效果，因此隻影響合成階段。

如果您必須為其他屬性設置動畫，您可以通過使用 position: absolute 將元素從頁面流中取出來提高性能。

注意複雜的選擇器

瀏覽器將快速解析最複雜的 CSS 選擇器，但簡化它們會減小文件大小並提高性能。當您在像 Sass 這樣的 CSS 預處理器中創建深度嵌套的結構時，通常會生成複雜的選擇器。

指出哪些元素會發生變化

CSS will-change 屬性允許您警告元素將如何更改或動畫，以便瀏覽器可以提前進行優化：

.myelement {
將改變：變換，不透明度；
}

可以定義任意數量的逗號分隔值，但該屬性僅應用作解決已知性能問題的最後手段。不應將其應用於太多元素，並確保給它足夠的時間進行初始化。

考慮 CSS 包含

包含是一種新的 CSS 功能，它可以通過允許您識別頁面的孤立子樹來提高性能。瀏覽器可以通過渲染（或不渲染）特定 DOM 內容塊來優化處理。

contains 屬性接受以空格分隔的列表中的以下一個或多個值：

  • none：不應用遏制
  • 布局：元素的布局與頁面的其餘部分隔離——它的內容不會影響其他元素
  • 油漆：元素的子元素不會顯示在其邊界之外
  • size：元素的大小可以在不檢查子元素的情況下確定——尺寸與內容無關

還提供兩個特殊值：

  • 嚴格：應用所有收容規則（無除外）
  • 內容：應用布局和繪製

重要的

一個頁面有一個 <ul> 列表，其中包含：strict; 應用。如果您更改任何子 <li> 的內容，瀏覽器將不會重新計算該項目、列表中的其他項目或頁面上任何其他元素的大小或位置。

大多數現代瀏覽器都支持 CSS 包含。Safari 或更舊的應用程序不支持，但可以安全地在這些應用程序中使用包含，因為瀏覽器將簡單地忽略該屬性。

對 Save-Data 標頭做出反應

Save-Data 是一個 HTTP 請求標頭，指示用戶已請求減少數據。在某些瀏覽器中，它可能被標記為「Lite」或「Turbo」模式。

啟用後，每個瀏覽器請求都會發送一個 Save-Data 標頭：

GET /main.css HTTP/1.0
主機：site.com
保存數據：開啟

當檢測到 Save-Data 時，伺服器可以做出相應的響應。在 CSS 的情況下，它可以發送更簡單的類似移動設備的線性布局、使用操作系統字體、切換到塊顏色或載入低解析度圖像背景。

請注意，伺服器應在修改後的請求上返回以下標頭，以確保在用戶關閉 Lite/Turbo 模式時不會緩存和重用最少的內容：

變化：接受編碼，保存數據

標頭也可以被客戶端 JavaScript 檢測到。當未啟用 Save-Data 時，以下代碼將 bestUX 類添加到 <html> 元素：

if (‘connection’ in navigator && !navigator.connection.saveData) {
document.documentElement.classList.add(‘bestUX’);
}

然後樣式表可以在沒有任何伺服器操作的情況下做出相應的反應：

/* 默認沒有英雄圖片 */
header {
background-color: #abc;
背景圖像：無；
}
/* 沒有保存數據時的英雄圖片 */
.bestUX header {
background-image: url(“hero.jpg”);
}

首選減少數據媒體查詢提供了一個僅 CSS 選項作為替代，儘管在撰寫本文時任何瀏覽器都不支持：

/* 默認沒有英雄圖片 */
header {
background-color: #abc;
背景圖像：無；
}
/* 沒有保存數據時的英雄圖片 */
@media (prefers-reduced-data: no-preference) {
header {
background-image: url(“hero.jpg”);
}
}

已經通過 JavaScript 解決了性能問題？💪 是時候看看你網站的 CSS 了 🚀點擊推文

概括

有很多優化 CSS 性能的選項，但對於新項目，請考慮以下做法：

  1. 使用移動優先的方法：首先編寫最簡單的移動布局，然後隨著屏幕空間和瀏覽器功能集的增加添加增強功能。
  2. 將 CSS 拆分為具有可識別職責的單獨文件：CSS 預處理器或 CMS 插件可以將 CSS 部分合併到一個文件中。
  3. 添加構建步驟：可用的工具可以自動 lint 代碼、識別問題、連接、縮小、縮小圖像大小等。自動化讓生活更輕鬆，您也不太可能忘記優化步驟。
  4. 記錄您的樣式表：帶有記錄示例的樣式指南將使您的代碼更易於獲取和維護。您將能夠毫不費力地識別和刪除舊的 CSS。

最後，學習CSS！您知道的越多，您需要編寫的代碼就越少，您的 Web 應用程序就會變得越快。無論您使用哪種平台和框架，它都會使您成為更好的開發人員。

你還有哪些優化 CSS 性能的技巧？請在評論部分分享它們！

通過以下方式節省時間、成本並最大限度地提高站點性能：

  • 來自 WordPress 託管專家的即時幫助，24/7。
  • Cloudflare 企業集成。
  • 全球受眾覆蓋全球 28 個數據中心。
  • 使用我們內置的應用程序性能監控進行優化。

所有這些以及更多，都在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。

相關文章