Google 開發了許多實用指標和工具，幫助衡量用戶體驗和質量，從而發掘優化點。一項名為 Web Vitals 的計劃降低了學習成本，為網站體驗提供了一組統一的質量衡量指標 -- Core Web Vitals，其中包括加載體驗、交互性和頁面內容的視覺穩定性，構成了 2020 年核心 Web 健康指標的基礎。本文詳細的介紹了每個指標及其使用方式，推薦了用于測量這些指標的實用工具，快來一起看看吧～

有很多方法可以優化網站的用戶體驗。若能預先了解最佳的優化衡量方法，可以大大節省時間和成本。

Google 在 2020 年 5 月 5 日提出了新的用戶體驗量化方式 Web Vitals 來衡量網站的用戶體驗，并將這些衡量結果用作其排名算法的一部分。為了更好的理解這些內容，讓我們來看看這些重要指標是什么。

△ Google 在使用者體驗量化發展的相關成果

Core Web Vitals 與 Web Vitals

什么是 Web Vitals，Google 給出的定義是 一個良好網站的基本指標（Essential metrics for a healthy site），過去要衡量一個網站的好壞，需要使用的指標太多了，Web Vitals 可以簡化指標的學習曲線，只需聚焦于 Web Vitals 指標的表現即可。

“你不需要成為任何領域的專家就可以了解 Web Vitals。它們很簡單，比如移動友好性、瀏覽安全性、HTTPS、交互性、視覺穩定性、加載時間等。”

在這些 Web Vitals 中，Google 確定了三個主要衡量指標，即在所有類型的網站中通用的 Core Web Vitals[1]：

[1]Core Web Vitals 是應用于所有 Web 頁面的 Web Vitals 的子集，是其最重要的核心。

△?Core Web Vitals 與 Web Vitals

• 加載性能（LCP） -- 顯示最大內容元素所需時間
• 交互性（FID） -- 首次輸入延遲時間
• 視覺穩定性（CLS） -- 累積布局配置偏移

這三個指標已經經過了一段時間的驗證，如 LCP 在 WICG 已經孵化至少 1 年以上，FID 在 Google Chrome Labs 上已經實施 2 年以上，LCP 和 CLS（相關 Layout Instability API）已于今年入 W3C 草擬標準。

讓我們一起詳細了解下 Core Web Vitals。

LCP -- 最大內容繪制

1. 加載性能

△?LCP 的基準時間

LCP（Largest Contentful Paint）用于衡量加載體驗，從真實用戶的角度衡量網頁的加載速度。它是 從頁面剛開始加載到呈現出所有內容時的持續時間。

“換句話說，LCP 是度量網頁上可見區域加載時間的方法”

讓我們比較一下有圖像和沒有圖像的媒體文章的 LCP。

△?LCP 對比

有圖片的文章用了 3.57 秒加載，而沒有圖片的文章只用了 2.32 秒載入。

“谷歌堅稱，所有開發者和產品所有者都會定期測量其應用程序的 Core Web Vitals，并提供工具來輔助測量。”

FID -- 首次輸入延遲

1. 交互行為

△?FID 的基準時間

FID（First Input Delay）涉及到用戶與 web 頁面之間的交互性，用于衡量網站操作的順暢程度。它測量了用戶第一次產生交互行為，到瀏覽器響應該用戶操作的持續時間。這些用戶交互行為可以是單擊按鈕、點擊鏈接或任何基于 JavaScript 的自定義控件。

在 TTI 的時間內第一個互動事件的開始時間與瀏覽器回應事件的時間差

為什么要取在 TTI[2] 發生的第一次的操作事件，Google 給的理由有以下三點:

• 使用者的第一次互動體驗印象相當重要；
• 當今網頁最大的互動性問題通常發生在一開始載入時；
• 頁面載入完后的第二次操作事件延遲，有其他專門的改善解決建議。

[2]互動時間 TTI 是衡量負載響應能力的重要實驗室指標。它有助于確定頁面看起來是交互式但實際上不是交互式的情況。快速的 TTI 有助于確保頁面可用。TTI 度量標準衡量的是從頁面開始加載到頁面主要子資源加載之間的時間，它能夠快速可靠地響應用戶輸入。

“根據 Google 的基準測試，交互的最佳持續時間應該在 100ms 以下，而任何超過 300ms 的時間都被認為是較差的。”

人們可能會說這些時間間隔很小，調整幾百毫秒也沒什么區別。但實際上，這些微小的變化可能會對最終用戶產生重大影響。

CLS -- 累計布局偏移

1. 視覺穩定性

△?CLS 的基準時間

你可能已經注意到某些時候網頁中的元素在加載時出現移動，我敢肯定這不是用戶期待的優秀體驗。在這樣的場景中，CLS（Cumulative Layout Shift）測量在頁面的整個生命周期中發生的每個意外的樣式移動的所有單獨布局更改得分的總和，可以方便地用來度量 web 頁面的視覺表現。布局的移動可能發生在可見元素從一幀到下一幀改變位置的任何時候。為了提供良好的用戶體驗，網站應努力使 CLS 分數小于 0.1.

“CLS 顯示頁面加載時組件移動的次數。正如大家所理解的，CLS 需要盡可能少地次數來實現良好的用戶體驗。”

下圖顯示了 medium.com 和視覺不穩定網站之間的 CLS 差異。

△?視覺穩定性測量

在上面的例子中，medium.com 網站顯示其 CLS 為 0.097。

“這是不是意味著 medium.com 網站加載時主頁移動了 0.097 次？→ 不是！！”

計算此值時要考慮視窗大小以及兩個渲染幀之間視窗中不穩定元素的移動。

布局偏移系數（Layout Shift Score） = 影響范圍系數（Impact Fraction） x 移動距離系數（Distance Fraction）

CLS 值（布局偏移系數）可以使用上述公式輕松計算。此公式中的影響系數是指不穩定元素對視窗的影響，而距離系數是指不穩定元素移動的距離。

例如，假設一個不穩定的元素覆蓋了總窗口大小的 40%，當頁面加載時它向下移動了 20%。在這種情況下，因為不穩定元素占用了總窗口的 60%，影響系數將為 0.6。又由于不穩定元素向下移動了 20%，因此距離系數將為 0.2。

因此，最終布局偏移系數 = 0.6 x 0.2 = 0.12

如上圖的實例，影響范圍（紅色區域）占比總窗口 75% ，箭頭（紫色）移動占總窗口高度的 25%，故 0.75 x 0.25 = 0.1875。

提示：使用 Bit（于 Github 里）可在項目之間共享可復用組件。

Bit 使得在項目之間共享、記錄和復用獨立組件變得簡單。使用它可以最大限度地復用代碼，能夠保持設計一致、幫助團隊協作、加快交付并構建可擴展的應用程序。

Bit 支持 Node，TypeScript，React，Vue，Angular 等。

△?示例：探索在 Bit.dev 上共享的可復用的 React 組件

我覺得現在你應該已經很好地理解了 Core Web Vitals 和它們的職責。所以，現在是時候學習如何測量了。

測量 Web Vitals 比你想象的要容易得多

正如我開始提到的，測量 Web Vitals 是一個簡單的過程，任何人都可以做到。實際有很多工具可以用來測量 Web 的重要信息，包括一些瀏覽器插件。

“Lighthouse、Chrome DevTools、PageSpeed Insights、Chrome UX Report 和 Web Vitals Extension 位列榜首。”

雖然這些工具的用途相同，但可以進一步分為實驗室測試工具和現場測試工具兩類。

1. 實驗室測試工具

實驗室測試工具的主要目的是在開發過程中測試性能，以確保在發布之前達到所需的標準。ChromeDevTools 和 Lighthouse 可用于在開發環境中測量 Core Web Vitals。

“但是這些實驗室測試工具無法測量 FID，因為沒有用戶來計算其交互性。但是，這些工具使用了一種稱為 Total Blocking Time（TBT）的等效測量方法。”

下圖顯示了使用 Lighthouse 的網頁的性能測試結果：

△?使用 Lighthouse 測量 Core Web Vitals

2. 現場測試工具

實驗室測試工具的結果不是 100% 準確的，因為沒有真正的用戶試用網頁。現場測試工具可以用來填補這個漏洞。此外，與實驗室測試工具不同的是，現場測試工具可以按原樣測量所有 3 個 Core Web Vitals。

PageSpeed Insights、Chrome UX Report 和 Web Vitals Extension 是一些現場測試工具，我們可以使用這些工具在真實用戶交互時測量 Core Web Vitals。這些現場測試工具匿名地從網頁上收集實時數據，使我們無需手動運行任何操作即可檢查 Vitals。

△?使用 Lighthouse 測量 Core Web Vitals

讓我們假設你已經測量了網站的 Core web Vitals，而結果并不符合預期。那么，做什么能提高這些分數呢？

改善 Web Vitals 的步驟

既然你現在知道如何測量 Web Vitals，那么讓我們看看如果存在問題，如何改進你的網站。

眾所周知，對于性能相關問題的技術修復并不是那么簡單。大多數時候它們非常復雜耗時。但是，可以遵循一些通用的指導方法來改進這些 Core Web Vitals。

可以通過以下方式改進網站的 LCP：

刪除或避免使用消耗太多時間加載的大型頁面元素。通過分析前面討論的測量工具結果，可以很容易地發現這些元素及其影響；

△?Lighthouse 分析結果

避免不必要的第三方 JavaScript 庫。下面的分析表明，使用第三方庫已將主線程阻塞 2700 毫秒；

△?Lighthouse 分析結果

設置延遲加載和延遲加載圖像；

減少服務器響應時間。

與 LCP 類似，可以遵循以下幾點來提高網站的 FID 值：

• 使用高效的緩存策略更快地加載頁面內容；
• 與 LCP 類似，可以通過提交不必要的 JavaScript 庫來增強 FID 值；
• 最小化將提高頁面加載時間，用戶將能夠立即與頁面交互。

△?Lighthouse 分析結果

Core Web Vitals 最終測量的是 CLS，可以通過以下方式提高 CLS 分數：

• 對圖像和視頻使用固定尺寸；
• 如果網站存在廣告顯示，一定要為他們留下必要的空間。

結論

我希望你們已經明白了維護優秀網站的重要性。這些測量方法為保持網站的用戶體驗友好性提供了有力支持。

盡管這些測量方法非常有前途，但在某些情況下，也需要臨時修改這些測量方法來確保良好的用戶體驗。所以請保持注意。

歡迎關注作者微信公眾號：「TCC翻譯情報局」