頁面載入性能之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來說，下面這個公開文檔會即時更新：
http://bit.ly/chrome-speed-metrics-changelog
