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

即日起，CLS 已在 Chrome 的許多網站工具介面上推出變更，包括 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告等。

Addy Osmani

Elizabeth Sweeny

今天我們要分享 Google 如何改進評估指標的 累計版面配置位移 (CLS) 並跨數個 Chrome 網路工具介面取得實用指標。 對開發人員而言，這些調整將更準確地反映 長效型網頁 (例如具有無限捲動或單頁應用程式的應用程式)。 這些 CLS 的更新將陸續支援 Lighthouse、 PageSpeed Insights 和 Chrome 使用者體驗報告。

我們都希望網路上的版面配置位移變少了。 這也是 CLS 指標在評估網頁的視覺穩定性方面非常實用的工具。 鼓勵網站更妥善設定內容尺寸 例如圖像或廣告 可能會讓閱聽人看到不為人知的內容。

這項指標的名稱是「累計」 因為系統會在網頁生命週期中，將所有個別位移的分數加總。 網路上的版面配置位移都會導致使用者體驗不佳。 長效網頁 (例如單頁應用程式 (SPA) 或無限捲動應用程式) 會隨著時間逐漸累積更多 CLS。 將匯總上限限制在最差的「窗口」排班 無論工作階段持續時間為何，CLS 現在可以更加一致地進行評估。

如同我們在進化 CLS 指標中所述，我們會將 CLS 指標調整為 間隔為 1 秒，間隔為 5 秒 這次更新能更準確地反映長期網頁的使用者體驗。 這項異動實施後 70% 的來源不應預期在第 75 個百分位數看到任何 CLS 變化 其餘 30% 的來源也會有所改善

對 CLS 推出時間區間調整功能

我們剛才說過，新版 CLS 定義不會有 1 秒的間隔時間上限 播放時間上限是 5 秒這對工具有何影響？

即日起， 這項變更已於 Chrome 的許多網路工具介面上推出，包括 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告。 下方是 CLS 視窗調整功能的推出摘要， 以及仍可用來比較原始導入結果的工具。

此外，我們也將更新 Chrome 開發人員工具，以便支援視窗化功能。CLS 的更新也已提交至 Search Console，自 2021 年 6 月 1 日起將會生效。

對大多數開發人員來說 這項變更應該可以順暢地生效，您不需要採取任何行動來採用修正後的資料。

「舊」CLS

請注意，「舊」CLS 會測量網頁整個生命週期的版面配置位移。有些開發人員可能想同時監控 CLS 的舊版定義以及窗型調整， 有好消息要分享：我們推出了「舊 CLS」內建於 Lighthouse 和 CrUX 中

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

連結位置： experimental_uncapped_cumulative_layout_shift 與 CrUX API 一樣 在 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 個月內，您都可以繼續依據這項資料顯示這項資料。 含「old CLS」將於 2021 年 12 月 14 日淘汰

更新 Lighthouse 中的 CLS 加權

CLS 首次導入 Lighthouse 時 也是全新的「亮點」指標 因此，為了確保開發人員有時間進行測試、基準測試 以及最佳化 CLS，其效能分數對於 CLS 的加權較低。

在聘用開發人員的時間過後 Lighthouse 的 CLS 權重從 5% 增加到 15% 與網站體驗核心指標的 是 Lighthouse 分數中最加權的指標

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

Lighthouse 8.0 的 CLS 實作包含時間區間設定和子框架的 CLS 貢獻。在 8.0 版之前，Lighthouse 中的 CLS 並未包含子框架指標計算中的 CLS，但現在是。只是確認一下，由 CrUX 評估的欄位 CLS 也會以類似的方式處理視窗和子影格。

不過，研究室與 CLS 的主要差異在於，研究室 CLS 的觀察窗口結束於「完全載入」可自訂的時間，但對實際應用而言，觀察回溯期則延長至整個網頁的生命週期，包括載入後的活動。儘管如此，時間區間調整功能確實能大幅緩解這項差異。

實地測量

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

您也可以直接根據 網站體驗指標 JavaScript 程式庫 這個表格也已配合這項變更更新

其他更新

除了更新「累計版面配置位移」之外 網路工具也推出了下列指標相關更新：

• 我們將更新為 最新的「Largest Contentful Paint」指標定義。 CrUX API、PSI、PSI API 和 Search Console 將於 2021 年 6 月 1 日更新。CrUX BigQuery 將於 2021 年 6 月 8 日更新。
• 在 CrUX 中，「First Contentful Paint 重複分組門檻」已更新： 良好：[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 上的圖片 / @barnimages)