載入效能：指標、測量、優化與監控

這篇文章會分享 Google 制定的 Web Vitals 效能指標與使用者體驗的關係與實際應用、如何在專案中利用模擬與實地的方式測量與監控，以及如何優化專案以提升效能與使用者體驗。

效能指標與使用者體驗

當使用者使用我們的產品時，最重要的事情之一是他們能多快地看到並使用它。那麼，我們該如何測量這一點呢？

網頁指標（Web Vitals，如圖 FCP、LCP、INP、TBT、TTI、CLS 和 Speed Index）提供了一種從使用者角度評估效能的方法，這些指標是源自於 RAIL 模型（Response、Animation、Idle、Load，我們可以利用這些指標來測量所做的改進以及這些改進如何影響使用者的體驗和感受。

意即：

• FCP 是指使用者在畫面上看到第一個 pixel 的時間點。因此，快速顯示 loading icon 是很重要的。
• LCP 是指使用者在畫面上看到最重要內容的時間點。因此，在產品頁面上盡快看到產品列表是很重要的。
• INP / TBT 是指使用者可以與頁面互動並收到回應的速度。因此，在填寫表單的頁面能盡快讓使用者填寫與操作是很重要的。
• CLS 是指頁面載入時有多少元素在移動。因此，保持頁面的穩定是非常重要的，應該要避免元素發生任何非使用者操作而產生的不預期位移，例如：廣告載入時的位移。
• Speed Index 是指頁面在渲染元素時的順暢程度。因此，漸進地持續載入內容是很重要。

將上面提到的這些感受轉化為指標為數字，即是想要達到的目標。來看看 Google 如何定義每個指標的 threshold，一個好的網站應該符合以下標準：

需要注意的是，這個 threshold 是針對桌機的，使用者對行動裝置會有更高的容忍度。

由於在這篇文章中我們想要解決的是白頁 aka 載入效能的問題，因此我們將專注於 FCP 和 LCP 這兩個指標，以及 LT (載入時間)。

如何蒐集資料、改善與監測效能

在談論我們做了什麼之前，先來看看如何蒐集資料，以確保改進是走在正確的道路上，以便達到目標，並比較改進前後的情況。在此以使用 Lighthouse、Chrome DevTool 和 Datadog 這些工具來蒐集資料，進行改善和監測。大致上會使用 Lighthouse 與 Chrome DevTool 作為實作時檢視的工具，幫助了解改進是否有效，以及使用 Datadog 來蒐集與監測使用者的真實狀況。

說明：

• 使用 Lighthouse 來診斷模擬網頁條件並採取其建議作為優化方向。
• 在開發或除錯階段，使用 Lighthouse 和 Chrome DevTools 來實施和驗證。
• 使用 web.dev 來獲取更多相關資訊和範例。
• 在 PR 階段使用 Lighthouse CI 來檢測即將到來的程式碼變更，以確保產品品質。
• 利用 Datadog 來了解長期趨勢並嘗試找出潛在問題。
• 使用 Datadog 來收集和監測需要關注的整個網站問題。

實際案例

在目前的遇到的案例中，遇到的問題是在載入頁面時，使用者可能會遇到在 loading icon 出現前會出現空白頁 (這個問題可用 Chrome 中模擬 4G 網路來重現)。通常使用者會視為頁面無法正常運作，或者對這個頁面失去耐心、不想等待而關掉該頁面。

這樣的問題可能是由於下列原因造成的：

• 頁面需要載入大型檔案，這可能需要太多時間來下載。
• 頁面載入了不必要的資源。

因此實作以下改善：

• 將主要 chunk 分割成更多更小的檔案，以加快載入時間。目前的 main chunk 包含幾乎所有的 JavaScript 程式碼。在實行 split chunk 後可以非同步下載並執行這些更小的 chunk 以改善載入時間。 至於打包策略，主要是查看這些 package 的大小 (大的就要切出去，例如：個別 bundle size > 100KB)，並依據 dependency 來決定誰要跟誰打包在一起，以達到最佳的效果。
• 刪除未使用的套件和程式碼，已減少 bundle size。
• 用 inline CSS 的方式在 index.html 中加入 loading icon，以改善 FCP (範例)。在最糟的情況下，例如在 3G 連線上，這可以防止使用者遇到空白頁和長時間等待的問題。

上線後 LT 減少約 6%，FCP 減少約 36%，LCP 不減反升 (待查待補)。

總結

• Datadag vs Sentry：兩者皆可做錯誤與效能監測，但 Datadog 功能更多，例如：synthetic monitoring 與 feature tracking；但 Sentry 的介面簡潔好用，對於 HTTP request 的細節更清楚。
• 未來會再持續改進，例如：更好的打包策略、部份檔案可放 CDN 作為快取，以及渲染效能的改善。

參考資料

• Chunking Strategy
• INP