規劃改善 CLS 指標，使其更公平至長期使用網頁。
我們 (Chrome 速度指標團隊) 最近針對開放長期開啟的網頁更公平的 CLS 指標提供了多項選項，介紹了我們的初步研究。我們收到許多非常實用的意見回饋，在完成大規模分析後，我們最終決定對指標進行一些變更：「最長工作階段期間最長 1 秒，上限為 5 秒」。
繼續閱讀詳細資料！
Google 如何評估這些選擇？
我們審查了開發人員社群提供的所有意見回饋，並將結果納入考量。
我們還在 Chrome 中實作了熱門選項，並針對數百萬個網頁進行大規模的指標分析。我們確認了每個選項的網站類型改善程度，以及這些選項的比較方式，尤其是針對不同選項的分數不同的網站。整體而言，我們發現：
- 所有選項可降低頁面停留時間與版面配置位移分數之間的關聯。
- 無任何選項，導致任何網頁的分數都較差。因此您不必擔心這項變更會降低您網站的分數。
決策點
為何選擇工作階段回溯期？
在先前的文章中，我們介紹了幾種不同的視窗設定策略，說明將版面配置位移分組的情況，同時確保分數不會擴大。我們從開發人員提供的意見回饋，明顯偏好工作階段視窗策略，因為它會以最直覺化的方式將版面配置移動分組。
如要查看工作階段期間，請參考以下範例：
在上述範例中，許多版面配置位移會在使用者瀏覽網頁時持續發生。每個物件皆以藍色長條表示。您會發現，上方藍色長條有不同的高度，這些長條代表每個版面配置位移的分數。工作階段視窗從第一個版面配置位移開始，並持續展開，直到有版面配置未改變的空窗期為止。發生下一個版面配置位移時，系統會啟動新的工作階段視窗。由於版面配置有三個間隔，沒有版面配置位移，因此範例中有三個工作階段時段。與 CLS 目前的定義類似，系統會加總每個位移的分數，因此每個視窗的分數都是個別版面配置位移的總和。
根據初始研究，我們選擇了兩個工作階段回溯期間間隔 1 秒的差距，而這個差距在大規模分析中的成效相當出色。因此上例的「工作階段差距」為 1 秒。
為何要拉長工作階段回溯期？
我們在初始研究中，將摘要策略縮減為兩個選項：
- 所有工作階段期間的「平均」分數，以非常大型的工作階段期間 (無上限的區間，中間有 5 秒的間隔)。
- 所有工作階段期間的「最大值」分數，以小型工作階段期間為上限 (上限為 5 秒，中間有 1 秒的間隔)。
初步研究後，我們在 Chrome 中加入各項指標，方便對數百萬個網址進行大規模的分析。在大規模的分析中，我們發現許多網址都具有版面配置位移模式，如下所示：
在右下方，您可以看到工作階段視窗 2 中只有一個小型的版面配置位移，分數非常低。這表示平均分數相當低但如果開發人員修正了微小的版面配置位移，該怎麼辦？然後，分數只會在工作階段視窗 1 上計算，這代表網頁的分數幾乎是兩倍。開發人員為了改善版面配置位移，只會發現分數惡化，所以這樣非常令人感到困惑，並令人感到憂心。此外，移除這些小型的版面配置位移，明顯可以提升使用者體驗，因此不應降低分數。
考量到這個問題的平均值，我們決定進一步採用較小的上限、上限、區間上限。因此，在上述範例中，系統會忽略工作階段視窗 2，只回報工作階段視窗 1 的版面配置位移總和。
為什麼是 5 秒？
我們評估了多個視窗大小，並發現以下兩項：
- 若是較短的視窗，網頁載入的速度較慢，或是回應使用者互動的速度較慢，可能會導致版面配置進入多個視窗，進而提高分數。我們希望將視窗保持夠大，以免速度變慢！
- 部分網頁會持續出現少量版面配置位移。例如，運動得分頁面會隨著每次比分更新稍微調整一下。這類轉變雖然令人困擾，但不會隨著時間的推移而變得惱人。因此，我們希望確保這類版面配置位移能夠對視窗設定上限。
考量以上兩點，比較不同實際網頁上的不同視窗大小後，我們做出了結論，5 秒是視窗大小的理想限制。
這對我網頁的 CLS 分數有何影響？
由於這項更新會限制網頁的 CLS，因此受到這項異動沒有任何網頁分數較低。
根據我們的分析，55% 的來源在第 75 個百分位數完全不會看到 CLS 的變化。這是因為網頁目前沒有版面配置位移，或者現有的位移限制為單一工作階段視窗。
隨著這項變更，來源的其餘部分將在第 75 個百分位數獲得更高的分數。大多數情況下，自己只會看到些微改善，而約 3% 的人將會在評分從「需要改善」或「不佳」的評分變更為「良好」評分時，分數因此有所提升。如先前的文章所述，這些頁面通常會使用無限捲動器，或有多個緩慢的 UI 更新。
如何試用？
我們也會盡快更新工具，改用新的指標定義！在那之前，您可以使用 JavaScript 實作範例或網站體驗指標擴充功能分支，在任何網站上試用新版 CLS。
感謝各位抽空閱讀舊貼文並提供意見回饋！