20個優化CSS性能的技巧

本文探討20種優化CSS的方法，旨在提升加載速度、簡化開發和提高效率。根據最新的HTTP Archive報告，網站普遍存在資源冗餘問題，中位數網站需要1700KB的數據，80個HTTP請求，在移動設備上完全加載需要17秒。 《減少頁面重量的完整指南》提供了多種建議，本文將重點關注CSS優化。雖然CSS通常並非性能問題的罪魁禍首，典型網站僅使用40KB的CSS分散在五個樣式表中，但仍然存在優化空間，改變CSS的使用方式也能提升網站性能。

關鍵要點

• 利用瀏覽器工具和在線分析器： 使用瀏覽器開發者工具和Google PageSpeed Insights等在線平台來識別和解決CSS加載緩慢的問題。
• 優先進行重大改進： 啟用HTTP/2，使用GZIP壓縮，並使用CDN來高效處理較大的資源，顯著提升加載速度。
• 使用CSS效果代替圖片： 使用CSS代替圖片來實現視覺效果，例如陰影和漸變，以減少下載大小並提高可維護性。
• 最小化字體開銷： 限制自定義字體的使用，僅選擇必要的樣式和粗細，並考慮使用系統字體以減少加載時間。
• 實施高效的CSS實踐： 使用Flexbox和Grid等現代佈局方法，最小化CSS代碼，並避免使用代價高昂的屬性，以簡化性能和維護。

1. 學習使用分析工具

除非知道問題所在，否則無法解決性能問題。瀏覽器開發者工具是最佳起點：從菜單啟動或按F12、Ctrl Shift I或macOS上的Safari的Cmd Alt I。所有瀏覽器都提供類似的功能，工具在性能較差的頁面上會加載緩慢！但是，最有用的選項卡包括以下內容……“網絡”選項卡顯示資源下載的瀑布圖。為了獲得最佳結果，請禁用緩存並考慮將網絡速度降低。查找下載緩慢或阻塞其他資源的文件。瀏覽器通常會在CSS和JavaScript文件下載和解析時阻止瀏覽器渲染。 “性能”選項卡分析瀏覽器進程。開始錄製，運行諸如頁面重新加載之類的活動，然後停止錄製以查看結果。查找：1. 過多的佈局/重排操作，瀏覽器被迫重新計算頁面元素的位置和大小；2. 代價高昂的繪製操作，像素發生更改； 3. 合成操作，將頁面的繪製部分組合在一起以在屏幕上顯示。這通常是最不佔用處理器資源的操作。

基於Chrome的瀏覽器提供一個“審核”選項卡，該選項卡運行Google的Lighthouse工具。它通常由漸進式Web應用開發者使用，但也提供CSS性能建議。

在線選項

或者，使用不受設備和網絡速度和能力影響的在線分析工具。大多數工具可以從世界各地的不同位置進行測試：

• Pingdom網站速度測試
• GTmetrix
• Google PageSpeed Insights
• WebPageTest

2. 首先取得重大進展

CSS不太可能是性能問題的直接原因。但是，它可能會加載需要在幾分鐘內優化的重量級資源。例如：

• 在服務器上啟用HTTP/2和GZIP壓縮
• 使用內容交付網絡（CDN）來增加同時HTTP連接的數量並將文件複製到世界各地的其他位置
• 刪除未使用的文件

圖片通常是頁面體積最大的原因，但許多網站未能有效優化：

1. 調整位圖圖像大小。入門級智能手機拍攝的多兆像素圖像無法在最大的高清屏幕上完全顯示。很少有網站需要寬度超過1600像素的圖像。
2. 確保使用合適的圖像格式。通常，JPG最適合照片，SVG最適合矢量圖像，PNG最適合其他所有圖像。您可以進行實驗以找到最佳類型。
3. 使用圖像工具通過去除元數據和提高壓縮因子來減小文件大小。

也就是說，請注意，xKB的圖像數據並不等同於xKB的CSS代碼。二進製圖像並行下載，並且幾乎不需要處理即可放置在頁面上。 CSS會阻塞渲染，並且必須解析成對像模型才能繼續。

3. 使用CSS效果代替圖片

很少需要使用背景圖片來創建邊框、陰影、圓角、漸變和一些幾何形狀。使用CSS代碼定義“圖像”會使用更少的帶寬，並且以後更容易修改或動畫化。

4. 刪除不必要的字體

諸如Google Fonts之類的服務使向任何頁面添加自定義字體變得容易。不幸的是，一兩行代碼可以檢索數百千字節的字體數據。建議：

1. 只使用所需的字體。

2. 只加載所需的粗細和样式——例如，羅馬體、400粗細，無斜體。

3. 盡可能限製字符集。 Google字體允許您通過向字體URL添加&text=值來選擇某些字符——例如fonts.googleapis.com/css?family=Open Sans&text=SitePon用於在Open Sans中顯示“SitePoint”。

4. 考慮可變字體，它通過插值定義多個粗細和样式，因此文件更小。目前支持僅限於Chrome、Edge和某些版本的Safari，但應該會迅速增長。

5. 考慮操作系統字體。您的500KB網頁字體可能是符合品牌形象的，但是如果您切換到常用的Helvetica或Arial，有人會注意到嗎？許多網站使用自定義網頁字體，因此標準操作系統字體比以前少得多！

6. 避免使用@import

@import規則允許在另一個CSS文件中包含任何CSS文件。例如：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

這似乎是加載較小組件和字體的合理方法。 事實並非如此。 @import規則可以嵌套，因此瀏覽器必須按順序加載和解析每個文件。 HTML中的多個<link>標籤將並行加載CSS文件，這效率要高得多——尤其是在使用HTTP/2時：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

也就是說，可能還有更好的選擇……

6. 連接和壓縮

大多數構建工具允許您將所有部分組合成一個大型CSS文件，該文件已刪除不必要的空格、註釋和字符。使用HTTP/2（它會對請求進行流水線處理和多路復用）時，連接的必要性降低了。在某些情況下，如果您有較小且經常更改的CSS資源，則單獨的文件可能更有益。但是，大多數網站都可能受益於發送單個文件，該文件會立即由瀏覽器緩存。啟用GZIP後，壓縮可能不會帶來可觀的優勢。也就是說，沒有什麼真正的缺點。最後，您可以考慮一個構建過程，該過程在聲明中一致地排序屬性。當整個文件中使用常用字符串時，GZIP可以最大限度地提高壓縮率。

7. 使用現代佈局技術

多年來，必須使用CSS浮動來佈局頁面。該技術是一種技巧。它需要大量代碼和邊距/填充調整才能確保佈局有效。即便如此，除非添加媒體查詢，否則浮動會在較小的屏幕尺寸下中斷。現代替代方案：

• CSS Flexbox用於一維佈局，它可以根據每個塊的寬度換行到下一行。 Flexbox非常適合菜單、圖片庫、卡片等。
• CSS Grid用於具有顯式行和列的二維佈局。 Grid非常適合頁面佈局。

這兩種選項都更易於開發，使用更少的代碼，可以適應任何屏幕尺寸，並且比浮動渲染速度更快，因為瀏覽器可以本地確定最佳佈局。

8. 減少CSS代碼

最可靠和最快的代碼是您永遠不需要編寫的代碼！樣式表越小，下載和解析速度就越快。所有開發人員都從良好的意圖開始，但隨著功能數量的增加，CSS可能會隨著時間的推移而膨脹。保留舊的、不必要的代碼比刪除它並冒著破壞某些東西的風險更容易。一些需要考慮的建議：

• 警惕大型CSS框架。您不太可能使用大部分樣式，因此只在需要時添加模塊。
• 將CSS組織成具有明確責任的較小文件（部分）。如果CSS在widgets/_carousel.css中明確定義，則更容易刪除輪播小部件。
• 考慮使用BEM等命名方法來幫助開發獨立組件。
• 避免深度嵌套的Sass/預處理器聲明。擴展後的代碼可能會意外地變大。
• 避免使用!important來覆蓋級聯。
• 避免在HTML中使用內聯樣式。

諸如UnCSS之類的工具可以通過分析您的HTML來幫助刪除冗餘代碼，但要注意由JavaScript交互引起的CSS狀態。

9. 堅持級聯！

CSS-in-JS的興起使開發人員能夠避免CSS全局命名空間。通常，在構建時會創建隨機生成的類名，因此組件不可能發生衝突。如果CSS-in-JS改善了您的生活，那麼請繼續使用它。但是，值得了解CSS級聯的優勢，而不是在每個項目中都與之對抗。例如，您可以設置默認字體、顏色、大小、表格和表單字段，這些字段會普遍應用於單個位置的每個元素。很少需要在每個組件中聲明每個樣式。

10. 簡化選擇器

即使是最複雜的CSS選擇器也需要幾毫秒才能解析，但降低複雜性將減小文件大小並幫助瀏覽器解析。您真的需要這種選擇器嗎？ ！

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

同樣，要注意Sass等預處理器中的深度嵌套，其中可能會無意中創建複雜的選擇器。

11. 警惕代價高昂的屬性

某些屬性的渲染速度比其他屬性慢。為了增加卡頓，嘗試在所有元素上放置方框陰影！

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

瀏覽器性能會有所不同，但一般來說，任何在繪製前導致重新計算的操作在性能方面都會更加昂貴：

• border-radius
• box-shadow
• opacity
• transform
• filter
• position: fixed

12. 採用CSS動畫

本機CSS轉換和動畫始終比修改相同屬性的JavaScript驅動的效果更快。 CSS動畫在IE9及以下的舊版瀏覽器中不起作用，但這些用戶永遠不會知道他們錯過了什麼。也就是說，避免為了動畫而動畫。細微的效果可以增強用戶體驗，而不會對性能產生不利影響。過多的動畫可能會減慢瀏覽器速度，並可能導致某些用戶出現暈動症。

13. 避免動畫化代價高昂的屬性

動畫化元素的尺寸或位置可能會導致整個頁面在每一幀上重新佈局。如果動畫只影響合成階段，則可以提高性能。最有效的動畫使用：

• opacity和/或
• transform來平移（移動）、縮放或旋轉元素（元素使用的原始空間不會改變）。

瀏覽器通常使用硬件加速的GPU來渲染這些效果。如果兩者都不理想，請考慮使用position: absolute將元素從頁面流中移除，以便可以在其自己的圖層中對其進行動畫處理。

14. 指示哪些元素將進行動畫處理

will-change屬性允許CSS作者指示將對元素進行動畫處理，以便瀏覽器可以提前進行性能優化。例如，要聲明將應用轉換到元素：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

可以定義任意數量的逗號分隔屬性。但是：

• 將will-change作為解決性能問題的最後手段
• 不要將其應用於太多元素
• 給它足夠的時間來工作：也就是說，不要立即開始動畫。

15. 採用SVG圖像

可縮放矢量圖形（SVG）通常用於徽標、圖表、圖標和更簡單的圖表。 SVG不會像JPG和PNG位圖那樣定義每個像素的顏色，而是使用XML定義形狀，例如線條、矩形和圓形。例如：

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

更簡單的SVG比等效的位圖更小，並且可以無限縮放而不會丟失清晰度。 SVG可以直接在CSS代碼中作為背景圖像內聯。這對於較小、可重複使用的圖標來說可能非常理想，並且避免了額外的HTTP請求。例如：

body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

16. 使用CSS設置SVG樣式

更典型的是，SVG直接嵌入到HTML文檔中：

*, ::before, ::after {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

這會將SVG節點直接添加到DOM中。因此，可以使用CSS應用所有SVG樣式屬性：

.myelement {
  will-change: transform;
}

嵌入式SVG代碼的數量減少了，CSS樣式可以根據需要重複使用或動畫化。請注意，在img標籤內或作為CSS背景圖像使用SVG意味著它們與DOM分離，CSS樣式將不起作用。

17. 避免使用Base64位圖圖像

標準位圖JPG、PNG和GIF可以編碼為data URI中的base64字符串。例如：

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" />
</svg>

不幸的是：

• base64編碼通常比其二進制等效項大30%
• 瀏覽器必須解析字符串才能使用它
• 更改圖像會使整個（緩存的）CSS文件無效

雖然減少了HTTP請求，但它很少提供明顯的益處——尤其是在HTTP/2連接上。一般來說，除非圖像不太可能經常更改並且生成的base64字符串不太可能超過幾百個字符，否則請避免內聯位圖。

18. 考慮關鍵CSS

使用Google頁面分析工具的用戶通常會看到建議“內聯關鍵CSS”或“減少渲染阻塞樣式表”。加載CSS文件會阻塞渲染，因此可以使用以下步驟提高性能：

1. 提取用於渲染屏幕以上元素的樣式。諸如criticalCSS之類的工具可以提供幫助。
2. 將這些樣式添加到HTML中的<style></style>元素中。
3. 使用JavaScript異步加載主CSS文件（可能在頁面加載後）。

該技術無疑可以提高性能，並且可能有利於具有持續界面的漸進式Web或單頁應用程序。對於其他網站/應用程序，收益可能不太明顯：

• 無法識別“折疊”，並且它在每個設備上都會發生變化。
• 大多數網站都有不同的頁面佈局。每個頁面可能需要不同的關鍵CSS，因此構建工具變得至關重要。
• 動態的、JavaScript驅動的事件可能會導致關鍵CSS工具無法識別的屏幕以上更改。
• 該技術主要有利於用戶的首次頁面加載。 CSS會緩存到後續頁面，因此額外的內聯樣式會增加頁面重量。

也就是說，Google會喜歡您的網站，並將其推送到每個搜索詞的排名第一。 (SEO“專家”可以引用我的話。其他人都會知道這是無稽之談。)

19. 考慮漸進式渲染

漸進式渲染是一種技術，它不使用單個站點範圍的CSS文件，而是為單獨的組件定義單獨的樣式表。每個樣式表都在HTML中引用組件之前立即加載：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

每個<link>仍然會阻塞渲染，但時間更短，因為文件更小。頁面可以更快地使用，因為每個組件都會按順序渲染；可以在加載其餘內容時查看頁面的頂部。該技術適用於Firefox、Edge和IE。 Chrome和Safari會通過加載所有CSS文件並在發生這種情況時顯示白屏來“優化”體驗——但這並不比在<style></style>中加載每個文件更糟糕。漸進式渲染可能有利於大型網站，其中各個頁面是由不同組件的選擇構建的。

20. 學會熱愛CSS

最重要的技巧：了解您的樣式表！ 從StackOverflow或BootStrap添加大量CSS可能會產生快速的結果，但它也會使您的代碼庫膨脹，其中包含未使用的垃圾。進一步的自定義變得令人沮喪地困難，並且應用程序將永遠不會高效。 CSS易於學習，但難以掌握。如果您想創建有效的客戶端代碼，則無法避免這項技術。了解一些CSS基礎知識可以徹底改變您的工作流程，增強您的應用程序並顯著提高性能。 我錯過了您最喜歡的CSS性能技巧嗎？

關於優化CSS性能的常見問題

影響CSS性能的關鍵因素是什麼？

CSS性能會受到多種因素的影響。首先是CSS文件的大小。較大的文件需要更長時間才能下載和解析，從而減慢網站速度。第二個因素是CSS選擇器的複雜性。複雜的選擇器需要更多的處理能力才能匹配頁面上的元素。最後，使用CSS動畫和轉換也會影響性能，尤其是在處理能力有限的移動設備上。

如何減小CSS文件的大小以提高性能？

有多種策略可以減小CSS文件的大小。一種是刪除未使用的樣式。像PurifyCSS這樣的工具可以幫助識別和刪除未使用的CSS。另一種策略是壓縮CSS，這會刪除不必要的字符，如空格和註釋。最後，考慮使用CSS壓縮工具或在服務器上啟用GZIP壓縮以進一步減小文件大小。

複雜的CSS選擇器如何影響性能？

複雜的CSS選擇器會減慢網站速度，因為它們需要更多的處理能力才能匹配頁面上的元素。例如，後代選擇器（例如，.parent .child）比類選擇器（例如，.class）更昂貴。根據經驗，應盡量使選擇器保持簡單和具體，以提高性能。

CSS動畫和轉換對性能的影響是什麼？

CSS動畫和轉換會顯著影響性能，尤其是在處理能力有限的移動設備上。它們會導致佈局偏移和重繪，這會減慢網站速度。為了提高性能，請考慮使用will-change屬性提前告知瀏覽器哪些屬性和元素將被動畫化。

如何針對移動設備優化CSS？

針對移動設備優化CSS涉及多種策略。首先，考慮使用媒體查詢根據設備特性提供不同的樣式。其次，避免複雜的動畫和轉換，這些動畫和轉換會減慢移動設備上的性能。最後，考慮使用響應式圖像和延遲加載以減少需要下載的數據量。

我可以使用哪些工具來衡量CSS性能？

您可以使用多種工具來衡量CSS性能。 Google的Lighthouse和PageSpeed Insights可以提供網站性能（包括CSS）的全面概述。此外，Chrome開發者工具的“性能”面板可以幫助您識別代價高昂的CSS並對其進行優化。

CSS如何影響SEO？

雖然CSS本身不會直接影響SEO，但它會間接影響您的排名。加載緩慢的網站（通常是由大型未優化的CSS引起的）會導致糟糕的用戶體驗，這會對您的SEO產生負面影響。此外，Google將頁面速度視為排名因素，因此優化CSS可以幫助提高您的SEO。

如何使用CSS預處理器來提高性能？

Sass和Less等CSS預處理器可以通過允許您編寫更高效且更易於維護的代碼來幫助提高性能。它們提供了變量、嵌套和mixin等功能，這些功能可以減少您需要編寫的代碼量，並使其更易於管理。

什麼是關鍵CSS，它如何提高性能？

關鍵CSS是渲染網頁屏幕以上內容所需的最小阻塞CSS量。通過識別和內聯關鍵CSS，您可以加快頁面的初始渲染速度，從而提高感知性能。

如何優化CSS交付？

優化CSS交付涉及多種策略。首先，考慮將小型CSS直接內聯到HTML中，以避免額外的HTTP請求。其次，延遲非關鍵CSS以減少渲染阻塞資源。最後，考慮使用HTTP/2更有效地交付CSS文件。

以上是20個優化CSS性能的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！