# Performance (Iron) Chapter 2-4
隨著網路的普及和移動裝置的使用增加，前端效能優化的重要性也隨之提高。

## 前端效能優化的原因
- **使用者體驗**: 速度快的網站能提供更好的使用者體驗。
- **轉換率**: 加速網頁載入時間可以提高轉換率，對於商業網站來說，這可能意味著更多的銷售。
- **SEO**: 搜尋引擎（例如Google）將網站效能視為其排名的因素之一。
- **成本節省**: 優化資源可以降低伺服器的成本和帶寬。
:::warning
keep it in mind：不是單純為了達成 SEO or 速度，目的都是提升 UX。只是我們藉由 SEO 分數及速度數值去衡量 UX
:::

## 衡量指標
#### Web Vitals
Google 提出的 standard，用於衡量網頁的健康度和使用者體驗。反應出真實使用者在真實環境中的體驗。

核心指標

- **Largest Contentful Paint (LCP)**: 衡量載入性能。用於確定頁面的主要內容何時完成載入。
- 理想值 2.5s
- 優化方式
- 優化圖片：適當地壓縮、選擇最佳的格式(webp、jpg)。
- 刪除或延遲不必要的第三方腳本(fb chat、GA)。
- 使用預加載，但也避免過度使用
` <link rel="preload"> `

- **First Input Delay (FID)**: 衡量互動性。這指的是使用者首次互動（例如點擊連結）到瀏覽器開始處理該互動的時間。
- 理想值 100ms
- 優化方式
- 確保不使用過大的 JavaScript bundle。
- 使用 Web Workers 進行後台處理。
[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) 是 Web API 提供的類，使用消息系統（postMessage 和 onmessage 事件）來與主線程通信。
- **Cumulative Layout Shift (CLS)**: 衡量視覺穩定性，評估頁面中元素的突然位移，這可能會對使用者造成干擾。
- 理想值 0.1
- 優化方式
- 確保圖片有固定的大小。
- 限制突然的動畫和位移。

其他指標，基本上就是用來輔佐上方三個核心指標

1. **Time to First Byte (TTFB)**: 從瀏覽器發射請求到接受回應第一個byte。

2. **First Contentful Paint (FCP)**: 第一個文字或者圖片的渲染時間，可用來觀察頁面載入速度。

3. **Speed Index**: 也算頁面載入的速度指標，測量工具會在網頁載入期間錄製影片，計算每個 frame 在視覺上的內容完成進度。


交互性指標

1. **Total Blocking Time (TBT)**: 測量的是在 FID 之前，頁面在主線程上被阻塞了多少時間。

2. **Time to Interactive (TTI)**: 這個指標測量頁面從開始加載到完全可互動

#### RAIL Model
RAIL 是一套用於評估使用者體驗的效能模型。

- **Response**: 對使用者的輸入做出反應，在100毫秒內(實際上50ms更佳)。
- **Animation**: 產生一個動畫框，每10毫秒一次。 (可用WebGL)
- **Idle**: 空閒時最大化主線程的可用性。
- **Load**: 在5秒內載入內容。

## 工具

- Page speed ( Lighthouse website)
- 無法分析 local
- Lighthouse dev tool
- 可以跑 local
- [Lighthouse-CI](https://github.com/GoogleChrome/lighthouse-ci)
- [WebPageTest](https://www.webpagetest.org/)

** 在 local 跑 lighthouse dev tools 需注意：開發環境與正式環境有極大的差別，因此不能將數值作為絕對的參考，但可以看作是前期對於 performance 的注意。最重要的還是在正式環境的結果，並收集用戶數據做出最準確的判斷

## 補充
1. why Lighthouse use slow 4G throttling？

- 簡單來說就是，開發者的網路太快速，一點也不準確、反映現實狀況
- 現實情況&移動裝置的普及 - 大部分移動裝置仍以 4G 為主
- 數據一致性
2. [2024/3 INP 新指標](https://developers.google.com/search/blog/2023/05/introducing-inp?hl=zh-tw)
- INP 將取代 FID
- 主要「評估網頁互動性及效能」
- 監測使用者互動是否得到良好的回饋，最終的INP值是觀察到的最長互動
- INP只觀察三種互動：使用鼠標點擊、在觸控裝置上觸摸以及在實體鍵盤或螢幕鍵盤上按鍵。
- **INP與First Input Delay (FID)的區別**：FID只考慮第一次互動，且只測量第一次互動的輸入延遲。相比之下，INP考慮了所有互動，因此是一個更可靠的整體響應性指標。
3. Chrome Dev Tool "Recorder"
https://developer.chrome.com/docs/devtools/recorder/
- a whole user flow experience performance

#### 參考
- https://developers.google.com/search/docs/appearance/core-web-vitals?hl=zh-tw
- https://gcdeng.com/blog/a-guidebook-to-optimize-web-vitals
- https://www.youtube.com/watch?v=F0NYT7DIlDQ