瞭解我們有哪些計畫可改善「累計版面配置位移」指標，並提供意見回饋。
累計版面配置位移 (CLS) 是衡量網頁視覺穩定性的指標，這項指標稱為「累計版面配置位移」，因為系統會在網頁效期中加總每個位移的分數。
所有版面配置位移都會導致使用者體驗不佳，但開啟時間較長的網頁會累積較多內容。為此，Chrome Speed Metrics 小組決定改善 CLS 指標，讓網頁停留時間更加明確。
這項指標的重點在於放在整個網頁生命週期內的使用者體驗，因為我們發現使用者在載入後，捲動頁面或瀏覽頁面時，通常會有不佳的體驗。但使用者也曾向我們反映，這會對長期開啟的網頁 (通常已長時間開啟的網頁) 造成影響。有多種不同類型的頁面，往往都能維持開啟時間較長，其中一些最常見為具備無限捲動功能和單頁應用程式的社群媒體應用程式。
針對 CLS 分數較高的長效網頁進行內部分析後，發現大多數的問題是由下列模式所造成：
- 無限捲動器會在使用者捲動畫面時移動內容。
- 輸入處理常式為了回應使用者互動而更新 UI 的時間超過 500 毫秒，而且不會發生任何類型的預留位置或架構。
我們鼓勵開發人員改善使用者體驗，但我們也會努力改善這項指標，並尋找可行做法的意見回饋。
Google 如何判斷新指標是否正確？
深入探討指標設計之前，我們想確保能根據各種實際網頁和用途，評估自己的構想。首先，我們設計了一個小型的使用者研究。
首先，我們透過各種網站記錄了 34 個使用者歷程的影片和 Chrome 追蹤記錄。選擇使用者歷程時，我們的目標是以下幾個重點：
- 五花八門的網站，例如新聞和購物網站。
- 各種使用者歷程，例如初始網頁載入、捲動、單頁應用程式導覽和使用者互動。
- 網站上個別版面配置位移的次數和強度。
- 除了版面配置位移之外，網站的使用者體驗不佳。
我們請兩位同事一次觀看兩部影片，並根據版面配置位移評估哪部影片效果較佳。根據這些評分，我們建立出理想的網站排名順序。根據使用者排名的結果，我們推測，其他同事和大多數使用者一樣，因為在載入後進行版面配置位移感到不悅，尤其是在捲動和單頁應用程式瀏覽期間。我們發現，某些網站在這些活動期間的使用者體驗比其他網站更出色。
由於我們記錄了 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 DevTools 等工具的版面配置位移，仍會繼續執行。
- 我們會繼續努力讓開發人員輕鬆採用這些指標，包括將指標納入網頁 Vitals 程式庫、在 web.dev 記錄，並在 Lighthouse 等開發人員工具中回報。
各指標的取捨
其中一個主要策略會將版面配置位移視窗匯總為平均值，其餘策略則能指出視窗上限。若是開啟時間很長的網頁，平均值可能會回報更多具有代表性的價值，但一般來說，開發人員比較可能只針對單一回溯期採取行動，也就是記錄發生時間、位移的元素等等。我們希望你可以提供意見，說明哪些功能對開發人員比較重要。
您是否覺得滑動或工作階段回溯期比較容易理解？你認為這些差異是否重要？
如何提供意見
歡迎利用我們的 JavaScript 導入範例，或 Core Web Vitals 擴充功能的分支，在任何網站上試用新的版面配置位移指標。
請透過電子郵件將意見回饋傳送至我們的 web-vitals-feedback Google 群組，並在主旨行註明「[Layout Shift Metrics]」。我們非常期待聽到您的意見！