如何縮小 CSS 以獲得更好的網站性能

為什麼要縮小 CSS？

CSS 縮小會減少階層式樣式表 (CSS) 檔案的大小，以便載入速度更快。 CSS 縮小的工作原理是從 CSS 標記中消除所有不必要的字符和空格，而不會影響瀏覽器解釋它的方式。

CSS 文件包含格式化 HTML 元素的說明。 當它們加載速度更快時，網頁整體加載速度更快，就像穿著輕便的衣服可以幫助慢跑者跑得更快一樣。 快速加載提高了頁面的用戶體驗和 SEO 價值，頁面 速度的改進甚至可以幫助提高轉化率。

作為一個例子，這個簡單的樣式表有幾行代碼，以及開發人員閱讀它的評論：

/* paragraph styling here */

p {
font-family: arial;
color: green;
background-color: white;
}

/* links */

a:link {
color: blue;
}

a:visited {
color: white;
}

CSS 縮小後，它只是一個壓縮行，並且註釋被刪除：

p {字體家族：宋體; 顏色：綠色; 背景顏色：白色;} 一個：鏈接 {顏色：藍色;} 一個：訪問 {顏色：白色;} 

雖然此文本對人類來說不太可讀，但瀏覽器讀取和解釋第二個版本的方式與第一個版本完全相同。 縮小版本具有加載速度更快的優勢，因為它佔用的空間更少。

頁面渲染的工作原理

在瀏覽器可以顯示網頁之前，它必須知道網頁上有哪些元素（例如文本，圖像和其他多媒體）以及所有內容都在頁面上的位置。 就像承包商在開始施工之前需要建築物的藍圖一樣，瀏覽器需要網頁的"藍圖"才能開始呈現頁面。

在收到網頁的 HTML 檔案後，瀏覽器就會開始建構稱為「 文件物件模型」(DOM) 樹狀結構的項目；這就像是粗略的輪廓或頁面上所有元素的草圖。 瀏覽器還解析所有 <style> 標籤和鏈接的 CSS 文件以構建 CSSOM 樹，該樹映射出所有這些頁面元素的樣式。

最後，瀏覽器結合 DOM 和 CSSOM 來創建一個"渲染樹。" 建立渲染樹之後，瀏覽器就會開始繪製頁面。 在發生這種情況之前，用戶正在查看空白屏幕。

結果：直到瀏覽器完成下載並讀取 CSS，頁面無法出現。

CSS 如何阻止網頁顯示？

在 Web 開發中，必須在頁面顯示給最終用戶之前加載的任何元素或功能稱為"渲染阻止資源。" CSS 就是這樣的資源。 必須優化渲染阻止資源，以便盡可能快速加載。

大量的渲染阻止資源下載需要更長的時間，導致瀏覽器等待-從字面上阻止頁面-因此它似乎對用戶來說似乎沒有任何事情發生。 這樣的延遲通常會導致用戶離開頁面（"退回"）。

它們也會影響「 核心網頁生命值」，這是 Google 用來衡量網頁效能的指標，尤其是「最大內容繪圖」(LCP)，用來衡量頁面最大元素載入所需的時間。 核心網站生命週期分數不佳可能會導致 Google 在搜尋結果中排名較低的網頁，因此網頁的整體流量可能較少。

如何縮小 CSS

幸運的是，許多縮小工具都可用於 CSS。 也許最方便的方法是使用與網站 內容傳遞網絡（CDN）集成的縮小工具，該服務可 緩存 並提供內容。 CDN 應該能夠提供縮小服務以進一步提高性能。

雲耀斑自動縮小功能 包含在雲耀斑 CDN 中。 網站所有者可以選擇 CSS 文件（以及 JavaScript 和 HTML 文件）以從他們的雲耀斑儀表板中進行縮小。

CSS 縮小和壓縮有什麼區別？

從技術上講，CSS 縮小與 CSS 壓縮不同，儘管兩者的目標是相同的：減小文件的大小。 縮小通過刪除註釋和字符來改變代碼。 壓縮會透過使用壓縮演算法 (例如 gzip) 來縮小檔案，而且實際上並不會改變檔案的內容。

縮小 CSS 有什麼缺點嗎？

由於縮小的 CSS 通常不太可讀，縮小可能會使開發人員更難以手動識別和修復 CSS 標記中的錯誤。

此外，縮小 CSS 本身不足以提高 網站的性能。 它可能會購買一個網站毫秒，但是網站運營商必須採取其他行動才能看到顯著的 性能改進 -包括 圖像優化，瀏覽器 HTTP 緩存等。

CSS 與縮小

縮小 是一個類似的概念，但對於可執行的 JavaScript 代碼。 註釋，空格和其他額外的字符被刪除，以便 .js 文件可以更快地加載和執行。 JavaScript 和 CSS 縮小兩者都有助於加載更快的網站，並可以導致更好的用戶參與度和增加自然流量。

網站運營商可以使用雲耀斑 CDN 來縮小 CSS 和 JavaScript — 在此處 了解可用的雲耀斑計劃。