Web Vitals ：Google 如何定義性能名額及幫助開發者調優前端性能？

優化使用者體驗品質是所有網站取得長期成功的關鍵。通過與數百萬網絡開發者和網站所有者的持續交流和協作，我們在 Google 開發了許多實用名額和工具，以幫助企業所有者、市場營銷人員和開發者發掘改善使用者體驗的機會。然而，豐富多樣的名額和工具也給許多人帶來了各種優先級、明晰度和一緻性方面的挑戰。

今天，我們為各位介紹一項名為 Web Vitals 的新計劃，此計劃的發起方為 Google，旨在提供各種品質信号的統一指南，我們相信這些品質信号對提供出色的網絡使用者體驗至關重要。

Web Vitals ：Google 如何定義性能名額及幫助開發者調優前端性能？
Core Web Vitals

評估使用者體驗品質涉及多個名額，盡管部分使用者體驗是跟網站和内容相關，但還是有些共通信号，是以 Core Web Vitals 展現了最關鍵的幾項名額。此類核心使用者體驗需求包括頁面内容的加載體驗、互動性和視覺穩定性，這些方面共同組成 2020 Core Web Vitals 的基礎。

最大内容繪制評估頁面主要内容可能已完成加載時的感覺加載速度，并在頁面加載時間軸上标記時間點。
首次輸入延遲評估使用者首次嘗試與網頁互動時的網頁響應速度，并量化使用者感覺體驗。
累積布局偏移評估可見頁面内容的視覺穩定性，并量化内容的意外布局偏移量。

所有上述名額均捕獲以使用者為中心的重要體驗結果，可現場測量，并具有支援性實驗室診斷等效名額和工具。例如，雖然「最大内容繪制」是最重要的負載名額，但其也高度依賴于首次内容繪制 (FCP) 和首位元組響應時間 (TTFB)，這些名額對監控和優化均具有非常重要的意義。

評估 Core Web Vitals

我們的目标是建立簡單且易于通路和評估的 Core Web Vitals，讓所有網站所有者和開發者在 Google 界面及其自己的儀表闆和工具中都能輕松使用。

Chrome UX Report 讓網站所有者能夠快速評估其網站的各項 Web Vital 性能，擷取實際 Chrome 使用者的真實體驗資料。BigQuery 資料集已經能夠展示所有 Core Web Vitals 可公開通路的資料，同時我們正在開發全新的 REST API，以實作對 URL 和原始級别資料的輕松通路，敬請期待。

我們強烈建議所有網站所有者針對每項 Core Web Vital 收集自己的真實使用者評估分析結果。為此，包括 Google Chrome 在内的多個浏覽器已實施并提供對所有目前 Core Web Vitals 規範草案的支援：最大内容繪制、布局不穩定性和事件時間。此外，今天我們還将推出一個 web-vitals 開源 JavaScript 庫，該庫提供可立即投入生産的小型包裝器，可與支援自定義名額的任何分析提供程式搭配使用，也可用作準确捕獲網站使用者各項 Core Web Vitals 的參考。

// 使用 web-vitals 評估和報告 CLS、FID 及 LCP 的示例。
import { getCLS, getFID, getLCP } from 'web-vitals';
function reportToAnalytics(data) {
  const body = JSON.stringify(data);
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS((metric) => reportToAnalytics({ cls: metric.value }));
getFID((metric) => reportToAnalytics({ fid: metric.value }));
getLCP((metric) => reportToAnalytics({ lcp: metric.value }));

我們在測試和開發過程中發現，在開發環境和生産環境輕松通路每項 Core Web Vital 的功能非常有用。為幫助當下的開發者發掘優化機會，今天我們還要推出全新 Core Web Vitals 擴充程式的開發者預覽版。在浏覽網頁的過程中，此擴充程式會在 Chrome 浏覽器中顯示有關每項 Vital 的視覺辨別，将來還可以通過此程式來檢視彙總的真實使用者資料分析（由 Chrome UX Report 提供），以了解目前網址（URL）和來源（origin）的每項 Core Vital 狀态。

最後，在接下來的幾個月裡，我們将更新 Lighthouse、Chrome DevTools、PageSpeed Insights、Search Console 的速度報告和其他主流工具，以重點強調并提供統一的可執行指導，進而改進 Core Web Vitals。