改善 CLS 指標

改善 CLS 指標的計畫,讓指標更公平地評估長效網頁。

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

發布日期:2021 年 4 月 7 日

我們 (Chrome 速度指標團隊) 最近概述了讓 CLS 指標更公平地評估已開啟一段時間的網頁的初步研究結果。我們收到許多非常實用的意見回饋,在完成大規模分析後,我們已確定要對指標做出的變更:最大工作階段間隔為 1 秒,上限為 5 秒

請繼續閱讀詳細資訊!

我們如何評估這些選項?

我們審查了開發人員社群提供的所有意見回饋,並將相關資訊納入考量。

我們也在 Chrome 中實作頂級選項,並針對數百萬個網頁的大規模指標進行分析。我們查看了每個選項改善了哪些網站類型,以及比較選項的方式,尤其是查看不同選項評分不同的網站。整體而言,我們發現:

  • All 選項可降低網頁停留時間與版面配置轉移分數之間的相關性。
  • 任何選項導致任何網頁獲得的分數降低。因此,您不必擔心這項變更會降低網站的分數。

決策點

為什麼要使用工作階段視窗?

先前的文章中,我們介紹了幾種不同的視窗策略,可用來將版面配置變更集中起來,同時確保分數不會無限增加。我們收到的開發人員意見中,絕大多數都偏好使用工作階段視窗策略,因為這麼做最能直觀地將版面配置變更組合在一起。

如要查看工作階段視窗,請參考以下範例:

工作階段視窗範例。

在上例中,使用者瀏覽網頁時,會隨著時間出現許多版面配置變動。每個項目都以藍色長條表示。您會發現上方的藍色長條高度不同,代表各個版面配置位移的分數。工作階段視窗會從第一個版面配置位移開始,並持續擴大,直到出現沒有版面配置位移的間隔為止。發生下一個版面配置位移時,系統會開始新的工作階段視窗。由於有三個間隔且沒有版面配置位移,因此範例中有三個工作階段視窗。與目前的 CLS 定義類似,系統會將每個位移的分數加總,因此每個視窗的分數就是個別版面配置位移的分數總和。

根據初步研究,我們選擇了工作階段期間之間間隔 1 秒的間隔,並且在大規模分析中能順利運作。因此,上述範例中的「工作階段間隔」為 1 秒。

為什麼要使用工作階段視窗上限?

我們在初始研究中將摘要策略縮減為兩個選項:

  • 非常大型工作階段時段 (無上限的時段,每個視窗之間有 5 秒的間隔) 的平均分數。
  • 所有工作階段時間區間的最高分數 (適用於較短的工作階段時間區間,上限為 5 秒,且各區間間隔 1 秒)。

初步研究後,我們在 Chrome 中加入每項指標,就能針對數百萬個網址進行大規模分析。在大規模分析中,我們發現許多網址都有如下的版面配置位移模式,如下所示:

版面配置微幅變動導致平均值下降的範例

在右下方,您可以看到「Session Window 2」中只有一個微小的版面配置位移,因此分數非常低。也就是說,平均分數相當低。但如果開發人員修正了這個微小的版面配置偏移,接著,系統只會根據工作階段時段 1 計算分數,也就是說網頁的分數「幾乎加倍」。這樣會很令人困惑,並不想讓開發人員專注於改善版面配置位移,反而只會發現分數比較差。而移除這個小幅版面配置偏移,對使用者體驗的影響顯然較小,因此不應導致分數降低。

由於平均值有這個問題,我們決定採用較小的上限時間區間。因此,在上述範例中,系統會忽略工作階段視窗 2,而只會回報工作階段視窗 1 的版面配置位移總和。

為什麼是 5 秒?

我們評估了多種視窗大小,並發現以下兩點:

  • 在較短的視窗中,網頁載入速度較慢,以及對使用者互動的回應速度較慢,可能會導致版面配置將版面配置分散到多個視窗,進而提升分數。我們希望保持足夠大的時間差,以免獎勵速度變慢!
  • 部分網頁會持續出現小型版面配置變動。舉例來說,體育賽事分數頁面會隨著每次分數更新而略微變動。這些轉變會造成困擾,但是不會隨著時間而消失。因此,我們想確保視窗是針對這些類型的版面配置位移所設上限。

考量這兩點,我們比較許多實際網頁上的各種視窗大小,並得出結論,5 秒是視窗大小的理想限制。

這會對我的網頁 CLS 分數造成什麼影響?

由於這項更新會限制網頁的 CLS,因此不會有任何網頁因這項異動而獲得更差的分數

根據我們的分析,55% 的來源在 75 百分位數時,CLS 並未出現任何變化。這是因為這些網頁目前沒有任何版面配置變動,或是已將變動限制在單一工作階段視窗中。

其他來源的得分也會隨著這項變更而提升至第 75 百分位數。大多數網站的分數只會略有改善,但約 3% 的網站分數會從「需要改善」或「低落」提升至「良好」。這些網頁通常會使用無限捲動器,或有許多緩慢的 UI 更新,如先前的文章所述。

如何試用?

我們很快就會更新工具,以便使用新的指標定義!在此之前,您可以使用JavaScript 實作範例Web Vitals 擴充功能分支在任何網站上試用新版 CLS。

感謝所有抽空閱讀先前文章並提供意見的使用者!