頁面載入性能之Web Vitals

頁面載入性能之Web Vitals

Web Vitals是Google的一項重大舉措,旨在為品質信號提供統一的指導,這對於在Web上提供出色的用戶體驗來說很重要。

網站的開發者需要瞭解自己的網站給使用者帶來的體驗,但不一定要成為性能優化的專家。 Web Vitals旨在簡化流程,並幫助網站開發者聚焦在核心性能指標上,也稱為Core Web Vitals。

Core Web Vitals

Core Web Vitals是Web Vitals的一個子集,適用於所有網頁,應該被所有開發者去進行測量,也將在所有Google提供的工具中浮現。 每一個Core Web Vitals都代表了用戶體驗獨特的一面,可以用現場數據測試,能反映出以使用者為核心的關鍵結果的真實體驗。

構成Core Web Vitals的核心指標,將隨著時間的推移而發展。 當下2020年我們僅僅關注三個方面: 載入、可交互性和視覺穩定性。 包含以下指標(以及各自的閾值):

  • Largest Contentful Paint (LCP): 衡量載入性能。 為了提供一個好的用戶體驗,LCP應該在2.5秒內。
  • First Input Delay (FID): 衡量可互動性。 為了提供一個好的用戶體驗,FID應該在100毫秒內。
  • Cumulative Layout Shift (CLS): 衡量視覺穩定性。 為了提供一個好的用戶體驗,CLS應該小於0.1。

對上面每一個指標而言,為了保證覆蓋到大部分使用者,一般閾值設置在75%的頁面載入達標即可,包括手機和pc網站。

JavaScript中測試Core Web Vitals

每一個Core Web Vitals都可用JS提供的Web API來測試。

最簡單的方式,就是集成 Web Vitals 的 js 庫,這是 Google 提供的一個小型可以生產環境使用的統計性能的庫,涵蓋了基本所有指標。

import{getCLS,getFID,getLCP}from'web-vitals';functionsendToAnalytics(metric){constbody=JSON.stringify(metric);// Use navigator.sendBeacon() if available, falling back to fetch().
(navigator.sendBeacon&&navigator.sendBeacon('/analytics',body))||fetch('/analytics',{body,method:'POST',keepalive:true});}getCLS(sendToAnalytics);getFID(sendToAnalytics);getLCP(sendToAnalytics);

如果不需要發送統計,可以直接使用 Web Vitals 擴展 ,這個擴展其實就是集成了上面提到的 js 庫,即時的展現每個頁面的指標值。

Core Web Vitals實驗數據測試工具

一般可以用開發者工具和Lighthouse,這兩個都能測試FCP和CLS,但FID無法測試,可以用TBT替代。

其他Web Vitals

除了核心之外,還有其他類型的Web Vitals,當然這些一般都是核心的補充,為一些特定的場景提供服務。

例如,Time to First Byte (TTFB) 和 First Contentful Paint (FCP) 都是關於載入性能的,兩者都有助於診斷 LCP (緩慢的服務端回應,或者渲染阻塞的資源)。

同上,Total Blocking Time (TBT) 和 Time to Interactive (TTI) 則是影響FID的實驗性指標,他們不屬於核心,因為不能測試現場數據,不能反映使用者為核心的關鍵結果。

不斷發展的Web Vitals

Web Vitals 和 Core Web Vitals 代表了當今開發人員用來衡量我們整個 Web 體驗品質的最佳可用信號,但這些信號還不完善,未來會有更多改善和提升的點。

總結

Core Web Vitals是與使用者為中心的理念密切相關的指標,一般不會怎麼變化,相對穩定,一旦發生改變,或者閾值有了調整,影響很大,開發者需要對這種更新有預知或者年度的預測。

而其他的Web Vitals經常是輔助Core Web Vitals的,可能比其更具有實驗性。 因此,它們的定義和閾值的改動可能會很頻繁

對所有Web Vitals來說,下面這個公開文檔會即時更新:

bit.ly/chrome-speed-met

參考

web.dev/vitals/

Google Web Vitals – 使用者體驗量化

Web Performance Metrics 與 Core Web Vitals 簡介