瞭解我們改善累計版面配置位移指標的計畫，並提供意見回饋。
累計版面配置位移 (CLS) 是用來評估網頁視覺穩定性的指標。這個指標稱為累計版面配置位移，因為系統會在網頁的整個生命週期中，加總每個位移的分數。
雖然所有版面配置變更都會造成較差的使用者體驗，但在開啟時間較長的網頁上，這種影響會更加明顯。因此，Chrome 速度指標團隊著手改善 CLS 指標，讓指標對網頁停留時間的影響更為中立。
這項指標必須著重於網頁整個生命週期中的使用者體驗，因為我們發現使用者在載入後，在捲動或瀏覽網頁時經常會遇到負面體驗。不過，我們也聽到一些擔憂，認為這會對長效網頁 (使用者通常會長時間開啟的網頁) 造成影響。有些網頁通常會保持較長時間開啟，最常見的幾種是無限捲動和單頁應用程式的社群媒體應用程式。
我們針對 CLS 分數偏高的長效網頁進行內部分析，發現大部分問題都是由下列模式造成：
- 無限捲動器會在使用者捲動畫面時移動內容。
- 輸入處理常式在回應使用者互動時，更新 UI 的時間超過 500 毫秒，且沒有任何預留位置或骨架模式。
我們鼓勵開發人員改善使用者體驗，但我們也會努力改善這項指標，並尋找可行做法的意見回饋。
我們如何判斷新指標是否較佳？
在深入探討指標設計之前，我們想確保在各種實際網頁和用途中，評估我們的想法。首先，我們設計了一項小型使用者研究。
首先，我們記錄了 34 個使用者在不同網站上的歷程，並製作成影片和 Chrome 追蹤記錄。在選擇使用者歷程時，我們希望達成以下幾個目標：
- 各種不同類型的網站，例如新聞和購物網站。
- 各種使用者歷程，例如初始網頁載入、捲動、單頁應用程式導覽和使用者互動。
- 網站上個別版面配置位移的次數和強度。
- 除了版面配置變動之外，網站上幾乎沒有負面體驗。
我們請 41 位同事同時觀看兩部影片，並評估兩者在版面配置轉換方面哪一部表現較佳。根據這些評分，我們建立了理想的網站排名順序。使用者排名結果證實了我們的疑慮：我們的同事和大多數使用者一樣，對載入後的版面配置變化感到相當困擾，尤其是在捲動和單頁應用程式導覽期間。我們發現，在這些活動期間，有些網站的使用者體驗比其他網站好上許多。
我們記錄了 Chrome 追蹤記錄和影片，因此可取得每個使用者歷程中個別版面配置變更的所有詳細資料。然後用來計算每個使用者歷程的指標值。這讓我們瞭解各項指標變化版本對使用者歷程的排名，以及各個排名與理想排名的差異。
我們測試了哪些指標構想？
區間策略
網頁經常會出現多個排版變動緊密相連的情況，因為元素會隨著新內容逐一加入而變動多次。因此，我們嘗試使用一些技巧將班次分組。為達成這個目標，我們研究了三種時間區間設定方法：
- 滾動式時間區間
- 滑動視窗
- 工作階段時間區間
在每個範例中，頁面都會在一段時間內出現不同程度的版面配置變動。每個藍色長條都代表單一版面配置位移，長度則代表該位移的分數。圖片說明不同視窗策略如何將版面配置的變動分組。
滾動式時間區間
最簡單的做法是將網頁拆成多個大小相同的區塊。這類時間區間稱為滾動式時間區間。您會注意到，第四個長條看起來似乎是組合成第二個滾動式視窗，但因為所有窗戶都是位於第一個視窗的固定大小。如果網頁載入或使用者互動時間稍有差異，相同的版面配置位移可能會落在倒轉視窗邊界兩側。
橫拉式窗戶
我們可以持續更新潛在的時間範圍，藉此查看更多可能的相同長度分組。上圖一次顯示一個滑動視窗，但我們可以查看所有可能的滑動視窗或其中的子集，以建立指標。
工作階段時間區間
如果我們想專注於找出有大量版面配置位移的頁面區域，可以從位移啟動每個視窗，並持續擴充各個視窗，直到遇到版面配置位移的指定大小差距為止。這種做法會將版面配置變更項目分組，並忽略大部分未變更的使用者體驗。其中一個潛在問題是，如果版面配置位移沒有落差，以工作階段回溯期為依據的指標可能會不受目前的 CLS 指標限制，因此，我們也嘗試在最大視窗大小的情況下嘗試這個做法。
視窗大小
根據視窗的實際大小，這個指標可能會得到非常不同的結果，因此我們嘗試多種不同的視窗大小：
- 以個別回溯期的形式移動 (無視窗)
- 100 毫秒
- 300 毫秒
- 1 秒
- 5 秒
摘要
我們嘗試使用許多方法來總結不同視窗。
百分位數
我們查看了最大值視窗，以及第 95 個百分位數、第 75 個百分位數和中位數。
平均值
我們查看了平均視窗值。
預算
我們懷疑有使用者沒注意到某些最低版面配置位移分數，可以直接在分數中計入版面配置位移超過該「預算」的次數。因此，對於不同的潛在「預算」值，我們會考量過預算轉移的百分比，以及總轉變分數超出預算的百分比。
其他策略
此外，我們也研究過許多沒有指定回溯期的策略，例如版面配置位移總量除以網頁停留時間，以及最差的 N 個輪轉次數平均值。
初步結果
整體來說，我們根據上述想法的排列組合，測試了 145 種不同的指標定義。我們根據每個指標的得分，為所有使用者歷程進行排名，然後依據與理想排名的接近程度，為指標進行排名。
為了取得基準，我們也依據目前的 CLS 分數對所有網站進行排名。CLS 排名第 32 名，與其他 13 種策略並列，因此比上述策略的大多數變化版本都好。為確保結果有意義，我們也加入了三種隨機排序。如預期，隨機排序的效果不如其他測試策略。
為了瞭解是否可能過度擬合資料集，我們在分析後記錄了一些新的版面配置轉換影片和追蹤記錄，並手動為這些資料進行排名，結果發現新資料集和原始資料集的指標排名非常相似。
決定排名時，可以採用幾項不同的策略。
最佳策略
在評估策略時，我們發現三種策略排名居冠。每個版本的成效大致相同，因此我們打算進一步深入分析這三個版本。我們也想聽聽開發人員的意見，瞭解在決定使用哪種方式時，除了使用者體驗之外，還有哪些因素需要考量。(請參閱下方說明，瞭解如何提供意見回饋)。
長執行時間的高百分位數
以下幾種視窗策略適用於較長的視窗大小：
- 1 秒滑動視窗
- 工作階段時間區間上限為 5 秒，間隔 1 秒
- 工作階段時間區間不設上限，間隔 1 秒
這些廣告在第 95 個百分位數和最大值之間都很出色。
不過，對於這麼大的視窗大小，我們擔心使用第 95 百分位數，因為我們通常只會查看 4 到 6 個視窗，而取其中第 95 百分位數需要大量插補。我們不清楚插補功能在指標值方面的作用。最高值的資訊比較明確，因此我們決定繼續檢查最高值。
有長時間間隔的工作階段時間區間平均值
將所有不設上限的工作階段時間區間平均分數，並在其間加入 5 秒的間隔，效果非常不錯。這項策略具有幾個有趣的特性：
- 如果網頁的版面配置位移之間沒有間隔，最後會變成一個較長的工作階段視窗，其分數與目前的 CLS 完全相同。
- 這項指標並未直接考量閒置時間，只會查看網頁上發生的轉換，不會計算網頁未轉換的時間點。
短時間內的百分位數高
300 毫秒滑動視窗的最大排名，以及第 95 個百分位數，對於較短的視窗大小，內插的百分位數間比較大的視窗大小少，但我們也擔心「重複」滑動視窗也存在：如果兩個影格發生一組版面配置位移，則會有多個 300 ms 包含這些影格的 300 ms 視窗。相較於採用第 95 百分位數，採用最大值會更清楚、更簡單。因此，我們再次決定繼續檢查最大值。
未奏效的策略
嘗試查看無版面配置偏移和有版面配置偏移的「平均」體驗時間的策略，成效不彰。所有視窗策略的中位數或第 75 百分位數摘要，都未將網站排名為優良。版面配置轉移總和也不會。
我們評估了多項不同的「預算」，以便判斷可接受的版面配置位移：
- 高於部分預算的版面配置位移百分比。在各種預算中，這些廣告活動的排名都相當低。
- 平均版面配置偏移值超過某些過量值。這項策略的大部分變化版本成效不佳，但在長時間工作階段中，平均超出時間區間的長度與長時間工作階段的差異相差不大。我們決定只採用後者，因為後者更簡單。
後續步驟
大規模分析
我們已在 Chrome 中實作上述主要策略，以便取得更多網站的實際使用資料。我們預計採用類似的做法，根據指標分數排名網站，以便進行大規模分析：
- 依據 CLS 和各項新指標候選項目，為所有網站進行排名。
- 哪些網站在 CLS 和各候選項目之間的排名差異最大？查看這些網站時，是否發現任何出乎意料的內容？
- 新指標候選項目之間最大的差異為何？是否有任何差異明顯是某個候選人的優點或缺點？
- 重複上述分析，但以每次網頁載入的時間進行分組。我們是否在可接受的版面配置變動情況下，看到預期的長時間網頁載入改善情形？瀏覽過短網頁後，系統是否顯示任何未預期的結果？
對做法提出意見
我們很樂意聽取網頁程式開發人員對這些做法提供意見。考慮採用新方法時，請注意下列事項：
維持不變的部分
在此我們想明確指出，新做法並不會改變許多事情。
- 我們提供的指標構想不會改變個別影格計算版面配置位移分數的方式，只會改變我們匯總多個影格的方式。這表示用於版面配置位移的 JavaScript API 會維持不變，開發人員工具使用的 Chrome 追蹤記錄中的基礎事件也會維持不變，因此 WebPageTest 和 Chrome 開發人員工具等工具中的版面配置位移矩形會繼續以相同方式運作。
- 我們會持續努力，讓開發人員能輕鬆採用這些指標，包括將指標納入 web-vitals 程式庫、在 web.dev 上發布相關文件，以及在 Lighthouse 等開發人員工具中回報這些指標。
指標之間的權衡取捨
其中一個熱門策略會將版面配置位移視窗匯總為平均值，其他策略則會回報最大視窗。對於開啟時間很長的網頁，平均值可能會回報更具代表性的值，但一般來說，開發人員可能會比較容易針對單一視窗採取行動，因為他們可以記錄發生時間、變動的元素等等。歡迎提供意見，讓我們瞭解哪項功能對開發人員來說較重要。
您認為滑動或工作階段視窗哪個比較容易理解？您是否重視這些差異？
如何提供意見
歡迎利用我們的 JavaScript 導入範例，或 Core Web Vitals 擴充功能的分支，在任何網站上試用新的版面配置位移指標。
請透過電子郵件將意見回饋傳送至 Google 網路論壇 web-vitals-feedback，主旨行註明「[Layout Shift Metrics]」。我們非常期待收到你的意見！