如何使用真實用戶指標對 Web Vitals 進行基準測試和改進

本文得到了 Raygun 親愛的朋友的大力支持，他們幫助開發人員在客戶受到影響之前發現問題，提供用戶期望和應得的體驗標準。 謝謝！

您將如何衡量績效？ 有時它是應用程序從初始請求到完全呈現所花費的時間。 其他時候，它與執行任務的速度有關。 也可能是用戶需要多長時間才能獲得有關操作的反饋。 請放心，只要上下文正確，所有這些定義（和其他定義）都是正確的。

不幸的是，沒有衡量性能的靈丹妙藥。 不同的產品會有不同的基準，兩個應用程序在相同的指標上可能表現不同，但仍然與我們主觀的“好”和“壞”判斷非常相似。

為了簡化語言並促進協作和標準化，我們的行業提出了廣泛的概念。 通過這種方式，開發人員能夠共享解決方案、定義優先級並專注於有效完成工作。

性能與感知性能

以這個片段為例：

 const sum = new Array(1000) .fill(0) .map((el, idx) => el + idx) .reduce((sum, el) => sum + el, 0) console.log(sum)

這樣做的目的並不重要，除了花費大量時間將數字輸出到控制台之外，它並沒有真正做任何事情。 面對這段代碼，人們會（理所當然地）說它表現不佳。 這不是運行速度快的代碼，它可以使用不同類型的循環進行優化，或者在單個循環中執行這些任務。

另一個重要的事情是它有可能阻止網頁的呈現。 它會凍結（甚至可能崩潰）您的瀏覽器選項卡。 所以在這種情況下，用戶感知到的性能與任務本身的性能是齊頭並進的。

但是，我們可以在 web worker 中執行這個任務。 通過防止渲染阻塞，我們的任務將不會執行得更快——因此可以說性能仍然相同——但用戶仍然能夠與我們的應用程序交互，並獲得適當的反饋。 這會影響最終用戶感知我們應用程序的速度。 它不是更快，但它具有更好的感知性能。

注意：如果您想了解更多關於 Web-Workers 和 React 的信息，請隨意探索我在 GitHub 上的 react-web-workers 概念驗證。

網絡生命力

Web 性能是一個廣泛的主題，您可以監控和改進數以千計的指標。 Web Vitals 是 Google 對標準化 Web 性能的回答。 這種標準化使開發人員能夠專注於對最終用戶體驗影響最大的指標。

• 首次內容繪製 (FCP)
  從加載開始到內容呈現在屏幕上的時間。
• 最大含量塗料 (LCP)
  最大圖像或文本塊的渲染時間在視口中可見。 75% 的頁面加載時間低於 2.5 秒。
• 首次輸入延遲 (FID)
  從用戶與頁面交互到瀏覽器能夠處理請求的時間。
  75% 的頁面加載時間低於 100 毫秒。
• 累積版式偏移 (CLS)
  頁面生命週期中發生的每個意外變化的所有單獨佈局變化的總和。 在 75% 的頁面加載中得分為 0.1。
• 互動時間 (TTI)
  從頁面開始加載到其主要子資源加載的時間。
• 總阻塞時間 (TBT)
  第一次內容繪製和交互時間之間的時間，主線程被阻塞（對用戶輸入沒有響應）。

其中哪一項最重要？

Core Web Vitals 是 Google 認為對最終用戶體驗影響最大的 Web Vitals 的子集。 截至 2022 年，有三個核心 Web Vitals — 最大內容繪製（速度）、累積佈局偏移（穩定性）和首次輸入延遲（交互性）。

推薦閱讀： Core Web Vitals 開發者指南

Chrome 用戶體驗報告與真實用戶指標

有多種方法可以在您的應用程序上測試 Web Vitals。 最簡單的方法是打開您的 Chrome Devtools，轉到 Lighthouse 選項卡，檢查您的偏好，然後生成一份報告。 這稱為Chrome 用戶體驗報告 (CrUX) ，它基於來自滿足特定要求的 Chrome 用戶的 28 天樣本平均值：

• 瀏覽歷史同步；
• 沒有同步密碼設置；
• 啟用使用統計報告。

但是很難定義 Chrome 用戶體驗報告對您自己用戶的代表性。 該報告作為一個大致範圍，可以提供一個很好的指標，可以在特別的基礎上改進。 這就是為什麼使用真實用戶監控 (RUM) 工具（如 Raygun）是一個非常好的主意的原因。 這將報告在分配的時間範圍內跨所有瀏覽器實際與您的應用交互的人。

不過，自己監控真實的用戶指標並不是一項簡單的任務。 有很多障礙需要注意。 但是，它不必很複雜。 使用性能監控工具獲取 RUM 指標很容易設置。 值得考慮的選項之一是 Raygun - 它可以通過幾個快速步驟進行設置，並且對 GDPR 友好。 此外，您還可以獲得大量錯誤報告功能。

應用程序監控

開發人員經常將可觀察性和性能監控視為事後的想法。 然而，監控是開發生命週期的一個重要方面，它可以幫助軟件團隊更快地行動、優先考慮工作並避免未來出現嚴重問題。

設置監控很簡單，構建可觀察性的功能將幫助團隊進行基本的維護和代碼衛生，以避免那些可怕的重構衝刺。 應用程序監控可以幫助您在晚上安然入睡，並指導您的團隊打造更好的用戶體驗。

監控趨勢並避免回歸

同樣，我們在持續集成管道上運行測試（理想情況下）以避免功能回歸和錯誤，我們應該有一種方法可以在新部署後立即為我們的用戶識別性能回歸。 Raygun 可以通過他們的部署跟踪功能幫助開發人員自動化這項工作。

遵守績效預算變得更加可持續。 借助此信息，您的團隊可以快速發現所有 Web Vitals 的性能下降（或改進），識別有問題的部署，並對受影響的用戶進行歸零。

深入研究並採取行動

使用 RUM 時，可以按每個用戶縮小結果範圍。 例如，在 Raygun 中，可以單擊直方圖上的分數或條形來查看受影響用戶的列表。 這使得可以使用實例級信息在單個基礎上進一步深入研究會話。 這有助於直接針對問題採取行動，而不是簡單地相信一般的最佳實踐。 然後，診斷變化的影響。

突出顯示異常事件

當然，這些功能很棒，負責任的開發人員應該密切關注應用程序監控儀表板。 但是，隨著您的應用程序規模擴大、團隊成長和職責分散，設置自動化流程以快速提醒您任何主要性能問題比以往任何時候都更加重要。 這就是為什麼建議為您的應用程序設置警報觸發器的最佳實踐。

包起來

總而言之，Web Vitals 是性能的新黃金標準，因為它們與用戶體驗直接相關。 基於真實用戶洞察力積極監控和優化 Web Vitals 的開發團隊將提供更快、更有彈性的數字體驗。

我們只是初步了解了監控可以做什麼以及在擴展應用程序的同時維持性能維護的解決方案。 在評論中讓我知道您如何使用績效預算、更好的可觀察性或其他解決方案來享受輕鬆的睡眠！