改善累計版面配置位移

瞭解如何避免突然改變版面配置，改善使用者體驗

「我馬上就按下了！為什麼要遷移？😭?"

累計版面配置位移 (CLS) 是網站體驗核心指標的三項指標之一，這項指標會在使用者輸入內容的 500 毫秒內，加總各版面配置位移的位移分數來評估內容的不穩定度。這個專區會分析可見內容在可視區域內移動的數量，以及受影響的元素移動距離。

版面配置的轉變可能會分散使用者的注意力。假設您開始閱讀某篇文章，所有突然在頁面上移動的元素突然改變了，使得您停下腳步，重新找到想去的地方。這種網路常見的方法十分常見，包括閱讀新聞或嘗試點選「搜尋」或「加入購物車」按鈕。這類體驗相當令人困擾。造成這類元素常造成網頁突然新增或調整大小的其他元素，而被強制移動。

為了提供良好的使用者體驗，網站應確保 75% 的網頁造訪率達到 0.1 以下。

其他網站體驗核心指標是以幾秒或毫秒為基準，以時間為準的值，不同於以秒或毫秒測量的時間值，CLS 分數是無單位的值，計算的是移動的內容量和距離。

在這份指南中，我們會說明如何最佳化版面配置位移的常見原因。

CLS 不良的常見原因如下：

• 不含尺寸的圖片
• 廣告、嵌入項目和無尺寸的 iframe
• 動態插入的內容，例如廣告、嵌入內容和無尺寸的 iframe
• 網路字型

瞭解你的資歷來源

開始研究常見 CLS 問題的解決方案前，請務必先瞭解 CLS 分數以及變動內容。其中一個問題是瞭解 CLS 分數，後續的修正方法通常最為容易！

研究室工具中的 CLS 與實地領域

開發人員常聽到 Chrome 使用者體驗報告 (CrUX) 評估的 CLS 不正確，因為兩者透過 Chrome 開發人員工具或其他研究室工具評估的 CLS 不符。網站效能研究室工具 (例如 Lighthouse) 可能不會顯示完整的網頁 CLS，因為通常只會進行簡單的載入網頁，以評估部分網站成效指標並提供指引 (雖然 Lighthouse 使用者流程可以提供比預設網頁載入稽核之外的評估結果)。

CrUX 是網站體驗指標計畫的官方資料集，因此，系統會在整個網頁的整個生命週期中評估 CLS，而不只是在研究室工具一般會測量的初始網頁載入期間進行評估。

載入網頁時，版面配置位移是很常見的情形，因為系統會擷取所有必要資源，以初次轉譯網頁，但也可能在初次載入後發生版面配置位移。許多載入後轉換可能會因使用者互動而產生，因此當「預期」改變時，一旦發生「預期」變動，就可能會從 CLS 分數中排除，但前提是該互動發生在該次互動的 500 毫秒內。

然而，在未符合條件的情況下，載入後載入後可能會出現使用者未預期的情況 (例如，向下捲動頁面並載入延遲載入內容，進而導致變化)。載入後 CLS 的其他常見原因也與轉換互動有關，例如單頁應用程式，這可能需要超過 500 毫秒的寬限期。

PageSpeed Insights 會同時顯示使用者感知到的 CLS (來源網址位於「瞭解實際使用者的體驗」部分)，並在下方的「診斷效能問題」部分中顯示以實驗室為基礎的載入 CLS。如果兩者之間有差異，可能是因為載入後 CLS 所致。

找出負載 CLS 問題

如果 PageSpeed Insights 的 CrUX 和 Lighthouse CLS 分數普遍與描述，通常表示 Lighthouse 偵測到負載 CLS 問題。在這種情況下，Lighthouse 會協助執行兩項稽核，進一步提供因缺少寬度和高度導致 CLS 的圖片，並列出於網頁載入時移位的所有元素，以及它們的 CLS 貢獻。您可以篩選 CLS 稽核，藉此查看這些稽核結果：

開發人員工具的「效能」面板也會在「體驗」部分中醒目顯示版面配置的位移。Layout Shift 記錄的「Summary」(摘要) 檢視畫麵包含累計版面配置位移分數，以及顯示受影響區域的矩形疊加層。這特別適合用來取得載入 CLS 問題的詳細資料，因為這項作業很容易複製至重新載入效能設定檔。

找出載入後的 CLS 問題

如果 PageSpeed Insights 的 CrUX 和 Lighthouse CLS 分數未正常顯示，這可能表示載入後 CLS。如果沒有欄位資料有助於找出原因 (接下來我們會說明)，可能會更難以追蹤。

無論是在抬頭顯示器或控制台中，網站體驗指標 Chrome 擴充功能都能用來監控 CLS，在此進一步瞭解已轉移的元素上方。

除了使用擴充功能之外，您也可以在使用效能觀察工具錄製版面配置位移時，將其貼到控制台中。

監控資料轉移情形後，即可嘗試複製載入後 CLS 問題。如果內容延遲載入且未保留空間，CLS 通常會發生網頁收合的情況。懸停在內容上移動時，是載入 CLS 後另一個常見的原因。這兩個「互動」都不符合 500 毫秒的寬限期規定，因為這段期間的 CLS 將被視為「非預期轉換」，因為使用者互動時不應導致內容改變。其他互動 (例如點擊或輕觸) 也有一套寬限期，但常見原因是 CLS 在移動或新增內容時需要超過 500 毫秒。

詳情請參閱偵錯版面配置位移一文。

找出 CLS 的常見原因後，您也可以使用 Lighthouse 的時段使用者流程模式，確保一般使用者流程不會因導入版面配置位移而發生迴歸。

評估欄位中的 CLS 元素

此外，我們也建議監控欄位中的 CLS。可用來評估 CLS，更重要的是，也能評估影響現場 CLS 分數的元素，並將結果傳回您的數據分析服務。

因此，在您嘗試瞭解 CLS 發生時，可以排除上述多餘的猜測工作，因此這一點非常重要。再次提醒您，這樣做可以測量移動的元素，而非這些變化的根本原因，但通常足以找出原因，或至少縮小問題範圍。

透過評估欄位中的 CLS 也可以根據最常遇到的問題，按照重要性將問題排名。

web-vitals 程式庫的歸因功能可以收集這些額外資訊。詳情請參閱「欄位偵錯效能」一文。其他 RUM 供應商也開始以類似的方式收集和呈現這類資料。

CLS 的常見原因

找出 CLS 的原因後，即可開始修正問題。本節將說明 CLS 的一些較常見原因，以及您可以採取哪些措施避免這個問題。

不含尺寸的圖片

請務必在圖片和影片元素中加入 width 和 height 大小屬性。或者，請使用 CSS aspect-ratio 或類似方式預留所需空間。這個方法可確保在載入圖片時，瀏覽器可在文件內分配正確的空間。

圖片的 width 和 height 屬性記錄

在網站早期，開發人員會在 <img> 標記中加入 width 和 height 屬性，確保在瀏覽器開始擷取圖片前，已預先為網頁分配足夠的空間。這樣就能盡量減少重排和重新版面配置。

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

您可能會發現上述的 width 和 height 不含單位。這些「像素」維度可確保系統保留 640x360 區域。無論實際尺寸是否相符，圖片都會調整為符合這個空間的大小。

導入回應式網頁設計後，開發人員開始省略 width 和 height，開始使用 CSS 調整圖片大小：

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

但這個方法的缺點是，只有在圖片開始下載後才能分配空間，瀏覽器也可以決定圖片尺寸。圖片載入時，頁面會隨著每張圖片顯示在畫面上而自動重排。文字突然彈出畫面，是很常見的情況。這會對使用者體驗造成負面影響。

因此，請務必採用長寬比。圖片顯示比例是指其寬度與高度的比例。我們通常會用冒號分隔兩組數字 (例如 16:9 或 4:3)。採用 x:y 顯示比例時，圖片為寬 x 單位，高 y 單位。

也就是說，如果我們知道其中一個維度，可以決定另一個維度。採用 16:9 的長寬比：

• 如果 puppy.jpg 的高度為 360 像素，則寬度為 360 x (16 / 9) = 640 像素
• 如果 puppy.jpg 的寬度為 640 像素，則高度為 640 x (9 / 16) = 360 像素

瞭解長寬比後，瀏覽器即可計算出並保留足夠的空間來容納高度和相關區域。

設定圖片尺寸的現代最佳做法

新式瀏覽器現在會根據圖片的 width 和 height 屬性設定圖片的預設顯示比例，因此開發人員只需設定圖片並納入上述 CSS，即可避免版面配置位移：

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

所有瀏覽器接著會根據元素的現有的 width 和 height 屬性，新增預設顯示比例。

系統會根據圖片載入前的 width 和 height 屬性計算顯示比例。會在開始版面配置計算時提供這項資訊。只要圖片指示為特定寬度 (例如 width: 100%)，系統就會使用顯示比例計算高度。

這個 aspect-ratio 值是由主要瀏覽器在 HTML 的處理過程中計算而得，而不是使用預設的使用者代理程式樣式表 (請參閱這篇文章來深入瞭解原因)，所以這個值會稍有不同。例如，Chrome 在「元素」面板的「樣式」部分中顯示如下：

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari 的運作原理是使用 HTML Attributes 樣式來源。Firefox 目前不會在「檢查器」面板中顯示計算後的 aspect-ratio，但會將其用於版面配置。

上述程式碼的 auto 部分非常重要，因為這會在圖片下載後，以圖片尺寸覆寫 640 / 360。如果圖片尺寸不同，圖片載入後仍會造成版面配置位移，但可確保圖片顯示比例在圖片可用時 (如往常相同) 仍然有效，以免 HTML 不正確。而且在未提供尺寸的情況下，平移可能會小於 0x0 的預設圖片大小！

如要深入瞭解不同的長寬比，並進一步思考回應式圖片，請參閱「以媒體顯示比例載入的無資源網頁載入功能」一文。

如果圖片位於容器中，您可以使用 CSS 將圖片調整為該容器的寬度。我們設定了 height: auto;，避免圖片高度為固定值 (例如 360px)。

img {
  height: auto;
  width: 100%;
}

回應式圖片呢？

使用回應式圖片時，srcset 會定義您允許瀏覽器選取的圖片，以及每張圖片的尺寸。如要確保可以設定 <img> 的寬度和高度屬性，每張圖片應使用相同的顯示比例。

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

藝術創作方向呢？

網頁可能包含在狹窄的可視區域內，並在電腦上顯示完整圖片的裁剪相片。

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

這些圖片的長寬比可能不同。Chrome、Firefox 和 Safari 現在支援在 picture 元素的 source 子項中設定 width 和 height：

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width=480 height=400/>
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width=800 height=400/>
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width=800 height=400/>
</picture>

廣告、嵌入內容和其他延遲載入內容

如先前所見，圖片有特別注意事項。不過，圖片並不是唯一會導致版面配置位移的內容類型。廣告、嵌入、iframe 和其他動態插入的內容都可能造成內容下移，進而提高 CLS。

廣告是網路上版面配置位移的最主要因素之一。廣告聯播網和發布商通常支援動態廣告大小。採用廣告大小後，點閱率更高，且參與競價的廣告數量增加，因此成效/收益也會跟著增加。但很遺憾地，由於廣告會將您正在查看的可見內容推送到網頁上，導致使用者體驗不佳。

您可以運用嵌入式小工具，在網頁中加上可攜式網頁內容，例如 YouTube 影片、Google 地圖中的地圖和社群媒體貼文。這些小工具通常無法事先得知小工具內容的大小。舉例來說，如果是社群媒體貼文，可能包含內嵌圖片、影片、多列文字，或其他許多不可預測的因素。因此，提供嵌入功能的平台不一定會保留小工具空間，因此在載入時會導致版面配置移動。

處理這些問題的技巧都很類似。主要差異在於您對插入內容擁有多少控制權。如果插入廣告空間是由第三方 (例如廣告合作夥伴) 插入，您可能不知道插入內容的確切大小，也無法控制這些嵌入內容的任何版面配置位移。

靜態保留空間供延遲載入的內容

將延遲載入內容放入內容流程時，在初始版面配置中保留空間，即可避免發生版面配置位移。

做法很簡單，例如新增 min-height 樣式以預留空間；如果是廣告等回應式內容，使用新的 aspect-ratio CSS 屬性，就像瀏覽器會自動為具備尺寸的圖片使用這個屬性。

你可能需要使用媒體查詢功能，將不同板型規格的廣告或預留位置大小細微差異納入考量。

如果內容的高度沒有固定 (例如廣告)，您可能無法保留所需的確切空間，以完全消除版面配置位移。如果放送的是較小的廣告，發布商可以設定 (較大) 容器的樣式，以免版面配置位移，或是根據歷來資料選擇廣告版位最可能的大小。這種方法的缺點是會增加空白空間的數量，因此請留意此處的取捨。

您也可以將初始大小設為要使用的最小尺寸，然後接受某種程度的轉變，以處理較大的內容。如上所述，使用 min-height 會讓父項元素在必要時增加。這麼做並不會完全消除 CLS，但應該有助於降低 CLS 的影響，讓 CLS 更易於管理。空白元素的預設大小為 0 像素，達到 CLS 上限，因此任何大小都比這個大小還要好！

在沒有廣告傳回的情況下，如果系統沒有傳回廣告，建議您盡量避免收合保留空間。移除元素周圍的空間可以和插入內容一樣達到 CLS！

避免將延遲載入的內容放在可視區域頂端附近

如果動態插入的內容位於可視區域頂端附近，可能會比中間的內容變大。這是因為在頂端的元素下移，內容通常下移較多。也就是說，如果延遲載入的內容造成位移，就會移動更多元素。

反之，在可視區域中央附近附近動態插入的內容可能不會移動，因為上方的內容不太可能移動，但仍會導致部分 CLS。即使是在畫面底部插入的內容，也會將取代內容從畫面中移出，因而導致 CLS。

最理想的情況是不要切換其他內容，因此建議保留適當的空間。如果無法採用這種做法，則盡可能減少變動幅度，至少能降低對使用者和 CLS 分數的影響。

避免在沒有使用者互動的情況下插入新內容

您可能會因為在嘗試載入網站時，可看到可視區域頂端或底部的使用者介面彈出版面配置。與廣告類似，這種情況經常發生在改變網頁內容的橫幅和表單中：

• 「訂閱我們的電子報！」(哇，慢慢！我們剛見！)
• 「相關內容」
• 「安裝我們的 [iOS/Android] 應用程式」
• 「我們仍在處理訂單」

• 「GDPR 通知」

如果您需要顯示這些類型的 UI 預設用途，請事先在可視區域中預留足夠空間 (例如使用預留位置或骨架 UI)，這樣載入時就不會造成網頁內容突然移動。另一個方法是在適當情況下疊加內容，確保元素不在文件流程內。如要進一步瞭解這些元件類型的建議，請參閱「Cookie 通知的最佳做法」一文。

在某些情況下，動態新增內容是使用者體驗中很重要的一環。例如在商品清單中載入更多產品，或是更新現行的動態饋給內容時。在這些情況下，可以避免發生非預期的版面配置位移：

• 在固定大小容器內將舊內容替換成新內容，或使用輪轉介面，並在轉換後移除舊內容。請務必在轉場效果結束前停用所有連結和控制項，以免在新內容播放時意外點擊或輕觸。
• 請使用者啟動新內容載入程序，以免遭到偏移而感到意外 (例如按下「載入更多」或「重新整理」按鈕)。建議您在使用者互動之前預先擷取內容，讓內容立即顯示。提醒您，在 500 毫秒內發生的版面配置位移不計入 CLS。
• 流暢地載入畫面外內容，並疊加顯示通知 (例如使用「向上捲動」按鈕)。

動畫

變更 CSS 屬性值時，瀏覽器可能必須回應這些變更。多個值會觸發重新版面配置、繪製和複合，例如 box-shadow 和 box-sizing。請盡量避免動畫播放。

大幅提高多個 CSS 屬性的效率後，舉例來說，您可以使用 transform 動畫來平移、縮放、旋轉或傾斜，而不必觸發重新版面配置，也因此完全避免版面配置位移。

相反地，如果透過變更 top 和 left CSS 屬性 (而非 translate) 來動畫播放動畫，就會發生版面配置位移。即使移動中的元素位於其本身圖層，且不會因此轉移到其他元素，這種情況就會發生。透過 translate 建立的複合動畫不受 CLS 影響，因為這些動畫並不能影響其他元素。使用非複合動畫時，還有其他顯著的效能優勢，因為這類動畫不會導致版面重新版面配置，因此對瀏覽器的運作效能也大幅降低。

如要進一步瞭解哪些 CSS 屬性會觸發版面配置，請參閱「高效能動畫」。

網路字型

一般而言，在下載網路字型之前，系統會先透過下列其中一種方式處理下載及轉譯網路字型：

• 備用字型會替換為網路字型 (FOUT，代表未設定樣式的文字閃光燈)
• 顯示「隱形」文字時，使用備用字型顯示，直到可以使用網頁字型且顯示文字顯示為止 (FOIT，也就是隱藏文字的閃爍)

請務必瞭解，這兩種方式都有可能造成版面配置位移。雖然文字看不到，但使用的是備用字型。這表示使用字型和周圍內容的文字區塊會在載入網路字型時改變，就像 FOUT 的可見字型一樣。

下列工具可協助您盡量減少這種情況：

• font-display: optional 可避免重新版面配置，因為只有在初始版面配置推出時，才能使用網路字型。
• 確認使用適當的備用字型。舉例來說，使用 font-family: "Google Sans", sans-serif; 可確保在載入 "Google Sans" 時，使用瀏覽器的 sans-serif 備用字型。如果沒有使用 font-family: "Google Sans" 指定備用字型，就會使用預設字型，在 Chrome 中為「Times」，這是比預設的 sans-serif 字型差不多的 Serif 字型。
• 使用新的 size-adjust、ascent-override、descent-override 和 line-gap-override API，盡可能減少備用字型和網頁字型的大小差異，詳情請參閱「改善的字型備用項」文章。
• Font Loading API 可縮短取得必要字型的時間。
• 使用 <link rel=preload> 盡早載入重要網路字型。預先載入的字型較有機會看到第一個繪製，即不會發生版面配置位移。

如要瞭解其他字型最佳做法，請參閱「字型最佳做法」。

確認網頁符合 bfcache 的資格，降低 CLS

如要降低 CLS 分數偏低，有效的技巧就是確保網頁符合往返快取 (bfcache) 的資格。

當您離開網頁後，bfcache 會將網頁保留在瀏覽器記憶體中短暫保留一段時間，因此如果您返回這些頁面，系統將會完整還原您離開的網頁。這表示完整載入的網頁會立即顯示，而且在載入期間通常不會因為上述任何原因而出現變化。

雖然這可能仍代表初次載入網頁時會發生版面配置位移，但當使用者返回瀏覽網頁時，並未重複看到相同的版面配置位移。請一律避免在初始負載時產生變化，但在這種情況下，完整解析較為困難，您可以至少避免在 bfcache 瀏覽導覽中降低影響。

許多網站常使用往返瀏覽功能。例如返回內容頁面、類別網頁或搜尋結果。

在 Chrome 推出這項功能時，我們發現 CLS 有顯著的改善項目。

所有瀏覽器皆預設使用 bfcache，但由於各種原因，某些網站不符合 bfcache 的資格。請參閱 bfcache 文章，進一步瞭解如何測試並找出導致 bfcache 使用情形發生問題的問題，確保您可以充分運用這項功能，提高網站的整體 CLS 分數。

結語

有幾種技巧可以辨識及改善 CLS，如上所述。網站體驗核心指標內建幾種機制，因此即使你無法完全刪除 CLS，仍能透過上述部分技術降低影響。這樣不但能改善使用者體驗，還能避免超出這些限制。

本指南的介紹到此告一段落但我們希望這項做法能減輕使用者的注意力 :)