「累計版面配置位移」(CLS) 是穩定的「Core Web Vitals」指標。這也是評估視覺化穩定性的重要指標，因為這可以量化使用者遇到版面配置未預期變更的頻率。較低的 CLS 值有助於確保網頁提供「愉悅」。
非預期的版面配置位移可能會以許多方式乾擾使用者體驗，例如當文字突然移動時，就造成使用者點選錯誤的連結或按鈕。在某些情況下，這可能會帶來嚴重的損害。
如果以非同步方式載入資源，或是在現有內容之前以動態方式加入 DOM 元素，通常會導致網頁內容出現非預期的移動。導致移動的動作可能是圖片或影片尺寸不明、字型顯示大於或小於備用廣告的字型，或是會動態調整大小的第三方廣告或小工具。
網站的開發運作方式與使用者體驗的差異。例如：
- 在開發和實際工作環境中，個人化或第三方內容的行為通常有所不同。
- 測試圖片通常已存在於開發人員的瀏覽器快取中，但使用者的載入時間較長。
- 在本機執行的 API 呼叫通常十分快速，因此在開發過程中，可能會發生無法明顯的延遲。
「累計版面配置位移」(CLS) 指標可測量實際使用者發生的頻率，協助您解決這個問題。
什麼是 CLS？
CLS 可以評估在網頁生命週期期間，每發生「意外」版面配置位移，就可產生最多大量版面配置位移分數。
每當可見元素從某個算繪影格移到下一個算繪影格時，就會發生「版面配置位移」。如要進一步瞭解如何評估這些位移，請參閱「版面配置位移分數」。
版面配置位移 (稱為「工作階段視窗」) 是指一或多個個別版面配置的快速位移，每次轉位都少於 1 秒，且時間最長為 5 秒。
最大爆發是工作階段視窗，顯示該視窗中所有版面配置位移的累計分數上限。
CLS 分數代表什麼？
網站的 CLS 分數必須達到 0.1 以下，才能提供良好的使用者體驗。為了確保大部分使用者都能達成這個目標，建議您評估網頁載入的第 75 個百分位數，並在行動裝置和電腦裝置上分段進行區隔。
如要進一步瞭解這項建議背後的研究和方法，請參閱「定義網站體驗核心指標指標門檻」一文。
版面配置位移的詳細資訊
版面配置位移是由 Layout Instability API 定義，這個 API 會在可視區域內顯示的元素改變起始位置 (例如，在預設寫入模式中，頂端和左側位置) 在兩個頁框之間變更時回報 layout-shift 項目。起始位置變更的元素會視為不穩定的元素。
只有在現有元素變更起始位置時，才會發生版面配置位移。如果將新元素加到 DOM 或現有元素大小有所變更，只有在該變更導致其他可見元素變更起始位置時，才會計為版面配置位移。
版面配置位移分數
為計算版面配置位移分數，瀏覽器會考量可視區域大小，以及兩個轉譯影格之間可視區域中不穩定的元素移動情形。版面配置位移分數是兩個測量值的乘積：「影響比例」和「距離比例」。
layout shift score = impact fraction * distance fraction
影響比例
影響比例會評估不穩定的元素如何影響兩個影格之間的可視區域區域。
在特定影格的影響部分，是該影格與前一影格所有不穩定元素可見區域的組合，並將其占可視區域總區域的比例。
這張圖片顯示了佔據一半可視區域的元素。在下一個頁框中，元素向下移動了可視區域高度的 25%。紅色虛線代表元素在兩個頁框中的可見區域。在本例中，元素佔可視區域總數的 75%，因此影響比例為 0.75。
距離分數
版面配置位移分數方程式的另一部分，是測量不穩定元素相對於可視區域移動的距離。「距離比例」是指在頁框中移動任何不穩定元素的最大水平或垂直距離，除以可視區域的最大尺寸 (寬度或高度，以較大者為準) 所得。
在這個範例中，最大的可視區域尺寸為高度，不穩定元素移動了可視區域高度的 25%，因此距離比例為 0.25。
0.75 的影響部分和 0.25 的距離比例產生版面配置位移分數為 0.75 * 0.25 = 0.1875。
示例
下一個範例說明瞭在現有元素中新增內容對版面配置位移分數有何影響：
在這個範例中，灰色方塊會改變大小，但起始位置不會改變，因此這不是不穩定的元素。
「Click Me!」按鈕先前不在 DOM 中，因此其起始位置也不會改變。
綠色方塊的起始位置確實改變，但它已部分移出可視區域，因此在計算影響比例時，系統不會將隱形區域納入考量。兩個頁框中綠色方塊可見區域的聯集 (紅色虛線矩形) 與第一個頁框中的綠色方塊區域 (即可視區域的 50%) 相同。影響比例為 0.5。
藍色箭頭代表距離分數。綠色方塊已向下移動約 14% 的可視區域，因此距離比例為 0.14。
版面配置位移分數為 0.5 x 0.14 = 0.07。
以下範例說明多個不穩定的元素如何影響頁面的版面配置位移分數：
清單中的第一個項目 (「Cat」) 不會變更影格之間的起始位置，因此是穩定的。加入清單的新項目先前並非在 DOM 中，因此兩者的起始位置也不會改變。但標示為「狗」、「馬」和「斑馬」的項目都會改變其起始位置，使其成為不穩定的元素。
同樣地，紅色虛線矩形代表這三個不穩定元素在位移前後的面積，在本例中，約佔可視區域區域的 60% (影響程度為 0.60)。
箭頭代表不穩定的元素從起始位置移開的距離。藍色箭頭代表的「Zebra」元素已移動最大，大約佔可視區域高度的 30%。因此，此範例中的距離分數設為 0.3。
版面配置位移分數為 0.60 x 0.3 = 0.18。
預期與非預期的版面配置位移
並非所有版面配置位移都不佳。事實上，許多動態網頁應用程式經常會變更頁面上元素的起始位置。只有當使用者不希望發生版面配置位移時，才會降低版面配置位移。
使用者啟動版面配置位移
版面配置的位移是針對使用者互動 (例如點選或輕觸連結、按下按鈕，或在搜尋框中輸入) 而發生轉變，前提是位移必須接近使用者清楚的互動關係。
舉例來說，如果使用者互動所觸發的網路要求可能需要一段時間才能完成，您最好立即建立一些空間並顯示載入指標，避免在要求完成時不想要的版面配置位移。如果使用者不知道正在載入內容，或是不知道資源何時準備就緒，他們可能會在等待期間嘗試點選其他元素，而在第一個元素載入完畢後，其他元素就可能從其下方移出。
在使用者輸入內容的 500 毫秒內發生的版面配置位移，系統會設定 hadRecentInput 標記，因此排除這類轉換。
動畫和轉場效果
妥善運用動畫和轉場效果，是更新頁面上內容的絕佳方式，可避免使用者感到意外。如果網頁突然不經意地突然改變，無論如何，都會造成不愉快的使用者體驗。然而，內容從某個位置逐漸且自然地移動到另一個位置，通常有助於使用者進一步瞭解狀況，並在狀態變化之間提供指引。
請務必遵循 prefers-reduced-motion 瀏覽器設定，因為動畫可能會對部分網站訪客造成健康或註意力問題。
CSS transform 屬性可讓您在不觸發版面配置位移的情況下，建立元素動畫：
- 使用
transform: scale()，而不變更height和width屬性。 - 如要移動元素，請使用
transform: translate()，不要變更top、right、bottom或left屬性。
如何評估 CLS
現場工具
研究室工具
在 JavaScript 中測量版面配置位移
如要測量 JavaScript 中的版面配置位移，請使用 Layout Instability API。
以下範例說明如何建立 PerformanceObserver，將 layout-shift 項目記錄到控制台：
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('Layout shift:', entry);
}
}).observe({type: 'layout-shift', buffered: true});
在 JavaScript 中評估 CLS
如要評估 JavaScript 中的 CLS，請將您記錄到工作階段中的非預期 layout-shift 項目分組，並計算最大工作階段值。如需參考實作，請參閱 web vitals JavaScript 程式庫原始碼。
在大多數情況下，卸載頁面時的 CLS 值就是該網頁的最終 CLS 值，但仍有部分重要例外狀況，詳情請見下一節。web vitals JavaScript 程式庫在 Web API 的限制下，會盡可能涵蓋這些項目。
指標和 API 之間的差異
- 如果網頁在背景載入，或是在瀏覽器繪製任何內容前就在背景載入，則不應回報任何 CLS 值。
- 如果網頁是從往返快取還原，表示網頁 CLS 值應重設為零，因為使用者會感到這是不同的網頁造訪。
- API 不會回報 iframe 中發生的
layout-shift轉換，但指標確實是網頁使用者體驗的一部分。這可以顯示出 CrUX 和 RUM 之間的差異。為了正確評估 CLS，您必須加入 iframe。子頁框可以使用 API，將layout-shift項目回報給上層框架以進行匯總。
除了這些例外狀況外，CLS 會評估網頁的整個生命週期，因此更加複雜：
- 使用者可能會將分頁保持開啟狀態很長一段時間，例如幾天、數週甚至數月。 事實上，使用者可能絕不會關閉分頁。
- 在行動作業系統上，瀏覽器通常不會在背景分頁執行頁面卸載回呼，因此難以回報「最終」值。
為處理這類情況，建議您在網頁在背景執行時回報 CLS，以及網頁在背景卸載的時間。visibilitychange 事件涵蓋這兩種情境。接著，接收這些資料的分析系統就需要在後端計算最終的 CLS 值。
開發人員不必自行記住和處理上述所有情況，而是使用 web-vitals JavaScript 程式庫評估 CLS，這會將本文提及的所有事項納入考量，但 iframe 案例除外：
import {onCLS} from 'web-vitals';
// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);
如何改善 CLS
如要進一步瞭解如何識別現場的版面配置位移，以及如何使用研究室資料進行最佳化，請參閱最佳化 CLS 指南。
其他資源
- Google 發布商廣告代碼的「盡量減少版面配置位移」指南
- 瞭解累計版面配置位移：Annie Sullivan 和 Steve Kobes，網址為 #PerfMatters (2020)
變更記錄
有時候，我們在測量指標的 API 中會發現錯誤，有時也會在指標本身定義中發現錯誤。因此，有時確實需要進行變更，而這些變更可能會在內部報表和資訊主頁中顯示為改善或迴歸。
為協助您管理，這些指標的實作或定義變更都會顯示在這份變更記錄中。
如果您有這些指標的意見回饋，請透過 web-vitals-feedback Google 群組提出。