可最佳化網站體驗指標的 CSS 相關技巧
編寫樣式和建構版面配置的方式，可能會對網站體驗核心指標產生重大影響。這對累計版面配置位移 (CLS) 和最大內容繪製 (LCP) 而言尤其重要。
本文說明最佳化網站體驗指標的 CSS 相關技巧。這些最佳化功能會依照網頁的不同層面細分，分別是版面配置、圖片、字型、動畫和載入。我們也會探討如何改善一個範例頁面：
版面配置
在 DOM 中插入內容
在網頁內容載入完畢後，於頁面插入內容，會將頁面上其他所有內容向下推。這會導致版面配置位移。
常見的例子是 Cookie 通知，尤其是位於頁面頂端的 Cookie 通知。其他網頁元素 (包括廣告和嵌入內容) 通常在載入時會造成這類版面配置位移。
識別
Lighthouse 的「避免大型版面配置位移」稽核功能會找出已變更的網頁元素。在這個示範中，結果如下所示：
這些發現不會列出 Cookie 通知，因為 Cookie 通知本身載入時並未變更。而是會讓頁面上該項目下方的項目 (即 div.hero 和 article) 轉移。如要進一步瞭解如何識別及修正版面配置位移，請參閱「對版面配置位移偵錯」。
修正
使用絕對或固定位置將 Cookie 通知放在網頁底部。
彙整前：
.banner {
position: sticky;
top: 0;
}
更新後：
.banner {
position: fixed;
bottom: 0;
}
另一個修正此版面配置位移的方法是，在螢幕頂端保留 Cookie 通知的空間。這種做法同樣有效。詳情請參閱「Cookie 通知最佳做法」。
圖片
圖片和最大內容繪製 (LCP)
圖片通常是網頁中最大的內容繪製 (LCP) 元素。其他可以做為 LCP 元素的網頁元素包括文字區塊和影片代表圖片。LCP 元素載入的時間會決定 LCP。
請務必注意，視使用者初次顯示網頁時看到的內容而定，網頁的 LCP 元素會在網頁載入到載入網頁時不同。在這個範例中，Cookie 通知的背景、主頁橫幅和文章文字都是潛在的 LCP 元素。
在範例網站中，Cookie 通知的背景圖片實際上是大型圖片。如要改善 LCP，您可以改為在 CSS 中繪製漸層，不必載入圖片來建立效果。
修正
變更 .banner CSS，使其使用 CSS 漸層，而非圖片：
彙整前：
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
更新後：
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
圖片和版面配置位移
圖片載入後，瀏覽器只能判斷圖片大小。如果圖片在網頁轉譯後才載入，但系統未保留圖片空間，則系統會在圖片顯示時調整版面配置。在示範中，主頁橫幅會在載入時造成版面配置位移。
識別
如要識別沒有 width 和 height 明確的圖片，請使用 Lighthouse 的「圖片元素具有明確寬度和高度」稽核功能。
在此範例中，主頁橫幅和文章圖片都缺少 width 和 height 屬性。
修正
在這些圖片上設定 width 和 height 屬性，以免版面配置位移。
彙整前：
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
更新後：
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
字型
字型可能會延遲文字算繪作業，並導致版面配置位移。因此，快速提供字型至關重要。
文字延遲顯示
根據預設，如果瀏覽器尚未載入關聯的網路字型，瀏覽器不會立即轉譯文字元素。這樣做是為了避免「閃爍無樣式的文字」(FOUT)。在許多情況下，這會延遲首次顯示內容繪製 (FCP)。在某些情況下，這會延遲最大內容繪製 (LCP)。
版面配置位移
字型切換雖然很適合用來快速向使用者顯示內容，但很有可能導致版面配置位移。當網頁字型和備用字型在網頁上佔用不同空間時，就會發生這些版面配置位移。使用比例相近的字型可盡量減少這些版面配置位移的大小。
識別
如要查看特定頁面上載入的字型，請開啟開發人員工具中的「Network」分頁，然後依「Font」篩選。字型檔案可能較大，因此只使用較少的字型通常有助於提升效能。
如要查看要求字型所需的時間，請按一下「Timing」分頁標籤。要求字型越快，就能越早載入及使用。
如要查看字型的要求鏈結，請按一下「Initiator」分頁標籤。一般來說，要求鏈結越短，就能越快要求字型。
修正
此示範內容使用 Google Fonts API。Google Fonts 提供透過 <link> 標記或 @import 陳述式載入字型的選項。<link> 程式碼片段包含 preconnect 資源提示。這麼做應該會比使用 @import 版本更快的樣式表傳送速度。
大致上，您可以將資源提示視為向瀏覽器發出提示，要求瀏覽器需要設定特定連線或下載特定資源的方法。因此，瀏覽器會優先處理這些動作。使用資源提示時，請注意，以特定動作的優先順序優先，並不會將瀏覽器資源用於其他動作。因此，資源提示應謹慎使用，不要放在所有位置。詳情請參閱「及早建立網路連線，以改善感知的網頁速度」。
從樣式表中移除下列 @import 陳述式：
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
將下列 <link> 標記新增至文件的 <head>：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
這些連結標記會指示瀏覽器提早連線至 Google Fonts 所用的來源，並載入含有 Montserrat 和 Roboto 字型宣告的樣式表。這些 <link> 標記應盡早放在 <head> 中。
動畫
動畫會影響網站體驗指標的主要方式，就是導致版面配置位移。您應該避免使用兩種動畫類型：觸發版面配置的動畫和會移動頁面元素的「類似動畫」效果。一般來說，您可以使用 transform、opacity 和 filter 等 CSS 屬性，將這些動畫替換為成效更佳的對等動畫。詳情請參閱「如何建立高效能的 CSS 動畫」。
識別
Lighthouse 的「避免使用非複合動畫」稽核功能有助於找出效能不佳的動畫。
修正
變更 slideIn 動畫序列以使用 transform: translateX()，而不是轉換 margin-left 屬性。
彙整前：
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
更新後：
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
CSS 嚴重
樣式表會阻礙轉譯功能。這表示瀏覽器遇到樣式表，會停止下載其他資源，直到瀏覽器下載並剖析樣式表為止。這可能會延遲 LCP。如要提升效能，請考慮移除未使用的 CSS、內嵌重要的 CSS，以及延遲不重要的 CSS。
結語
雖然仍有進一步改善的空間 (例如使用圖片壓縮功能更快提供圖片)，但這些變更大幅改善了這個網站的網站體驗指標。如果這是真正的網站，下一步是向實際使用者收集成效資料，評估網站是否符合大多數使用者的網站體驗指標門檻。 如要進一步瞭解網站體驗指標，請參閱「瞭解 Web Vitals」一文。