如何衡量網站效能 - PerformanceObserver

透過 Google 提供的網站

可以輕鬆測量網站效能。

https://pagespeed.web.dev/
輸入網址進行測量，或安裝 Chrome 擴充功能 Lighthouse 進行測量。

改善指標有什麼好處？

可以更容易在搜尋引擎中曝光。SEO 常使用伺服器端渲染，

如果上述效能指標較低，則其效果將會大幅下降。

如何改善？

web.dev 網站詳細說明了如何改善每個指標。

特別是 3 個指標佔據了很大一部分分數。（Web Core Vitals）

記錄嘗試改善指標的過程。

如何在本地測量？

插入上述程式碼。如果是 Nuxt，則放入 plugins 中並檢查 console log。

累積佈局偏移 (CLS)

測量渲染過程中佈局變化的程度。

例如，假設有一個頁面透過 API 響應接收圖片網址，並渲染 400x400 的圖片，

某些佈局的位置會因圖片渲染而偏移 400px。

這會導致使用者體驗不佳，因為這是使用者預期之外的移動，而且瀏覽器在渲染畫面時

也會間接受到負面影響。

有兩種簡單的改善方法。

1. 套用 UI 骨架

- 大多數網站都會根據圖片大小或元件大小適當繪製骨架。在開發畫面時，請考慮這一點。在 Vue 中，可以使用 v-if 和 v-else 為每個元素繪製骨架。

2. 預留高度

- 如果骨架包含太多樣式，則維護會變得複雜，甚至可能產生反效果。僅僅為將要渲染的元素設置 min-height 即可有效。

- 在響應式網站等圖片大小根據裝置而不同的情況下，很難固定高度。這種情況下，可以使用最小裝置為基準，或使用 vh 或 vw。

3. 在圖片元素中明確指定寬度和高度

- 可以如下所示在圖片元素中添加寬度和高度。

<img src="image.jpg" width="400" height="400">

即使實際圖片大小不是 400x400，也會讓瀏覽器知道圖片的預期大小。

4. 使用 font-display: swap 避免網頁字體導致佈局變化

- 顯示替代字體以防止佈局偏移。

最大內容物繪製 (LCP)

畫面中佔最大部分的元素渲染所需的時間。通常是圖片，直觀地來說，只要加快載入速度即可。

1. 縮小圖片大小。

- 檢查渲染大小是否與圖片大小不成比例。

- 使用 webp 等擴展名優化圖片渲染。如果使用有損壓縮，webp 的檔案大小比 JPEG 小約 30%，如果使用無損壓縮，則比 png 小約 20%。

- 也可以考慮根據捲軸位置載入的延遲載入。

2. 利用快取或 CDN。

3. 移除渲染阻擋元素。

- 大多數測量指標都會受到影響，因此務必移除。瀏覽器在渲染畫面時，會先取得 head 標籤中的 script，然後再進行渲染，因此請檢查 head 標籤內的 script（通常是外部 script）是否需要優先渲染。可以使用 async 和 defer 標籤輕鬆管理相關問題。

* 關於 head 內的 script 屬性，日後會撰寫其他文章。

4. 最小化套件大小。

- 與圖片渲染速度緩慢無關，如果從伺服器傳輸速度緩慢，則需要改善。

如果使用 nginx 等 Proxy 伺服器，則可以使用 gzip 壓縮。

* 關於 nginx 設定，日後會撰寫另一篇文章。

首個內容物繪製 (FCP)

表示頁面上第一個內容渲染的時間點。

1. 同樣移除渲染阻擋元素。

2. 最小化 HTML 大小。

- 如果不加節制地使用 div 標籤包覆，則會產生大量巢狀樹狀結構，並導致檔案大小增加。

3. 外部網頁字體可能是問題所在。積極使用 font-display: swap；讓基本字體優先渲染。

首個輸入延遲 (FID)

表示使用者在頁面上進行第一次輸入（點擊、捲動等）時，瀏覽器處理該輸入所需的時間。有時點擊按鈕後會出現當機的情況，但實際上並非當機，而是可能正在等待 API 響應。

1. 善用非同步，避免 JavaScript 主執行緒被繁重的作業綁定。

2. 使用 Web Worker 執行其他作業，與主執行緒分開。

* 關於 Web Worker，日後會撰寫其他文章。

字數限制，到此結束。