谷歌的新一代 Web 性能體驗和質(zhì)量指標：Web Vitals

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

有很多方法可以優(yōu)化網(wǎng)站的用戶體驗。若能預(yù)先了解最佳的優(yōu)化衡量方法，可以大大節(jié)省時間和成本。

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

△ Google 在使用者體驗量化發(fā)展的相關(guān)成果

Core Web Vitals 與 Web Vitals

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

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

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

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

△?Core Web Vitals 與 Web Vitals

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

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

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

LCP -- 最大內(nèi)容繪制

1. 加載性能

△?LCP 的基準時間

LCP（Largest Contentful Paint）用于衡量加載體驗，從真實用戶的角度衡量網(wǎng)頁的加載速度。它是 從頁面剛開始加載到呈現(xiàn)出所有內(nèi)容時的持續(xù)時間。

“換句話說，LCP 是度量網(wǎng)頁上可見區(qū)域加載時間的方法”

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

△?LCP 對比

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

“谷歌堅稱，所有開發(fā)者和產(chǎn)品所有者都會定期測量其應(yīng)用程序的 Core Web Vitals，并提供工具來輔助測量。”

FID -- 首次輸入延遲

1. 交互行為

△?FID 的基準時間

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

在 TTI 的時間內(nèi)第一個互動事件的開始時間與瀏覽器回應(yīng)事件的時間差

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

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

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

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

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

CLS -- 累計布局偏移

1. 視覺穩(wěn)定性

△?CLS 的基準時間

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

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

下圖顯示了 medium.com 和視覺不穩(wěn)定網(wǎng)站之間的 CLS 差異。

△?視覺穩(wěn)定性測量

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

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

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

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

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

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

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

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

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

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

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

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

我覺得現(xiàn)在你應(yīng)該已經(jīng)很好地理解了 Core Web Vitals 和它們的職責。所以，現(xiàn)在是時候?qū)W習如何測量了。

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

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

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

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

1. 實驗室測試工具

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

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

下圖顯示了使用 Lighthouse 的網(wǎng)頁的性能測試結(jié)果：

△?使用 Lighthouse 測量 Core Web Vitals

2. 現(xiàn)場測試工具

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

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

△?使用 Lighthouse 測量 Core Web Vitals

讓我們假設(shè)你已經(jīng)測量了網(wǎng)站的 Core web Vitals，而結(jié)果并不符合預(yù)期。那么，做什么能提高這些分數(shù)呢？

改善 Web Vitals 的步驟

既然你現(xiàn)在知道如何測量 Web Vitals，那么讓我們看看如果存在問題，如何改進你的網(wǎng)站。

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

可以通過以下方式改進網(wǎng)站的 LCP：

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

△?Lighthouse 分析結(jié)果

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

△?Lighthouse 分析結(jié)果

設(shè)置延遲加載和延遲加載圖像；

減少服務(wù)器響應(yīng)時間。

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

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

△?Lighthouse 分析結(jié)果

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

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

結(jié)論

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

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

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