改善 CLS 指標

規劃改善 CLS 指標,使其更加公平至長效頁面。

Annie Sullivan
Annie Sullivan
Hongbo Song
Hongbo Song

我們最近 (Chrome Speed Metrics 小組) 最近簡單介紹了 Google 的初步研究, 運用選項,讓 CLS 指標對長期營業的網頁更公平 時間。我們在 2013 年 這些是實用的意見回饋,經過大規模的分析後,我們終於 我們希望對指標所做的變更:最長工作階段期間 1 秒 缺口,上限為 5 秒

詳情請參閱下文!

我們如何評估這些選項?

我們參考了開發人員社群提供的所有意見回饋並參考 都應納入考量

我們也將頂層 Chrome 的選項 並針對數百萬個網頁上的指標進行大規模分析三 比較了每個選項改善的網站類型及比較方式 尤其是研究不同評分 只要設定成「自動重新啟動」 和「在主機維護期間」選項即可整體而言,我們發現:

  • 所有選項可降低網頁停留時間和 版面配置位移分數
  • 任何選項導致任何網頁獲得的分數降低。因此 不需擔心這項異動會使網站分數降低。

決策要點

為什麼要使用工作階段回溯期?

我們在先前的文章中介紹了 策略 將版面配置位移分組,同時確保分數不會增加 也沒有限制根據開發人員的意見回饋,我們有很大一部分認為 因為這項策略會將版面配置位移多數群組在一起 以符合直覺的方式操作

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

工作階段視窗範例。

在上例中,隨著使用者查看 頁面。每個都以藍色長條表示。您可在上方看到藍色長條 具有不同的高度這些值代表 分數 每個版面配置的位移。工作階段視窗從第一個版面配置位移開始 持續擴張,直到出現間隔,版面配置位移為止。下次 發生版面配置位移,新的工作階段視窗即會開始。由於 沒有版面配置位移,本範例中共有三個工作階段視窗。類似於 目前的 CLS 定義都會加總各個偏移量的分數 視窗的分數是其個別版面配置位移的總和。

根據初始值 研究 只有 1 秒的工作階段間隔 1 秒,而這個差距在我們的 進行大規模分析因此「工作階段落差」與先前範例相比 第二。

為什麼最長工作階段期間?

我們縮小了摘要範圍 策略 我們最初研究

  • 在所有工作階段視窗中,所有工作階段的平均分數 視窗 (無上限的視窗與 5 秒之間有 5 秒的間隔)。
  • 所有工作階段視窗的最高分數 (適用於較小的工作階段視窗) (上限為 5 秒,中間有 1 秒的間隔)。

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

小型版面配置位移範例,將平均值向下拉

從右下方可以看出 每個小小的版面配置位移 工作階段視窗 2,分數很低。也就是說 極低但是,如果開發人員修正了小小的版面配置位移,該怎麼辦?接著, 分數只會在「工作階段視窗 1」上計算,也就是說網頁的分數 這真的會令人混淆,而且不致開發人員的意願 改善版面配置位移,只發現分數比較明顯。且 對於使用者來說,如果移除這個小型的版面配置位移 因此不會導致分數降低

由於平均值的問題,我們決定繼續採用 較小、有上限的視窗。在上述範例中,工作階段視窗 2 且只有工作階段視窗 1 的版面配置位移總和 。

為何 5 秒?

我們評估了多個視窗大小後,發現有兩點:

  • 在較短的視窗中,網頁載入速度較慢,使用者對使用者互動的回應速度較慢 可以將版面配置位移分成多個視窗,提高分數。三 但我希望讓窗戶變大,這樣就不會造成速度變慢的獎勵!
  • 有些頁面連續進行小型版面配置位移,適用對象 例如,運動得分頁面會隨著分數更新而微調。這些 工作轉變很惱人,但是不會隨著時間的推移而惱人。我們 我想確保視窗受到這些類型的版面配置位移限制。

請記住這兩種概念, 我們得出的結論是 5 秒非常適合使用者 視窗大小

這對我的網頁 CLS 分數有何影響?

這次更新會限制網頁的 CLS,因此沒有網頁獲得的分數就會比較差

根據我們的分析,有 55% 的來源不會有任何 CLS 發生變化 第 75 個百分位數這是因為他們的網頁 任何版面配置位移或所做的位移都侷限於 單一工作階段時間區間。

其他來源的分數在第 75 個百分位數會提高 這項異動。大多數網站的成效都稍有改善,但約有 3% 分數之所以提高,是因為「需要改善」或「不佳」評分至 「好」評分這些網頁通常會使用無限捲動器, 如先前的先前所述, 文章

如何試用?

我們會盡快更新工具,加入新的指標定義!在此之前, 的所有網站都能使用新版 CLS,請參閱範例 JavaScript 導入方式Web Vitals 的分支 擴充功能

感謝所有花時間閱讀上一則訊息的使用者 提供意見!