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

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

Elizabeth Sweeny
Elizabeth Sweeny

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

新成效指標

評估使用者體驗的細微差異,是評估其對收益影響並追蹤改善和回歸情形的關鍵。隨著時間推移,我們也開發出新的指標,用來捕捉這些細微差異,並彌補評估使用者體驗時的缺口。指標故事的最新內容多了兩項實際指標Largest Contentful Paint (LCP)累計版面配置位移 (CLS):形成 W3C 網頁效能工作團隊,以及新的研究室指標總封鎖時間 (TBT)

最大內容繪製 (LCP)

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

在 Largest Contentful Paint 之前,我們主要透過首次有效繪製 (FMP)速度指數 (SI) 擷取初次繪製後的載入體驗,但這些指標相當複雜,而且通常無法辨識頁面主要內容載入的時間。研究顯示,只看著網頁上最大元素的轉譯時間,更能代表網頁載入的主要內容。

新的 Largest Contentful Paint 指標很快就會在 Lighthouse 報表中提供,在此之前,您可以在 JavaScript 中測量 LCP

總封鎖時間 (TBT)

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

如果工作在主執行緒上執行的時間超過 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」演講: