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

即日起，我們已在多項 Chrome 網路工具介面中推出 CLS 的異動，包括 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告。

Addy Osmani

Elizabeth Sweeny

今天我們想分享 Google 如何在多個 Chrome 網頁工具介面上，對累計版面配置位移 (CLS) 指標評估成效進行評估。 對開發人員而言，這些變更將更準確地反映長效頁面的使用者體驗 (例如含有無限捲動或單頁應用程式的網頁)。這些 CLS 更新將推出至 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告等工具。

我們都希望網頁版面配置位移變少了。 這點證明 CLS 指標非常實用，能夠有效評估網頁的視覺穩定性。這有助於鼓勵網站設定更適當的內容尺寸 (例如圖片或廣告)，讓使用者更有可能看到大量內容。

由於系統會在網頁效期內加總每個值的總和，因此這項指標稱為「累計」。雖然網路上所有的版面配置變更都會導致使用者體驗不佳，但單頁應用程式 (SPA) 或無限捲動應用程式等長期網頁，會隨著時間累積更多 CLS。 透過將匯總時間限制在偏移最嚴重的「時限」內，無論工作階段持續時間為何，CLS 現在可以更一致地進行評估。

如同我們在「改善 CLS 指標」一文所述，我們將將 CLS 指標調整為工作階段持續時間上限 (間隔為 1 秒，上限為 5 秒)，因此這項更新能更準確地反映長期網頁的使用者體驗。 這項異動生效後，70% 的來源應該不會在第 75 個百分位數看到 CLS 變化，而其餘 30% 的來源將會獲得改善。

對 CLS 導入區間設定調整功能

我們已經提到，更新的 CLS 定義是最大工作階段期間，間隔為 1 秒，上限 5 秒。這對工具有何影響？

即日起，這項 CLS 變更已在多項 Chrome 網路工具介面中推出，包括 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告。下方摘要說明 CLS 區間調整的推出作業，以及哪些工具仍可針對原始實作進行基準測試。

Chrome 開發人員工具也會在短時間內更新，以支援視窗設定調整。此外，CLS 也已更新至 Search Console，自 2021 年 6 月 1 日起生效。

對大多數開發人員而言，這項變更應該都能順利進行，您無須採取任何行動，就能充分運用修正程式的資料。

「舊」CLS

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

在 Lighthouse 第 8 版中，它以 audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift 格式提供。

在 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

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

在 Lighthouse 中更新 CLS 權重

CLS 剛在 Lighthouse 中推出時 是閃亮的全新指標因此，為了確保開發人員有時間進行測試、進行基準測試、根據意見進行最佳化，則 CLS 在效能分數中的權重較低。

在開發人員投入一些時間後，Lighthouse 分數提高了 CLS 的權重，從 5% 增加到 15%，這與 Lighthouse 分數中採用網站體驗核心指標的方法一致，是最具權重的指標。

您可以在 Lighthouse 第 8 版中找到更新後的指標權重。

Lighthouse 8.0 實作的 CLS 同時包括視窗化和子框架產生的 CLS。在此之前，Lighthouse 中的 CLS 並未在指標計算中包含子頁框的 CLS，但是現在已經支援。為了進行確認，CrUX 評估的欄位 CLS 也會以類似的方式處理視窗和子頁框。

不過，研究室與 CLS 之間的主要差異在於，研究室 CLS 的觀察期間會在實驗室狀況決定的「完全載入」結束，而在實際工作環境中，觀察期間可延伸至整個網頁生命週期，包括載入後的活動。即便如此，時間範圍調整確實可以大幅減少這個差異。

自行測量現場環境

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

或是直接依賴網站體驗指標 JavaScript 程式庫 (此程式庫也經過這項變更更新)。

其他最新消息

除了「累計版面配置位移」更新以外，網頁工具也進行了下列指標相關更新：

• 我們即將更新「最大內容繪製」指標的最新定義。CrUX API、PSI、PSI API 和 Search Console 將於 2021 年 6 月 1 日更新。CrUX BigQuery 將於 2021 年 6 月 8 日更新。
• 在 CrUX 中，首次顯示內容顏料三分塊的門檻已更新，正確：[0-1.8s]，需要改善：(1.8 至 3 秒)、不佳：[3s-∞]

結論

我們希望這項變更能反映大多數網站的轉換作業，因此建議您查看「網站體驗指標」和「最佳化 CLS」，瞭解評估和最佳化版面配置位移的訣竅與技巧。 一如以往，歡迎您隨時前往 Web-vitals-feedback 群組，針對 Lighthouse 的指標和工具特定意見回饋論壇，以及 Chrome 使用者體驗報告提出工具問題的意見。乾杯！

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

Unsplash 網站上由 Barn 圖片提供 / @barnimages 的主頁橫幅