速度工具演進史:2019 年 Chrome 開發人員高峰會精彩回顧

新的成效指標、PageSpeed Insights 和 Chrome 使用者體驗報告 (CrUX) 更新等。

Elizabeth Sweeny
Elizabeth Sweeny

在 Chrome 開發人員高峰會上,Paul Irish 和我宣布了 Lighthouse 的更新內容,包括Lighthouse CI、新的效能分數公式等。除了 Lighthouse 的重大消息,我們也介紹了令人振奮的效能工具開發成果,包括新的效能指標、PageSpeed Insights 和 Chrome 使用者體驗報告 (CrUX) 的更新,以及 Web Almanac 對網站生態系統的分析洞察。

新的成效指標

評估使用者體驗的細微差異,是評估其對收益影響並追蹤改善和回歸情形的關鍵。隨著時間推移,我們也開發出新的指標,用來捕捉這些細微差異,並彌補評估使用者體驗時的缺口。指標故事中新增了兩項實驗室指標最大內容繪製時間 (LCP)累計版面配置位移 (CLS),這些指標目前正在 W3C 網頁效能工作小組中孵育。此外,我們也新增了實驗室指標總封鎖時間 (TBT)

最大內容繪製 (LCP)

最大內容繪製 (LCP) 會記錄可視區域中最大內容元素顯示的時間。

在「最大內容繪製」之前,首次顯示內容所需時間 (FMP)速度指數 (SI) 可用於擷取初始繪製後的載入體驗,但這些指標相當複雜,且通常無法識別網頁的主要內容何時載入。研究顯示,只要查看網頁上最大元素的算繪時間,就能更準確地瞭解網頁的主要內容載入時間。

新的 Largest Contentful Paint 指標即將在 Lighthouse 報表中推出,在此之前,您可以在 JavaScript 中測量 LCP

總封鎖時間 (TBT)

「總封鎖時間」TBT 指標會測量「首次顯示內容所需時間」FCP 和「互動準備時間」TTI 之間的總時長,於此期間系統會封鎖主執行緒足夠的時間,防止其對輸入內容做出回應。

如果工作在主執行緒上執行的時間超過 50 毫秒,就會被視為長時間工作。超過這個值的任何毫秒都會計入該工作項的阻斷時間。

圖表代表 150 毫秒的工作,其中有 100 毫秒的阻斷時間。

網頁的總封鎖時間是指在 FCP 和 TTI 之間發生的所有長時間工作封鎖時間總和。

這張圖表代表五項工作,其中 270 毫秒的主執行緒時間中,總共耗費 60 毫秒的封鎖時間。

雖然「回應時間」可有效判斷主執行緒何時在稍後的載入作業中穩定下來,但「總封鎖時間」的目標是量化主執行緒在整個載入作業期間的負載程度。如此一來,TTI 和 TBT 就能相輔相成,提供平衡的體驗。

累計版面配置位移 (CLS)

累計版面配置位移 (CLS) 可評估網頁的視覺穩定性,並量化使用者遇到非預期版面配置位移的頻率。內容發生意外移動的情況可能會讓使用者感到不悅,而這項新指標可評估使用者發生這類問題的頻率,協助您解決這個問題。

螢幕側錄說明不穩定的版面配置會如何損害使用者體驗。

請參閱累計版面配置位移指南詳細說明,瞭解如何計算及評估累計版面配置位移。

新的 Lighthouse 成效評分公式很快就會淡化 FMP 和 FCI,並納入三項新指標:LCP、TBT 和 CLS,因為這些指標能更準確地捕捉網頁可用性。

在 Lighthouse 6.0 中,首次顯示內容所需時間、速度指數和最大內容繪製時間是主要的載入效能指標;互動準備時間、首次輸入延遲時間、可能的最長首次輸入延遲時間和總封鎖時間是主要的互動性指標;累計版面配置位移是主要的可預測性指標。

如需瞭解詳情,請參閱Lighthouse 效能評分和新的 web.dev 指標收集

在 PageSpeed Insights 中調整欄位資料 (CrUX) 門檻

過去一年,我們一直透過 Chrome 使用者體驗 (CrUX) 資料,分析現場的網站效能。根據這些資料的洞察資料,我們重新評估了用於在「網站效能」欄位中標示網站為「緩慢」、「中等」或「快速」的門檻。

兩張長條圖顯示 FCP 和 FID 的緩慢、快速和中等速度分布情形。

為了對網站進行整體評估,PageSpeed Insights (PSI) 會使用欄位資料總分布的特定百分位數,做為該網站的黃金數字;先前使用的門檻分別為首次內容顯示時間的第 90 百分位數,以及首次輸入延遲 (FID) 的 95 百分位數。

舉例來說,如果網站的 FCP 分布比例為 50% 快速、30% 中等、20% 慢速,第 90 個百分位數的 FCP 就會落在「慢速」部分,導致網站的整體欄位分數為「慢速」。

我們已調整這項設定,以便在各網站間提供更完善的整體分發服務,新的細目如下:

指標 整體百分位數 快速 (毫秒) 中等 (毫秒) 緩慢 (毫秒)
FCP 第 75 個百分位數 1000 1000-3000 3000+
FID 第 95 個百分位數 100 100-300 超過 300 名

舉例來說,如果網站的 FCP 分布為 50% 快速、30% 中等、20% 慢速,第 75 百分位數 FCP 就會落在「中等」區間,因此網站的整體欄位分數為「中等」。

PageSpeed Insights 中的標準網址重新導向

為了讓您盡可能準確地評估使用者體驗,PageSpeed Insights 團隊已在 PSI 中新增重新分析提示。如果網站已重新導向至新網址,系統會提示您重新執行到達網址的報表,以便更全面地掌握實際成效。

PSI 使用者介面,顯示網址重新導向和「重新分析」按鈕

新版 Search Console 速度報表中的 CrUX

Search Console 在 Chrome 開發人員大會前一個星期推出新的速度報表。這項工具會使用 Chrome 使用者體驗報告中的資料,協助網站擁有者找出可能的使用者體驗問題。速度報表會自動將執行速度接近的網址分組,分別歸入「快速」、「中速」和「慢速」區間,並協助您優先改善特定問題的成效。

Search Console 速度報表。

網路年鑑

Dion Almaer 在 2019 年 CDS 上介紹 Web Almanac。

在開幕主題演講中,我們宣布推出 Web Almanac,這是一項年度專案,可將網際網路狀態的統計資料和趨勢與網際網路社群的專業知識相結合。85 位貢獻者 (由 Chrome 開發人員和網路社群組成) 已自願參與這個專案,該專案分析了網路的 20 個核心面向,針對網站的建構、提交和使用體驗方式提出建議。開始探索 Web Almanac,進一步瞭解網站的效能JavaScript第三方程式碼狀態。

瞭解詳情

如要進一步瞭解 Chrome 開發人員高峰會的效能工具更新內容,請觀看「Speed tooling evolutions」演講: