新的成效指標、PageSpeed Insights 和 Chrome 使用者體驗報告 (CrUX) 更新等。
在 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 毫秒,就會被視為長時間工作。超過此值的任何毫秒都會計入該工作項目的阻斷時間。
網頁的總封鎖時間是 FCP 與 TTI 之間所有長時間工作的封鎖時間總和。
雖然「回應時間」可有效判斷主執行緒何時在稍後的載入作業中穩定下來,但「總封鎖時間」的目標是量化主執行緒在整個載入作業期間的負載程度。如此一來,TTI 和 TBT 就能相輔相成,提供平衡的效果。
累計版面配置位移 (CLS)
累計版面配置位移 (CLS) 可評估網頁的視覺穩定性,並量化使用者遇到非預期版面配置位移的頻率。內容發生意外移動的情況可能會讓使用者感到不悅,而這項新指標可評估使用者發生這類問題的頻率,協助您解決這個問題。
請參閱累計版面配置位移指南詳細說明,瞭解如何計算及評估累計版面配置位移。
新的 Lighthouse 成效評分公式很快就會淡化 FMP 和 FCI,並納入三項新指標:LCP、TBT 和 CLS,因為這些指標能更準確地捕捉網頁的可用性。
如需瞭解詳情,請參閱 Lighthouse 效能評分和新的 web.dev 指標收集。
在 PageSpeed Insights 中調整欄位資料 (CrUX) 門檻
過去一年,我們一直透過 Chrome 使用者體驗 (CrUX) 資料,分析現場的網站效能。根據這些資料,我們重新評估了用來將網站的「慢」、「中速」或「快速」標籤標示為「快速」的門檻,
為了取得網站的整體評估,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 中新增重新分析提示。如果網站已重新導向至新網址,系統會提示您重新執行到達網址的報表,以便更全面地掌握實際成效。
新版 Search Console 速度報表中的 CrUX
Search Console 在 Chrome 開發人員高峰會的一週前推出了新的速度報告。這項工具會使用 Chrome 使用者體驗報告中的資料,協助網站擁有者找出可能的使用者體驗問題。速度報表會自動將執行速度接近的網址分組,分別歸入「快速」、「中速」和「慢速」區間,並協助您優先改善特定問題的成效。
網頁阿爾馬納克
在開幕主題演講中,我們宣布推出 Web Almanac,這是一項年度專案,可將網際網路狀態的統計資料和趨勢,與網際網路社群的專業知識相結合。85 位 Chrome 開發人員和網路社群貢獻者參與這項專案,旨在針對網址的 20 個核心層面,分析網站的建立、提供與體驗。開始探索 Web Almanac,進一步瞭解網站的效能、JavaScript 和第三方程式碼狀態。
瞭解詳情
如要進一步瞭解 Chrome 開發人員高峰會的效能工具更新內容,請觀看「Speed tooling evolutions」演講: