瞭解我們對於改善「累計版面配置位移」指標的計畫，並提供寶貴意見。
累計版面配置位移 (CLS) 指標會評估網頁的視覺穩定性。這項指標稱為「累計版面配置位移」，因為在頁面生命週期內，每個時間位的分數都會加總。
所有版面配置位移都會對使用者體驗造成負面影響，但對於開啟時間較長的網頁，會帶來較多的比例。因此 Chrome 速度指標團隊決定改善 CLS 指標，使其更接近網頁停留時間。
這項指標的重點在於提升整個網頁生命週期的使用者體驗，因為我們發現，使用者在載入、捲動或瀏覽網頁時，往往會感到不愉快。不過，我們聽說這對長效型網頁有何影響，也就是使用者通常會長時間開啟的網頁。開啟時間往往有多種不同類型的頁面，最常見的是這類社群媒體應用程式，包括無限捲動和單頁應用程式。
針對 CLS 分數較高的長期網頁進行內部分析，我們發現大多數問題是由下列模式造成：
- 無限捲動器會在使用者捲動畫面時移動內容。
- 輸入處理常式需要超過 500 毫秒才能更新 UI 以回應使用者互動，不含任何預留位置或骨架模式。
雖然我們鼓勵開發人員改善使用者體驗，但也會持續提升指標品質，並尋求可用方法的意見回饋。
如何判斷新指標是否比較好？
開始研究指標設計前，我們確實是針對各種實際網頁和用途評估提案，首先，我們設計了一份小型使用者研究。
首先，我們先從不同網站錄製 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 毫秒的時段有這些位移。將這個上限值設為比採用第 95 個百分位數更為簡單明瞭。所以，我們還是決定繼續檢查上限值。
成效不彰的策略
在沒有版面配置轉移和版面配置位移的情況下，嘗試在評估「一般」使用體驗的策略時，往往成效不彰。任何視窗管理策略的摘要中位數和第 75 個百分位數均未妥善排名。也沒有版面配置隨著時間的改變。
我們評估多項不同的「預算」，確保可接受的版面配置位移：
- 版面配置位移超出部分預算的百分比。在各種預算下，它們的排名都相當差。
- 平均版面配置位移超過一定時間。這項策略的大多數變化版本成效不彰，但長差距較大的工作階段期間，平均超量與成效差距不大，與差距越長的工作階段視窗平均值差不多。因為比較簡單，我們決定只剩下後者。
後續步驟
大規模分析
我們在 Chrome 中採用了上述最頂尖的策略，以便取得更多網站的實際使用情況資料。我們計劃利用類似方法，根據網站的指標分數來排名，以便進行大規模的分析：
- 依 CLS 列出所有網站排名，並依各個新指標候選排名。
- 根據 CLS 和每個候選項目，哪些網站的排名最為不同？檢查這些網站時，系統是否發現任何未預期的情況？
- 候選新指標之間的最大差異為何？是否有任何差異最明顯是特定候選人的優缺點？
- 重複上述分析，但按照每次網頁載入的時間分類。在可接受的版面配置位移，長期載入的頁面是否會有所改善？網頁短期內是否出現任何未預期的結果？
意見回饋
我們希望瞭解網頁程式開發人員對於這些做法的意見。考慮新做法時，請注意下列事項：
維持不變的部分
我們想在此澄清，新的做法並不會因許多改變而改變：
- 我們的指標提案不會改變個別影格的版面配置位移分數，只採用我們匯總多個影格的方式。換句話說，版面配置位移的 JavaScript API 會保持不變，而且 Chrome 追蹤中的基礎事件也會保持不變，因此 WebPageTest 和 Chrome DevTools 等工具的版面配置位移變化將繼續運作。
- 我們會持續努力讓開發人員輕鬆採用這些指標，其中包括在 Web-vitals 程式庫中、記錄在 web.dev 中，以及利用 Lighthouse 等開發人員工具回報指標。
指標之間的取捨
其中一項熱門策略會將版面配置位移視窗摘要呈現為平均值，其餘項目則顯示最長視窗。對開啟時間很長的網頁而言，平均可能會得到更具代表性的價值，但一般來說，開發人員比較有可能在單一視窗中採取行動，例如記錄發生的時間、變動的元素等。我們歡迎任何開發人員更重視的意見。
您覺得滑動視窗或工作階段期間是否更容易理解？這些差異對您來說是否重要？
如何提供意見
你可以利用我們的JavaScript 範例實作範例或Core Web Vitals 擴充功能分支，在任何網站上試用新的版面配置位移指標。
請透過電子郵件將意見回饋傳送至 web-vitals-feedback Google 群組，並在主旨行註明「[版面配置 Shift 指標]」。我們非常期待收到您的寶貴意見！