測量網頁性能，多快才叫做快？

效能

生活中的任何挑戰都是客觀的，以便被修復或被證明已修復，在軟體性能中我們可以通過一些指標來衡量具體的事情來證明存在性能問題，並確保以後修復它。

在本文中，我們將通過回答一些問題來展開性能的討論，例如速度有多快、如何衡量 Web 性能、以及測量工具的類型是什麼？

多快才叫快

什麼時候我們才能停止優化過程並說已經足夠好了… 首先您需要知道這些訊息：

由於這一切都與用戶體驗有關，在了解了上述內容後，您才將能夠設定優化的範圍，您有很多種方法可以收集資訊，例如使用 Google Analytics 等分析工具，如上面的截圖。這些資訊非常重要，它能幫助您在真正需要的地方做優化，而不是浪費時間優化用戶沒有注意到的東西。

在您了解您的用戶之後，您可以開始測試您的應用程式，模擬您的用戶的最壞情況並繼續測量。

如果您想確保優化後的結果符合標準，您可以使用一些基於長期用戶研究提供的指標，例如 Core Web Vitals，這只是 Google 的一項措施，目的在增強網路的整體用戶體驗

2020 年，Google 發起了這項計劃，並開始僅衡量 3 個新的用戶體驗指標：

LCP（Largest Contentful Paint）首次加載體驗，應該在上圖中的閾值之內，2.5s 以下為佳，超過 4s 為差會需要改善行動。
FID（首次輸入延遲）用於頁面的互動性，它測量您的網站響應用戶輸入（可以是點擊、滾動、輸入等）所花費的時間，您需要將其保持在 100 毫秒 以下。
CLS（Cumulative Layout Shift）用於佈局穩定性，如果頁面加載後頁面中的某些元素突然出現並將所有元素向下移動，則它是一個不穩定的佈局，可以使用這個指標來衡量，最好盡可能接近零。

如果您可以成功地使您的網站通過這些指標並將其網站的至少 75% 的頁面保持在上述閾值內，您可以說這已經足夠快且性能足夠了。

這些新指標最酷的地方在於，它們是為了用戶的利益，如果網站建立者不重視提升它們，他們就會失去 SEO 排名，這意味著失去線上的業務，因為這些指標有助於搜索引擎優化排名。這很聰明，Google 透過這樣強迫人們接受新的遊戲規則。

現在我們了解了我們需要測量的內容之後，是時候學習如何測量它了，有兩種類型的測量工具：

在您非常了解您的用戶之後，如前所述，您可以使用一些工具通過限制 CPU 來模擬用戶情況，例如盡可能接近最低用戶設備 CPU，很適合運用在開發模式下，在網站上線前為性能設定基準。

您可以測量 LCP 和 CLS，但無法測量 FID，因為它需要真實的用戶互動，但您可以在此處依賴另一個可能反映用戶輸入延遲的指標，即 TBT（總阻塞時間）。

1. Light House（免費）：最常見的實驗室性能測試，因為它是由您在您的 chrome 開發工具中手動完成的，速度非常快，並為您提供一些可遵循的建議，協助您提高頁面速度。

2. PageSpeed insights（免費）：chrome 團隊的一款出色工具，它可以測量桌面和移動設備上的核心網路指標，還為您提供了一些提高性能的建議。

3. GTmetrix（免費）：另一個很棒的網站，它會用於在世界某處的真實主機連線，以測量您網站的核心網路指標，並且提供您提供豐富詳細的實驗室結果。

其實網路上還有非常多可以使用的工具，但這些是我經常使用並且免費的服務，可以優先參考。

這些實驗室測試工具和其他工具都會為您提供一些關於性能、SEO 等建議和審核，如果您遵循那裡的建議，您可以大大增強您的應用程式。

另一種衡量性能的方法是 RUM。RUM 是 Real User Monitoring 的縮寫，這意味著您正在使用基於真實用戶體驗的真實監控數據，當然這更準確，它衡量的是真實用戶如何體驗您的 Web 應用程式。

您在此處獲得了有關用戶體驗頁面性能的詳細資訊，包括 LCP、CLS 和 FID

當您在決定性能優化之前需要某些指引時，強烈建議您先這樣做，這比有時可能會產生誤導的實驗室測試更好。

1. CrUX（免費）：Data Studio 上的 Chrome 用戶體驗報告，它非常好，隨著時間的推移也為桌面和移動設備提供了很好的報告。

2. CoreWebVitals lib（免費）：由 chrome 團隊創建的一個函式庫，非常易於使用，只需在本地或線上日誌服務中決定您自己的日誌記錄方式，順便說一句，它現在通過 create react 應用程式開箱即用。

import { getCLS, getFID, getLCP } from "web-vitals"
getCLS(console.log)
getFID(console.log)
getLCP(console.log)

3. Vercel Analytics（免費/付費）：非常好的工具，對於個人的專案來說可以免費啟用分析，但對團隊和企業需要付費。

4. Calibre（付費）：它是一個具有出色 UI 的傑出工具，雖然是付費軟體，但是他們也有用於實驗室測試的免費頁面，您可以看看這份示範測試報告。

對於 RUM 測試，同樣地您可以在網上找到很多其他工具，每天為您自動檢測，從而為真實的用戶體驗提供最準確的 Web 性能報告。