改善累計版面配置位移

瞭解如何避免版面配置突然變動，進而提升使用者體驗

Addy Osmani
Barry Pollard

發布日期：2020 年 5 月 5 日，上次更新日期：2025 年 2 月 7 日

累計版面配置位移 (CLS) 是三項網站體驗核心指標之一。這項指標會結合可視區域內位移的可見內容量，以及受影響元素移動的距離，測量內容的不穩定性。

版面配置位移可能會分散使用者注意力，假設你正在閱讀文章，突然間網頁上的元素四處移動，導致你閱讀中斷，必須重新尋找閱讀位置。這種情況在網路上很常見，包括閱讀新聞，或嘗試點選「搜尋」或「加入購物車」按鈕時。這類體驗會造成視覺上的不適感，令人感到沮喪。如果網頁突然新增或調整大小某個元素，導致可見元素被迫移動，就可能發生這種情況。

為了提供良好的使用者體驗，網站應力求在至少 75% 的網頁瀏覽中，將 CLS 維持在 0.1 以下。

CLS 值低於 0.1 代表良好，高於 0.25 則代表不佳，介於兩者之間則需要改善
良好的 CLS 值為 0.1 以下。不良值大於 0.25。

其他網站體驗核心指標都是以時間為準，以秒或毫秒為單位，但累計布局位移分數是根據內容位移量和位移距離計算得出，沒有單位。

本指南將說明如何針對版面配置位移的常見原因進行最佳化。

CLS 分數偏低最常見的原因如下：

  • 沒有尺寸的圖片。
  • 沒有維度的廣告、嵌入內容和 iframe。
  • 動態插入的內容，例如廣告、嵌入內容和沒有維度的 iframe。
  • 網頁字型。

瞭解版面配置位移的原因

開始尋找常見 CLS 問題的解決方案前，請務必先瞭解 CLS 分數，以及造成位移的原因。

實驗室工具與實際環境中的 CLS

開發人員經常認為 Chrome 使用者體驗報告 (CrUX) 測量的 CLS 不正確，因為這項指標與他們使用 Chrome 開發人員工具或其他實驗室工具測量的 CLS 不符。Lighthouse 等網頁效能實驗室工具可能不會顯示網頁的完整 CLS，因為這些工具通常會基本載入網頁，以評估某些網頁效能指標並提供指引 (不過 Lighthouse 使用者流程可讓您評估預設網頁載入稽核以外的項目)。

CrUX 是 Google 網頁指標計畫的資料集，因此會測量網頁的整個生命週期，而不只是實驗室工具通常測量的網頁初始載入期間。

網頁載入期間很常發生版面配置轉移，因為系統會擷取所有必要資源，以便初始轉譯網頁，但版面配置轉移也可能在初始載入後發生。許多載入後移位可能是使用者互動的結果，因此會從 CLS 分數中排除，因為這些是預期的移位 (只要發生在互動後的 500 毫秒內)。

不過，如果沒有符合資格的互動，系統可能會納入其他使用者意料之外的載入後位移，例如您進一步捲動網頁，載入延遲載入的內容，導致位移。載入後 CLS 的其他常見原因，是轉換的互動 (例如單頁應用程式)，這類互動所需時間超過 500 毫秒的寬限期。

PageSpeed Insights 會在「瞭解實際使用者的體驗」部分中，顯示網址的使用者感受 CLS，並在「診斷效能問題」部分中，顯示實驗室的載入 CLS。這些值之間的差異可能是載入後 CLS 所致。

PageSpeed Insights 顯示網址層級的資料，其中實際使用者的 CLS 顯著大於 Lighthouse CLS
在這個範例中，CrUX 測得的 CLS 比 Lighthouse 大得多。

找出載入 CLS 問題

如果 PageSpeed Insights 的 CrUX 和 Lighthouse CLS 分數大致相同，通常表示 Lighthouse 偵測到載入 CLS 問題。在這種情況下，Lighthouse 會透過兩項稽核提供更多資訊，說明因缺少寬度和高度而導致 CLS 的圖片，並列出網頁載入時發生位移的所有元素，以及這些元素對 CLS 的影響。您可以篩選 CLS 稽核，查看這些稽核：

Lighthouse 螢幕截圖：顯示 CLS 稽核結果，提供更多資訊，協助您找出並解決 CLS 問題
Lighthouse 的詳細 CLS 診斷。

開發人員工具的「效能」面板提供大量版面配置位移相關資訊：

Chrome 開發人員工具效能面板中顯示的版面配置位移記錄。
在「效能」面板中記錄新追蹤記錄後，結果的「版面配置位移」軌會填入紫色長條，顯示 Layout Shift 叢集。按一下菱形，即可在「摘要」面板中查看位移動畫和詳細資料。

版面配置位移會醒目顯示在「版面配置位移」軌中。紫色線條會將班表分組為班表叢集，菱形則會顯示該叢集中的個別班表。菱形的大小與位移大小成正比，方便您找出最大的位移。

按一下轉移，系統會顯示彈出式視窗，內含轉移的動畫，並以紫色醒目顯示轉移的元素。

此外，Layout Shift 記錄的「摘要」檢視畫面會顯示開始時間、位移分數和位移的元素。這項功能特別有助於深入瞭解載入 CLS 問題，因為使用重新載入效能設定檔即可輕鬆重現問題。

這也會連結至左側「洞察」面板中顯示的「版面配置位移原因」洞察，頂端會顯示總 CLS，以及版面配置位移的可能原因。

找出載入後 CLS 問題

如果 CrUX 和 Lighthouse 的 CLS 分數不一致，通常表示載入後 CLS。如果沒有欄位資料，就難以追蹤這些變化。如要瞭解如何收集欄位資料，請參閱「在欄位中評估 CLS 元素」。

「效能」面板的即時指標檢視畫面可讓您與網頁互動，並監控 CLS 分數，找出導致版面配置大幅位移的互動。

Chrome 開發人員工具效能面板的即時指標畫面中，顯示的版面配置位移記錄。
透過「效能」面板的即時指標檢視畫面，您可以在與網頁互動時監控網頁的 CLS 分數。

除了使用開發人員工具，您也可以在瀏覽網頁時，使用貼到控制台的 Performance Observer 記錄版面配置轉移。

設定好時段監控後，您可以嘗試複製任何載入後 CLS 問題。使用者捲動頁面時，如果延遲載入的內容完全載入，但沒有預留空間，就經常會發生 CLS。使用者將指標懸停在內容上時，內容發生位移也是常見的載入後 CLS 原因。在上述任一互動期間，即使內容位移發生在 500 毫秒內，仍視為非預期。

詳情請參閱「偵錯版面配置位移」。

找出 CLS 的常見原因後，您也可以使用 Lighthouse 的時間範圍使用者流程模式，確保引入版面配置轉移不會導致一般使用者流程回歸。

測量欄位中的 CLS 元素

在實際環境中監控 CLS，有助於判斷發生 CLS 的情況，並縮小可能原因的範圍。與大多數實驗室工具一樣，現場工具只會測量發生變化的元素，但通常足以提供資訊來找出原因。您也可以使用 CLS 欄位測量結果，判斷哪些問題最需要優先修正。

web-vitals 程式庫提供歸因函式，可供您收集這項額外資訊。詳情請參閱「在實際環境中偵錯效能」。其他 RUM 供應商也開始以類似方式收集及呈現這項資料。

造成 CLS 的常見原因

找出 CLS 的原因後，即可開始修正問題。本節將說明 CLS 的常見原因，以及如何避免這些問題。

未指定尺寸的圖片

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

未指定寬度和高度的圖片。
指定寬度和高度的圖片。
Lighthouse 報表：設定圖片尺寸後，累計版面配置位移前後的影響
Lighthouse 6.0 評估設定圖片尺寸對 CLS 的影響。

圖片的 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%)，系統就會使用顯示比例計算高度。

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

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

Safari 的行為類似，使用 HTML 屬性樣式來源。Firefox 完全不會在「檢查器」面板中顯示這個計算出的 aspect-ratio，但會用於版面配置。

上述程式碼中的 auto 部分非常重要，因為圖片下載後，圖片尺寸會覆寫預設的長寬比。如果圖片尺寸不同，圖片載入後仍會導致部分版面配置位移，但這可確保圖片可用時仍會使用圖片長寬比，以防 HTML 錯誤。即使實際顯示比例與預設值不同，與未提供尺寸的 0x0 預設圖片大小相比，仍可減少版面配置位移。

如要深入瞭解長寬比，以及回應式圖片的進一步思考方向，請參閱「使用媒體長寬比載入網頁時不會發生 JANK 錯誤」。

如果圖片位於容器中，可以使用 CSS 將圖片大小調整為容器的寬度。我們設定 height: auto;，避免使用圖片高度的固定值。

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 CSS 規則來保留空間，或是針對廣告等回應式內容，以類似瀏覽器自動對提供尺寸的圖片使用此屬性的方式，使用 aspect-ratio CSS 屬性。

三部行動裝置，第一部裝置只有文字內容，第二部裝置的文字內容向下移動，第三部裝置則預留空間並顯示預留位置，防止文字內容移動
預留廣告空間可避免版面配置位移

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

對於可能沒有固定高度的內容 (例如廣告)，您可能無法預留足夠的空間，完全消除版面配置位移。如果放送的廣告較小，發布商可以設定較大的容器樣式，避免版面配置位移，或根據歷來資料為廣告空間選擇最有可能的大小。但這種做法的缺點是會增加網頁上的空白空間。

您可以將初始大小設為最小的大小，並接受較大內容的某種程度的位移。如先前建議，使用 min-height 可讓父項元素視需要成長，同時減少版面配置位移的影響，相較於空白元素的 0 像素預設大小，效果更佳。

如果沒有傳回任何廣告，請顯示預留位置，盡量避免收合預留空間。移除為元素預留的空間，可能會導致與插入內容一樣多的 CLS。

將延遲載入的內容放在可視區域的下方

動態插入可視區域頂端的內容，通常會比插入可視區域底部的內容，造成更大的版面配置位移。不過，在可視區域的任何位置插入內容，仍會造成部分位移。如果無法為插入的內容預留空間，建議您將內容放在網頁後方，以減少對 CLS 的影響。

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

您可能在嘗試載入網站時，因視埠頂端或底部彈出的 UI 而發生版面配置位移。與廣告類似，橫幅和表單經常會發生這種情況，導致網頁上的其他內容位移：

未保留空間的動態內容。

如需顯示這類 UI 輔助功能，請預先在檢視區塊中預留足夠空間 (例如使用預留位置或骨架 UI)，這樣載入時就不會導致網頁中的內容意外移動。或者，您也可以在適當位置重疊內容，確保元素不屬於文件流程。如需這類元件的更多建議，請參閱「Cookie 通知最佳做法」一文。

在某些情況下，動態新增內容是使用者體驗的重要環節。舉例來說，在將更多產品載入商品清單時，或是在更新動態饋給內容時，在這些情況下，您可以透過下列幾種方式避免非預期的版面配置位移：

  • 在固定大小的容器中，以新內容取代舊內容，或使用輪播並在轉場效果結束後移除舊內容。請記得在轉場完成前停用所有連結和控制項，以免在載入新內容時發生誤觸。
  • 讓使用者啟動新內容的載入作業，以免他們對畫面變化感到意外 (例如使用「載入更多」或「重新整理」按鈕)。建議您在使用者互動前預先擷取內容，以便立即顯示。提醒您，使用者輸入內容後 500 毫秒內發生的版面配置移位，不會計入 CLS。
  • 在螢幕外順暢載入內容，並向使用者疊加顯示內容可用的通知 (例如「捲動至頂端」按鈕)。
Twitter 和 Chloé 網站的動態內容載入範例，不會導致版面配置非預期位移
動態內容載入範例，不會導致版面配置意外位移。左側：Twitter 載入的即時動態消息內容。右側：Chloé 網站上的「載入更多」範例。請參閱 YNAP 團隊在載入更多內容時，如何針對 CLS 進行最佳化。

動畫

變更 CSS 屬性值時，瀏覽器可能需要對這些變更做出反應。部分值 (例如 box-shadow 和 box-sizing) 會觸發重新配置、繪製和合成。即使要移動的元素位於自己的圖層上，變更 top 和 left 屬性也會導致版面配置位移。請避免使用這些屬性建立動畫。

變更其他 CSS 屬性不會觸發重新配置。包括使用 transform 動畫平移、縮放、旋轉或傾斜元素。

使用 translate 的合成動畫不會影響其他元素，因此不會計入 CLS。非合成動畫也不會導致重新配置版面。如要進一步瞭解哪些 CSS 屬性會觸發版面配置位移，請參閱「高效能動畫」。

網頁字型

下載及轉譯網頁字型通常會透過下列任一方式處理，然後才會下載網頁字型：

  • 備用字型會替換為網頁字型，導致未套用樣式的文字閃爍 (FOUT)。
  • 在網頁字型可用且文字顯示之前，系統會使用備用字型顯示「隱形」文字 (FOIT - 隱形文字閃爍)。

這兩種方法都可能導致版面配置位移。即使文字不可見，系統仍會使用備用字型排版，因此載入網站字型時，文字區塊和周圍內容的位移方式與可見字型相同。

下列工具可協助您減少文字位移：

  • font-display: optional，避免重新排版，因為只有在初始排版時可用的情況下，才會使用網路字型。
  • 請確認使用適當的備用字型。舉例來說，使用 font-family: "Google Sans", sans-serif; 可確保在載入 "Google Sans" 時，瀏覽器會使用 sans-serif 備用字型。如果只使用 font-family: "Google Sans" 而未指定備用字型，系統會使用預設字型 (Chrome 的預設字型為「Times」，這是一種襯線字型，比預設的 sans-serif 字型更不相符)。
  • 使用新的 size-adjust、ascent-override、descent-override 和 line-gap-override API，盡量縮小備用字型與網路字型之間的差異，詳情請參閱「改善字型備用機制」一文。
  • 字型載入 API 可縮短取得必要字型的時間。
  • 使用 <link rel=preload> 盡早載入重要網頁字型。預先載入的字型更有可能符合首次算繪，這樣就不會發生版面配置位移。

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

確保網頁適用往返快取，以減少 CLS

確保網頁符合返回/轉送快取 (bfcache) 的資格，是維持低 CLS 分數的有效方法。

往返快取會在您離開網頁後，將網頁保留在瀏覽器記憶體中一小段時間，因此如果您返回網頁，系統會將網頁還原至您離開時的狀態。這表示網頁會立即載入完成，不會因為先前所述的任何原因，在載入期間發生版面配置位移。

雖然這仍可能表示初始網頁載入時會發生版面配置變化，但使用者返回瀏覽網頁時，不會重複看到相同的版面配置變化。即使是初始載入，也應盡量避免發生位移，但如果難以完全解決，至少可以避免在任何 bfcache 導覽中發生位移，以減少影響。

許多網站都會提供返回和前進瀏覽功能。例如返回目錄頁面、類別頁面或搜尋結果。

這項功能推出至 Chrome 後，我們發現累計布局位移 (CLS) 有顯著改善。

所有瀏覽器預設都會使用 bfcache，但部分網站會因各種原因而不適用。請參閱bfcache 指南，進一步瞭解如何測試及找出阻礙 bfcache 使用的任何問題，確保充分運用這項功能，提升網站的整體 CLS 分數。

結論

如本指南稍早所述，您可以運用多種技巧找出並改善 CLS。Core Web Vitals 內建容許值，因此即使無法完全消除 CLS，使用其中一些技術也能減少影響。希望這能幫助您遵守這些限制，為網站使用者打造更優質的體驗。