瞭解如何避免版面配置突然變動，提升使用者體驗
累計版面配置位移 (CLS) 是 Core Web Vitals 指標的其中一項。這項指標會結合可視內容在畫面上移動的程度，以及受影響元素移動的距離，藉此評估內容的不穩定性。
版面配置位移可能會讓使用者分心。想像一下，當網頁上所有的元素出現突然變換時，導致您找不到某個地方，這時您開始閱讀某篇文章。這很常出現在網路上，包括閱讀新聞或嘗試按一下這些「搜尋」或「加入購物車」按鈕。這類體驗會讓人覺得視覺上不協調，令人不悅。這通常是因為頁面元素突然加入其他元素或調整大小，導致這些元素被迫移動。
為提供良好的使用者體驗，網站應力求將 CLS 達到 0.1 或更低，時間至少達 75%。
與其他 Core Web Vitals 相比，網站體驗指標是以秒或毫秒為單位測量時間值，但 CLS 分數是無單位值，是根據內容的移動程度和目前距離計算而得。
本指南涵蓋版面配置位移的常見原因。
造成 CLS 不佳的常見原因包括：
- 沒有尺寸的圖片。
- 廣告、嵌入內容和 iframe 沒有設定尺寸。
- 動態插入的內容，例如廣告、嵌入內容和沒有尺寸的 iframe。
- 網頁字型。
瞭解版面配置位移的原因
開始查看常見 CLS 問題的解決方案之前，請務必先瞭解 CLS 分數以及變化來源。
實驗室工具和實地測試的 CLS
開發人員常常認為 Chrome 使用者體驗報告 (CrUX) 評估的 CLS 有誤，原因是他們透過 Chrome 開發人員工具或其他研究室工具測量的 CLS 有誤。網站效能研究室工具 (例如 Lighthouse) 可能不會顯示網頁的完整 CLS，因為這類工具通常會對網頁進行簡單的載入，藉此評估部分網頁成效指標並提供相關指引 (不過 Lighthouse 使用者流程可讓您評估預設網頁載入稽核之外的項目)。
CrUX 是 Web Vitals 計畫的官方資料集，因此在網頁整個生命週期中都會評估 CLS，而不是在研究室工具一般測量的初始載入期間。
頁面載入過程中經常出現版面配置位移的情況，因為系統會擷取所有必要資源，完成初始轉譯頁面，但也可能在初始載入後發生版面配置位移。許多資料載入後變動可能因使用者互動而發生，因此從 CLS 分數中排除，只要這些變動是在該次互動發生 500 毫秒內發生，就會從 CLS 分數排除。
然而，其他沒有符合條件的互動行為，則可能納入使用者未預期的其他載入後位移。舉例來說，如果頁面繼續捲動並載入延遲載入的內容，就會造成位移。載入後 CLS 的其他常見原因包括轉換互動，例如單頁應用程式需要超過 500 毫秒的寬限期。
PageSpeed Insights 會在「瞭解實際使用者體驗」部分顯示網址的使用者感知 CLS，並在「診斷效能問題」部分顯示實驗室負載 CLS。這些值之間的差異可能是後載入 CLS 的結果。
找出負載 CLS 問題
如果 PageSpeed Insights 的 CrUX 和 Lighthouse CLS 分數大致保持一致，這通常表示 Lighthouse 偵測到載入 CLS 問題。在這種情況下，Lighthouse 會協助進行兩項稽核，提供更多資訊，說明圖片因缺少寬度和高度而導致 CLS，並列出所有因網頁載入而轉移的元素，以及這些元素對 CLS 的影響。如要查看這些稽核，您可以篩選 CLS 稽核：
開發人員工具中的效能面板也會醒目顯示「體驗」部分中的版面配置位移。Layout Shift 記錄的「Summary」檢視畫麵包含累計版面配置位移分數，以及顯示受影響區域的矩形疊加層。這對於載入 CLS 問題來說特別有幫助，因為我們可以透過重新載入效能設定檔輕鬆複製這個問題。
Layout Shift 記錄。點選記錄後，系統會顯示「從」和「移至」等詳細資料，讓您深入瞭解受影響的元素。找出載入後的 CLS 問題
CrUX 和 Lighthouse CLS 分數不一致，通常表示有載入後 CLS。在沒有實地資料的情況下，要追蹤這些變化可能會很困難。如要瞭解如何收集欄位資料，請參閱「測量欄位中的 CLS 元素」。
Web Vitals Chrome 擴充功能可用於監控 CLS 指標，在您與網頁互動時，這項功能會顯示在 HUD 或控制台中，讓您進一步瞭解元素移動的詳細資訊。
除了使用擴充功能之外，您也可以使用 Performance Observer 記錄版面配置位移，並將這項工具貼入控制台。
設定位移監控功能後，您可以嘗試複製所有載入後 CLS 問題。當使用者捲動頁面時，如果延遲載入的內容未保留空間，就可能會發生 CLS。另一個常見的 CLS 原因，是使用者將遊標懸停在指標上時，內容發生變動。在上述互動期間，任何內容的跑版都會視為非預期的情況，即使發生在 500 毫秒內也是如此。
詳情請參閱「對版面配置位移進行偵錯」。
找出 CLS 的常見原因後，您也可以使用 Lighthouse 的時間跨距使用者流程模式，確保典型的使用者流程不會因版面配置偏移而退化。
測量欄位中的 CLS 元素
對現場監控 CLS 而言，有助於判斷 CLS 會發生的情況，以及縮小可能原因。與大多數的研究室工具一樣，現場工具只會評估有變動的元素，但通常可提供足夠資訊來找出原因。您也可以使用 CLS 欄位評估結果，判斷哪些問題應優先修正。
web-vitals 程式庫提供歸因函式，可讓您收集這類額外資訊。詳情請參閱「在實地偵錯效能」。其他 RUM 供應商也開始收集並呈現這類資料。
CLS 的常見原因
找出 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 屬性，可以透過下列方式避免版面配置位移：
請在圖片上設定這些屬性，並在
樣式表。
<!-- 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 時由主要瀏覽器計算，而不是使用預設的 User-Agent 樣式表單 (請參閱這篇文章，深入瞭解原因)，因此顯示的值會有些許不同。舉例來說，Chrome 會在「元素」面板的「樣式」部分顯示以下格式：
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
Safari 的運作方式與使用「HTML 屬性」樣式來源相同。Firefox 不會在其「Inspector」面板中顯示這項計算的 aspect-ratio，但會用於版面配置。
上述程式碼中的 auto 部分非常重要，因為它會在圖片下載後，讓圖片尺寸覆寫預設的顯示比例。如果圖片尺寸不同，這仍會造成圖片載入後部分版面配置位移，但這麼做可確保在產生圖片時的長寬比仍會使用，以防 HTML 不正確。即使實際顯示比例與預設值不同，仍會比未提供尺寸的圖片 0x0 預設大小造成較少的版面配置位移。
若要更深入地瞭解顯示比例，並進一步思考回應式圖片的做法，請參閱「使用媒體顯示比例載入無資源浪費頁面」一文。
如果圖片位於容器中，您可以使用 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 現在支援在以下瀏覽器上設定 width 和 height：
指定的 <picture> 元素中的 <source> 元素：
<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 預設用途，請事先在可視區域中保留足夠的空間 (例如使用預留位置或骨架 (skeleton) 使用者介面，這樣當載入時，就不會造成網頁中的內容出現意外的變動。或者，您也可以在合理的情況下疊加內容，確保元素不屬於文件流程的一部分。如需更多有關這些元件的建議，請參閱「Cookie 通知的最佳做法」一文。
在某些情況下，動態新增內容是使用者體驗中重要的一環。例如，在商品清單載入更多產品時，或是更新現行動態饋給內容時。在這些情況下，您可以透過以下幾種方式避免發生非預期的版面配置偏移：
- 在固定大小容器中將舊內容換成新內容，或使用輪轉介面，並在轉換後移除舊內容。請記得在轉場完成前停用所有連結和控制項，以免在載入新內容時意外點選或輕觸。
- 請使用者啟動新的內容載入程序，以免使用者感到不知所措 (例如顯示 [載入更多] 或 [重新整理] 按鈕)。建議您在使用者互動前預先擷取內容，以便立即顯示。提醒您，在使用者輸入後的 500 毫秒內發生的版面配置移位不會計入 CLS。
- 將內容流暢地載入畫面外，並疊加顯示通知給使用者 (例如使用「向上捲動」按鈕)。
動畫
變更 CSS 屬性值可能需要瀏覽器對這些變更做出反應。某些值 (例如 box-shadow 和 box-sizing) 會觸發重新版面配置、繪製和合成作業。變更 top 和 left 屬性也會導致版面配置位移，即使要移動的元素位於其專屬圖層也是如此。避免使用這些屬性製作動畫。
您可以變更其他 CSS 屬性，而不會觸發重新版面配置。包括使用 transform 動畫來變換、縮放、旋轉或扭曲元素。
使用 translate 的複合動畫不會影響其他元素，因此不會計入 CLS。非合成動畫也不會造成重新版面配置。如要進一步瞭解哪些 CSS 屬性會觸發版面配置位移，請參閱「高效能動畫」。
網頁字型
一般而言，下載和轉譯網路字型會在下載網路字型之前採用下列其中一種做法：
- 備用字型會與網頁字型互換，導致 Flash of Unstyled Text (FOUT) 現象。
- 「隱藏」文字將以備用字型顯示，直到有網路字型且文字可見 (FOIT，隱藏文字)。
這兩種方法都可能導致版面配置位移。即使文字不可見，仍會使用備用字型進行版面配置，因此當網站字型載入時，文字區塊和周圍內容會以與可見字型相同的方式移動。
下列工具可協助您盡量減少文字移動的情形：
font-display: optional可避免重新版面配置，因為只有在初始版面配置時可用的網路字型才會使用。- 確認使用適當的備用字型。舉例來說，使用
font-family: "Google Sans", sans-serif;可確保在載入"Google Sans"時，使用瀏覽器的sans-serif備用字型。如未使用font-family: "Google Sans"指定備用字型，系統會使用預設字型，而 Chrome 中的預設字型是「Times」(Serif 字型，比預設的sans-serif字型還差)。 - 使用新的
size-adjust、ascent-override、descent-override和line-gap-overrideAPI，如「改善字型備用方案」一文所述，盡量減少備用字型和網頁字型之間的大小差異。 - Font 正在載入 API，可減少取得必要字型的時間。
- 請盡可能使用
<link rel=preload>載入重要網頁字型。如果是預先載入的字型，較有機會看到第一次顯示的畫面，這時版面配置不會發生位移。
如要瞭解其他字型的最佳做法，請參閱「字型的最佳做法」。
確認網頁符合 bfcache 的資格，藉此降低 CLS
如要確保 CLS 分數維持在低水準，最有效的方法就是確保網頁符合前進/後退快取 (bfcache) 的使用條件。
在您離開後，bfcache 會在瀏覽器記憶體中保留網頁一段時間，因此如果您返回網頁，系統會還原網頁的確切狀態。也就是說，網頁完全載入後即可立即瀏覽，不會因為先前所述的任何原因，在載入期間出現任何變動。
雖然這可能仍表示初次載入頁面時發生版面配置位移的情況，但當使用者返回頁面時，不會重複看到相同的版面配置位移。您應一律避免在初始載入時發生位移，但如果要完全解決這項問題較為棘手，您至少可以避免在任何 bfcache 導覽時發生位移，以減輕影響。
許多網站都很常使用上一頁及下一頁瀏覽功能。例如返回內容頁面、類別頁面或搜尋結果。
Chrome 在 Chrome 推出後，我們發現 CLS 有許多明顯的改善空間。
所有瀏覽器都預設使用 bfcache，但基於各種原因，某些網站無法使用 bfcache 。請參閱 bfcache 指南，進一步瞭解如何測試並找出任何會妨礙 bfcache 使用情形的問題，確保您能充分運用這項功能，提升網站的整體 CLS 分數。
結論
如本指南前述，您可以使用多種技巧找出並改善 CLS。Core Web Vitals 中內建了許可機制，因此即使無法完全排除 CLS，透過以下部分技巧應能減少影響。這樣可避免超出限制，為網站使用者打造更優質的體驗。