From c4c9f290a41f6df4f7893c19db38ddc430722d91 Mon Sep 17 00:00:00 2001 From: Riceball <42161586+riceball-tw@users.noreply.github.com> Date: Mon, 20 May 2024 23:26:50 +0800 Subject: [PATCH] feat: Edit post - all-the-performance-metrics --- .../index.mdx | 16 +++++++++++++--- .../inp.svg | 3 +++ 2 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 src/content/post/all-the-performance-metrics-you-need-to-know/inp.svg 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 ac9b5c0..39bbbe6 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 0000000..8458a99 --- /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