diff --git a/src/content/post/all-the-performance-metrics-you-need-to-know/index.mdx b/src/content/post/all-the-performance-metrics-you-need-to-know/index.mdx
index ac9b5c0b..39bbbe6d 100644
--- a/src/content/post/all-the-performance-metrics-you-need-to-know/index.mdx
+++ b/src/content/post/all-the-performance-metrics-you-need-to-know/index.mdx
@@ -2,11 +2,12 @@
isDraft: false
icon: { name: 'material-symbols:performance-max-outline-rounded', title: '效能指標符號' }
title: 'All The Performance Metrics You Need To Know'
-titleTC: '學習所有 Google 提出的衡量網頁效能指標! TTFB, FCP, LCP, FID, CLS, TTI, TBT'
+titleTC: '學習 Google 衡量網頁效能指標! TTFB, FCP, LCP, FID, INP, CLS, TTI, TBT'
excerpt: '指標就是為了能夠客觀的測量網站體驗而生的統計數值,本篇文章挑戰用自己的方式去理解並解釋所有 Google 提出網頁體驗相關的指標,我發現沒有必要一次性的記憶所有種類的指標,因此製作了一個懶人包與該文章,方便你我查詢與學習。'
category: '網頁效能'
tags: ['指標']
publishDate: 2023-05-10
+lastModifiedDate: 2024-05-20
---
## 前言
@@ -41,7 +42,7 @@ publishDate: 2023-05-10
頁面是否繁忙?用戶是否可以與頁面互動?
- 關聯指標:[FID](#fid---首次輸入延遲-)、[TTI](#tti---可互動時間)、[TBT](#tbt---總阻塞時間)
+ 關聯指標:[FID](#fid---首次輸入延遲-)、[INP](#inp---互動到下一次繪製-)、[TTI](#tti---可互動時間)、[TBT](#tbt---總阻塞時間)
|
@@ -123,7 +124,7 @@ publishDate: 2023-05-10
LCP 與前者 FCP 非常相似,但測量目的不同,差別僅在於 LCP 測量最大內容,FCP 則是測量首個內容。
-## FID - 首次輸入延遲 🌟
+## FID - 首次輸入延遲(已被 INP 取代) 🌟
![良好的 FID 數值建議在 100 豪秒以內,在 300 毫秒以上則視為差勁,在此之間則需要改進](./fid.svg)
@@ -131,6 +132,14 @@ publishDate: 2023-05-10
具體來說該指標計算用戶首次互動需要花多少時間瀏覽器才能反應(不包含事件處理的時間),隨著用戶的行為不同結果也會不同。
+## INP - 互動到下一次繪製 🌟
+
+![良好的 INP 數值建議在 200 豪秒以內,在 500 毫秒以上則視為差勁,在此之間則需要改進](./inp.svg)
+
+INP 在 2024 年 3 月取代 FID,同樣是**測量網頁要花多久時間去回應用戶的互動**,但 INP 會以網頁整體的互動品質來進行評估,而不是僅依據第一次互動的延遲時間。相較於 FID 是一款頁面加載型指標,INP 更是一款用於測試整體網站可靠程度的指標,越好的 INP 越能說服用戶網頁「[是否可用](#usable)」。
+
+具體來說該指標觀察使用者在網頁造訪期間發生的點擊、輕觸和鍵盤互動所經歷的延遲時間,並且只會計算從行為觸發 ~ 主執行緒被占用 ~ 準備可以開始渲染畫面反饋這段時間,也就是說主執行緒以外的等待時間並不算在內(例如按下按鈕後發送表單請求的等待時間)。
+
## CLS - 累積布局偏移 🌟
![良好的 CLS 數值建議在 0.1 以內,在 0.25 以上則視為差勁,在此之間則需要改進](./cls.svg)
@@ -224,6 +233,7 @@ publishDate: 2023-05-10
- [First Contentful Paint (FCP) - web.dev](https://web.dev/fcp)
- [Largest Contentful Paint (LCP) - web.dev](https://web.dev/lcp)
- [First Input Delay (FID) - web.dev](https://web.dev/fid)
+- [Interaction to Next Paint (INP) - web.dev](https://web.dev/inp/)
- [Cumulative Layout Shift (CLS) - web.dev](https://web.dev/cls)
- [Time to First Byte (TTFB) - web.dev](https://web.dev/ttfb/)
- [Time to Interactive (TTI) - web.dev](https://web.dev/tti/)
diff --git a/src/content/post/all-the-performance-metrics-you-need-to-know/inp.svg b/src/content/post/all-the-performance-metrics-you-need-to-know/inp.svg
new file mode 100644
index 00000000..8458a998
--- /dev/null
+++ b/src/content/post/all-the-performance-metrics-you-need-to-know/inp.svg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0af185a9a1d85f241f5717974766978317084ffd9c84956f7e77b7162b8ac98c
+size 58955