即日起,我們已在多項 Chrome 網路工具介面中推出 CLS 的異動,包括 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告。
今天我們想分享 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 區間調整的推出作業,以及哪些工具仍可針對原始實作進行基準測試。
工具 | CLS 視窗設定調整「即時」 | 「舊版」CLS 可用性 |
---|---|---|
Lighthouse 開發人員工具面板 | Canary 版,2021 年 6 月 2 日 | 不適用 |
Lighthouse CLI | v8,發布日期:2021 年 6 月 1 日 | 可在 Lighthouse 第 8 版中使用 totalCumulativeLayoutShift |
Lighthouse CI | 0.7.3 版,2021 年 6 月 3 日 | 不適用 |
PageSpeed Insights (PSI) | 2021 年 6 月 1 日 | 不適用 |
PSI API | 2021 年 6 月 1 日 | 在 lighthouseResult 中提供 totalCumulativeLayoutShift 。loadingExperience 欄位中沒有這個欄位 |
Chrome 使用者體驗報告 (CrUX) - BigQuery | 202105 年資料集,發布日期:2021 年 6 月 8 日 | 服務日期:experimental.uncapped_cumulative_layout_shift 至 202111 年 |
Chrome 使用者體驗報告 (CrUX) - API | 2021 年 6 月 1 日 | 2021 年 6 月 1 日後,更新日期:experimental_uncapped_cumulative_layout_shift
2021 年 12 月 14 日 |
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 的主頁橫幅