網路工具中的累計版面配置位移

從今天起，我們已在多個 Chrome 網頁工具介面 (包括 Lighthouse、PageSpeed Insights 和 Chrome UX 報告) 中推出 CLS 異動。

Addy Osmani

Elizabeth Sweeny

發布日期：2021 年 6 月 2 日

今天，我們想分享如何在多個 Chrome 網路工具介面中，改善累積版面配置位移 (CLS) 指標的評估方式。對於開發人員而言，這些變更可更貼近長期網頁 (例如無限捲動或單頁應用程式) 的使用者體驗。這些 CLS 更新將陸續推出至 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告等工具。

我們都希望網頁上的版面配置變動次數能減少。這就是 CLS 指標在評估網頁視覺穩定性時，可發揮作用的地方。這有助於鼓勵網站為圖片或廣告等內容設定更適當的尺寸，避免使用者看到內容突然跳動。

這項指標的名稱是「累計」，因為系統會在網頁的生命週期中，將所有個別位移的分數加總。雖然網站上的所有版面配置變更都會導致使用者體驗不佳，但單頁應用程式 (SPA) 或無限捲動應用程式等長效網頁，隨著時間推移，自然會累積更多 CLS。將匯總範圍限制在偏移最差的「時間範圍」，無論工作階段持續時間為何，CLS 現在可以更穩定地進行測量。

如同我們在改良 CLS 指標所述，我們將 CLS 指標調整為間隔 1 秒 (間隔 1 秒，上限 5 秒) 的最長工作階段期間，這項更新能夠更準確地反映長期網頁的使用者體驗。這項變更生效後，70% 的來源應不會在第 75 百分位數出現任何 CLS 變化，而其餘 30% 的來源則會有所改善。

為 CLS 推出視窗調整功能

我們先前提過，更新過的 CLS 定義是一個最大工作階段期間，間隔 1 秒，上限 5 秒。這對工具有何影響？

從今天起，我們已在多個 Chrome 網頁工具介面中推出 CLS 的這項異動，包括 Lighthouse、PageSpeed Insights 和 Chrome UX 報告。下方列出 CLS 視窗調整功能的摘要，以及哪些工具仍可與原始實作方式進行基準測試。

Chrome 開發人員工具也將很快更新，支援調整視窗大小。我們也已在 Search Console 中更新 CLS，並自 2021 年 6 月 1 日起生效。

對於大多數開發人員而言，這項變更應可順利完成，且無須採取任何行動即可利用修正項目中的資料。

「舊版」CLS

提醒您，「舊版」CLS 會評估網頁整個生命週期中的版面配置位移。由於部分開發人員可能希望監控 CLS 的舊版定義以及視窗調整，因此我們有好消息要與您分享：我們已在 Lighthouse 和 CrUX 中推出「舊 CLS」。

在 Lighthouse v8 中，這項資訊會以 audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift 的形式出現在 JSON 中。

您會在 CrUX API 中找到 experimental_uncapped_cumulative_layout_shift，在 CrUX BigQuery 中則會找到 experimental.uncapped_cumulative_layout_shift。

6 月 1 日後，CrUX API 要求會傳回「舊版 CLS」指標：

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

6 月 8 日後，下列 CrUX BigQuery 會比較舊版和新版 CLS：

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

在 2021 年 12 月 14 日，您可以在最多 6 個月內繼續使用這些資料。「舊版 CLS」即將淘汰。

更新 Lighthouse 中的 CLS 權重

當 Lighthouse 首次推出 CLS 時，這項指標是全新的亮眼指標。因此，為確保開發人員有時間進行測試、基準測試及最佳化調整，我們在成效分數中降低了 CLS 的權重。

在開發人員使用一段時間後，Lighthouse 分數已將 CLS 的權重從 5% 提高到 15%，這與讓 Core Web Vitals 成為 Lighthouse 分數中權重最高指標的做法一致。

您可以在評分計算工具中，查看 Lighthouse 8 版中指標的更新權重。

Lighthouse 8.0 的 CLS 實作包含子畫面提供的視窗和 CLS 貢獻。在 8.0 之前，Lighthouse 的 CLS 指標計算中並未納入子畫面的 CLS，但現在已納入。另外，請確認一下，由 CrUX 評估的欄位 CLS 也會以類似方式處理視窗和子畫面。

不過，實驗室和實地 CLS 之間的主要差異在於，實驗室 CLS 的觀察期間會在實驗室條件下判定「完全載入」時結束，但在實地條件下，觀察期間會延長至整個網頁生命週期，包括載入後的活動。儘管如此，時間區間調整功能確實能大幅緩解這項差異。

自行在現場進行測量

如要測量最新的 CLS 實作方式，您也可以使用 以下 PerformanceObserver 程式碼片段，透過 RUM 為欄位資料記錄這項資訊。

或者，您也可以直接依賴Web Vitals JavaScript 程式庫，這也是這項變更的更新項目。

其他更新

除了累積版面配置位移的更新之外，我們也對網路工具進行了下列指標相關更新：

• 我們即將更新最大內容繪製指標的最新定義。CrUX API、PSI、PSI API、Search Console 將在 2021 年 6 月 1 日更新。CrUX BigQuery 將於 2021 年 6 月 8 日更新。
• 在 CrUX 中，第一個內容繪製時間三分位數門檻已更新為：良好：[0-1.8 秒]、需要改善：(1.8 秒-3 秒)、不佳：[3 秒-∞]

結論

我們預期這項異動可讓大多數網站順利轉換。建議您參閱「網站體驗指標」和「最佳化 CLS」，瞭解如何評估及改善版面配置轉換。與往常一樣，歡迎您前往網頁- Vitals 意見回饋群組，針對 Lighthouse 的指標，或我們的工具專屬意見回饋論壇提出意見，並在工具問題適用的 Chrome 使用者體驗報告中提出。祝一切順心！

感謝 Johannes Henkel、Rick Viscomi、Vivek Sekhar、Rachel Andrew、Milica Mihajlija、Jeff Jose 和 Paul Ireland。

主頁橫幅 (作者：Unsplash 上的圖片 / @barnimages)