頁面加載性能之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';

function sendToAnalytics(metric) {
  const body = 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來講，下面這個公開文檔會實時更新:

http://bit.ly/chrome-speed-me...

參考

https://web.dev/vitals/