Performance (Iron) Chapter 2-4

隨著網路的普及和移動裝置的使用增加，前端效能優化的重要性也隨之提高。

前端效能優化的原因

keep it in mind：不是單純為了達成 SEO or 速度，目的都是提升 UX。只是我們藉由 SEO 分數及速度數值去衡量 UX

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

核心指標

Image Not Showing Possible Reasons

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 是 Web API 提供的類，使用消息系統（postMessage 和 onmessage 事件）來與主線程通信。
Cumulative Layout Shift (CLS): 衡量視覺穩定性，評估頁面中元素的突然位移，這可能會對使用者造成干擾。
- 理想值 0.1
- 優化方式
  - 確保圖片有固定的大小。
  - 限制突然的動畫和位移。

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

Image Not Showing Possible Reasons

交互性指標

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

Image Not Showing Possible Reasons

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

why Lighthouse use slow 4G throttling？
Image Not Showing Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →

INP 將取代 FID
主要「評估網頁互動性及效能」
監測使用者互動是否得到良好的回饋，最終的INP值是觀察到的最長互動
INP只觀察三種互動：使用鼠標點擊、在觸控裝置上觸摸以及在實體鍵盤或螢幕鍵盤上按鍵。
INP與First Input Delay (FID)的區別：FID只考慮第一次互動，且只測量第一次互動的輸入延遲。相比之下，INP考慮了所有互動，因此是一個更可靠的整體響應性指標。