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

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

Elizabeth Sweeny
Elizabeth Sweeny

在 Chrome 開發人員高峰會上,Paul Ireland 和我宣布推出 Lighthouse 的更新,包括 Lighthouse CI、全新效能分數公式等。我們除了推出出色的 Lighthouse 最新消息,也導入了令人期待的效能工具開發成果,包括全新效能指標、PageSpeed Insights 和 Chrome 使用者體驗報告 (CrUX) 更新,以及 Web Almanac 對網路生態系統分析的深入分析資訊。

全新成效指標

如要量化自身對收益的影響,以及追蹤改善和迴歸情形,就必須評估使用者體驗細微差異。隨著時間的推移,新指標不斷演進,能夠擷取這些細微的細微差異,並填補使用者體驗評估的缺口。指標故事新增兩個欄位指標,分別是最大內容繪製 (LCP)累計版面配置位移 (CLS),在 W3C Web Performance Working Group 中,和新增的研究室指標Total Blocking Time (TBT)

最大內容繪製 (LCP)

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

在進行最大內容繪製之前,首次有效繪製 (FMP)速度指數 (SI) 是用來擷取初始繪製後的載入體驗,但這些指標較為複雜,且通常無法確定網頁主要內容何時載入完成。 研究顯示,只要觀察網頁上最大元素的算繪時間,就更能反映網頁主要內容載入的時間。

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 v6 首次顯示內容繪製、速度指數和最大內容繪製是主要的載入成效指標;主要互動指標是「互動時間」、「首次輸入延遲時間」、「最大潛在首次輸入延遲時間」和「總封鎖時間」,而「累計版面配置位移」是主要的可預測性指標。

詳情請參閱 Lighthouse 效能分數和新的 web.dev 指標集合

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

過去一年來,我們持續透過 Chrome 使用者體驗 (CrUX) 資料,分析實際運作的網站效能。從這些資料中獲得深入分析後,我們重新評估了標準,用來將網站標示為「慢速」、「中等」或「快速」。

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

為了進行網站的整體評估,PageSpeed Insights (PSI) 會使用欄位資料總分佈的特定百分點,做為該網站的黃金數字;先前使用的門檻是「首次輸入延遲」(FID) 的第 90 個百分位數,以及第 95 個百分位數。

舉例來說,如果網站的 FCP 分佈快速是 50%、30% 中、20% 慢,則 90 個百分位數的 FCP 就位於緩慢區段,導致網站的整體欄位分數變慢。

該功能經過調整,可更準確地跨網站放送廣告,而新的細目資料如下:

指標 整體百分位數 快速 (毫秒) 中 (毫秒) 慢 (毫秒)
FCP 第 75 個百分位數 1000 1000-3000 3000 人以上
FID 第 95 個百分位數 100 100-300 300+

舉例來說,現在,如果某個網站的 FCP 分佈速度快了 50%、30% 中中或 20%,則 75 個百分位數的 75 個百分位數落在中等區段,使得網站整體欄位分數呈中度。

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

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

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

新版 Search Console 速度報告中的 CrUX

Search Console 在 Chrome 開發人員高峰會前一週推出新版速度報表。這項功能會使用 Chrome 使用者體驗報告的資料,協助網站擁有者找出潛在的使用者體驗問題。速度報表會自動將類似網址分組到「快速」、「中速」和「慢速」值區,並協助優先改善特定問題的效能。

Search Console 速度報表。

阿曼納克

Dion Almaer 在 2019 年 CDS 大會中發表 Web Almanac 影片。

在開幕主題演講中,我們宣布推出 Web Almanac 年度專案,這是一項年度專案,目的是將網路的狀態與趨勢與網路社群的專業知識進行配對。由 Chrome 開發人員和網路社群組成的 85 名貢獻者已自願參與這項專案,分析了 20 個有關網站如何建構、提供和體驗網站的 20 個核心層面。開始探索 Web Almanac,進一步瞭解網路上效能JavaScript第三方程式碼的狀態。

瞭解詳情

如要進一步瞭解 Chrome 開發人員高峰會的效能工具更新,請觀看 速度工具演進的演講影片: