---
title: "網站使用體驗三大核心指標 - LCP, FID, CLS"
description: "網站使用體驗指標(Web Vitals)在2020五月由Google所提出，目的是要一套適用於所有網站的UX衡量指標，本文介紹了這項計畫以及各種測量方法。"
canonical: "https://www.darrenhuang.com/core-web-vitals-lcp-fid-cls.html"
markdown: "https://www.darrenhuang.com/core-web-vitals-lcp-fid-cls.md"
language: zh-Hant
type: article
published: "2020-06-02T00:00:00.000Z"
modified: "2023-06-26T00:00:00.000Z"
---

> 此 Markdown 版本由正式 HTML 內容自動產生。
> 引用時請使用 [canonical page](https://www.darrenhuang.com/core-web-vitals-lcp-fid-cls.html)。

數位引擎文章

# 網站使用體驗三大核心指標 - LCP, FID, CLS

網站使用體驗指標(Web Vitals)在2020五月由Google所提出，目的是要一套適用於所有網站的UX衡量指標，本文介紹了這項計畫以及各種測量方法。

Darren Huang·2020年6月2日·約 12 分鐘更新於 2023年6月26日

![網站使用體驗核心指標](/wp-content/uploads/2020/06/網站使用體驗核心指標.png)

本文目錄22 個段落

1.  [網站使用體驗指標(Web Vitals)計畫](#intro)
2.  [Web Vitals計畫與SEO的關聯](#web-vitals-and-seo)
3.  [什麼是LCP?](#LCP)
4.  [LCP例子](#section-lcp例子)
5.  [LCP在用戶體驗上的意義](#section-lcp在用戶體驗上的意義)
6.  [什麼是FID?](#FID)
7.  [FID例子](#section-fid例子)
8.  [FID在用戶體驗上的意義](#section-fid在用戶體驗上的意義)
9.  [什麼是CLS?](#CLS)
10.  [CLS例子](#section-cls例子)
11.  [CLS計算方式](#section-cls計算方式)
12.  [CLS在用戶體驗上的意義](#section-cls在用戶體驗上的意義)
13.  [Web Vitals測量/監測工具](#tools)
14.  [瀏覽器插件](#extension)
15.  [Chrome用戶體驗報告(CrUX Report)](#crux)
16.  [Google PageSpeed Insights Tool 網站速度工具](#psi)
17.  [Chrome開發者工具](#devtools)
18.  [WebPagetest.org](#webpagetest)
19.  [Data Studio數據儀錶板](#ds)
20.  [安裝web-vitals並製作自己的工具](#npm)
21.  [Google站長工具](#gsc)
22.  [結語](#final-note)

**本文目錄**

1.  [網站使用體驗指標(Web Vitals)計畫](#intro)
2.  [Web Vitals計畫與SEO的關聯](#web-vitals-and-seo)
3.  [什麼是LCP?](#LCP)
4.  [LCP例子](#section-lcp例子)
5.  [LCP在用戶體驗上的意義](#section-lcp在用戶體驗上的意義)
6.  [什麼是FID?](#FID)
7.  [FID例子](#section-fid例子)
8.  [FID在用戶體驗上的意義](#section-fid在用戶體驗上的意義)
9.  [什麼是CLS?](#CLS)
10.  [CLS例子](#section-cls例子)
11.  [CLS計算方式](#section-cls計算方式)
12.  [CLS在用戶體驗上的意義](#section-cls在用戶體驗上的意義)
13.  [Web Vitals測量/監測工具](#tools)
14.  [瀏覽器插件](#extension)
15.  [Chrome用戶體驗報告(CrUX Report)](#crux)
16.  [Google PageSpeed Insights Tool 網站速度工具](#psi)
17.  [Chrome開發者工具](#devtools)
18.  [WebPagetest.org](#webpagetest)
19.  [Data Studio數據儀錶板](#ds)
20.  [安裝web-vitals並製作自己的工具](#npm)
21.  [Google站長工具](#gsc)
22.  [結語](#final-note)

在2020年五月，Google的Chrome Team定義出衡量網站使用者體驗最重要的三個指標 - L*CP, FID, CLS*，各大網站效能測試工具陸續以此為圭臬，Google Search也宣布將把它們列為SEO的排名因素。這篇文章要來介紹這三項指標，它們為何重要、如何測試、以及標準為何。

* * *

-   [網站使用體驗指標(Web Vitals)計畫介紹](#intro)
-   [Web Vitals計畫與SEO的關聯](http://web-vitals-and-seo)
-   [LCP (最大內容繪製)](#LCP)
-   [FID (首次輸入延遲時間)](#FID)
-   [CLS (累計版面配置轉移)](#CLS)
-   [Web Vitals測量/監測工具](#tools)

    -   [瀏覽器插件](#extension)

    -   [Chrome用戶體驗報告(CrUX Report)](#crux)
    -   [Google PageSpeed Insights Tool 網站速度工具](#psi)
    -   [Chrome開發者工具](http://devtools)
    -   [WebPagetest.org](#webpagetest)
    -   [Data Studio數據儀錶板](#ds)
    -   [安裝web-vitals並製作自己的工具](#npm)
    -   [Google站長工具](#gsc)
-   [結語](#final-note)

* * *

## 網站使用體驗指標(Web Vitals)計畫

網站使用體驗指標(Web Vitals)是Google的一項計畫，在2020年五月推出，**目的是提供適用於所有網站的統一指標，讓網站擁有者能夠量化使用者在瀏覽網頁時的體驗**，找出癥結所在，並加以優化。

**Google目前將LCP, FID, CLS列為網站使用體驗指標中的三個「核心指標」**，這三個指標分別代表了一個網頁的「載入速度」、「互動性」、「穩定性」。核心指標可能隨著時間的推移或技術的進步在未來有所改變。有核心指標當然就有「一般 」 指標，例如TTFB, FCP, TBT, TTI...等，目前都屬於輔助性的一般指標。

* * *

## Web Vitals計畫與SEO的關聯

SEO和用戶體驗(UX)一直都有密不可分的關係。這並不難理解，Google不希望排在搜尋結果前幾名的網頁帶給使用者不好的體驗。

然而用戶體驗是非常難量化的東西，一般網頁可以做A/B測試來看出哪個版本有較好的用戶體驗，但以搜尋引擎的角度來說要找到這個適用於所有網站的統一指標是相當複雜的。

Chrome Team在經過大量的研究後選定了這三個最具代表性的指標，而Google Search Team也宣布[2021年五月](./seo-newsletter-issue-20.html#toc-1)開始將會把這三項指標加入網站的UX評分，成為SEO的排名因素。

![網頁體驗成為SEO排名因素](./wp-content/uploads/2020/06/%E7%B6%B2%E9%A0%81%E9%AB%94%E9%A9%97%E6%88%90%E7%82%BASEO%E6%8E%92%E5%90%8D%E5%9B%A0%E7%B4%A0-1-1024x573.png)

*其他現存的網頁使用體驗排名指標包含: 行動裝置相容性、網站安全性、傳輸安全性、挿頁式廣告。*

**根據[Google的研究](https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html#:~:text=Impact)，網頁如果能將三項指標都控制在"優良"區間，使用者在頁面加載時離開網頁的機率就會降低24%。**另外，Google建議以75%作為目標，站長們應該讓75%以上的使用者都有優良的體驗。

|     | 優良  | 普通  | 不合格 |
| --- | --- | --- | --- |
| LCP, 最大內容繪製 | <2.5秒 | 2.5秒~4.0秒 | \\>=4.0秒 |
| FID, 首次輸入延遲時間 | <100毫秒 | 100毫秒~300毫秒 | \\>=300毫秒 |
| CLS, 累計版面配置轉移 | <0.1 | 0.1~0.25 | \\>=0.25 |

Google所定義出三項指標的優良區間。若對背後的研究科學有興趣，或是75%從哪裡來，可以參考[這篇文章](https://web.dev/defining-core-web-vitals-thresholds/)。

* * *

## 什麼是LCP?

LCP，Largest Contentful Paint或「最大內容繪製」，計算網頁可視區域(viewport)中最大的內容元件載入所需要的時間。換句話說，這項指標標記了頁面上的主要內容被使用者看到所花的時間，相當於網頁給人的第一印象。

![LCP 最大內容繪製](./wp-content/uploads/2020/05/LCP-%E6%9C%80%E5%A4%A7%E5%85%A7%E5%AE%B9%E7%B9%AA%E8%A3%BD-1024x289.png)

**標準:** Google為LCP設下的門檻是2.5秒，小於這個數字就算是好的網站體驗。另外，網站至少要讓75%的使用者都達到LCP < 2.5s才算過關。

### LCP例子

LCP是會改變的，在下圖的CNN例子中，可以看到第一個框架時的LCP是綠色框框裡的"Visual Stories"；在第二~四個框架中，所判定的LCP是標題；然後第五個框架中的LCP是標題下方的圖片。

因為該圖片是最後可視區域上的最大內容元件，因此本頁最後的LCP將以這張圖片載入所需要的時間作為計算。

![](./wp-content/uploads/2020/06/LCP%E4%BE%8B%E5%AD%90-CNN-1024x397.png)

FCP為First Contentful Paint，代表網頁出現可視元件所需要的時間。在這個例子中，CNN網頁的LCP在第五個frame才載入。

在下圖Instagram的例子中，最大內容元件(IG的logo)在第三個框架就已經載好，網頁的可視區域在載入完畢後並沒有出現更大的元件，因此本頁最後的LCP以logo載入所需要的時間作為計算。

![](./wp-content/uploads/2020/06/LCP%E4%BE%8B%E5%AD%90-instagram-1024x397.png)

在這個例子中，IG的logo在第三個frame即載入，並保持最大元件一直到其他元件也載入完畢。

### LCP在用戶體驗上的意義

**最大內容繪製(Largest Contentful Paint, LCP)是三項核心指標裡的「速度」代表**。衡量速度的其他指標還有FCP (First Contentful Paint), FMP (First Meaningful Paint), TTFB(Time to First Byte)...等等非常多種，但LCP卻脫穎而出被選為使用體驗核心指標，因為Google在研究後發現最大可視元件的載入速度最能夠影響使用者感知到的網頁載入速度。

更多LCP參考資料

為何選用LCP來代表速度、那些元件會被納入考量 、影響LCP的主要因素和優化方法為何...等等，如果你有這些問題，歡迎參考下面這些文件。

-   [LCP介紹(web.dev)](https://web.dev/lcp/)
-   [如何優化LCP (web.dev)](https://web.dev/optimize-lcp/)
-   [Web Performance Conference 2020演講: LCP (YouTube)](https://www.youtube.com/watch?v=diAc65p15ag)

* * *

## 什麼是FID?

FID，First Input Delay或「首次輸入延遲時間」，計算使用者第一次與網頁互動(點擊連結、點開下拉選單、填表格...etc)時的延遲時間。這項指標代表了網頁的回應性，在使用者嘗試與網頁互動時是否能馬上回應。

![FID首次輸入延遲時間](./wp-content/uploads/2020/05/FID%E9%A6%96%E6%AC%A1%E8%BC%B8%E5%85%A5%E5%BB%B6%E9%81%B2%E6%99%82%E9%96%93-1024x289.png)

**標準:** Google為FID設下的門檻是0.1秒，小於這個數字就算是好的網站體驗。另外，網站至少要讓75%的使用者都達到FID < 2.5s才算過關。

### FID例子

在載入一個網頁時，瀏覽器會因為主線程(main thread)正在忙碌中而沒辦法即時回應用戶的輸入(user input)，導致使用者可能點了一個按鈕，卻在一些延遲後才出現預期的效果。

![](./wp-content/uploads/2020/06/%E9%A6%96%E6%AC%A1%E8%BC%B8%E5%85%A5%E5%BB%B6%E9%81%B2%E6%99%82%E9%96%93%E9%87%8B%E4%BE%8B-1024x462.png)

在上圖中，使用者在主線程(main thread)忙碌時輸入，就會有延遲時間產生。而FID計算用戶與網頁之間第一次互動的延遲時間。

值得注意的是，使用者如果在兩段黃色區塊間輸入，也就是main thread閒置狀態下輸入，則不會有明顯的延遲(選單點了馬上彈開、鍵盤輸入abc螢幕就馬上跑出abc...)。

### FID在用戶體驗上的意義

**首次輸入延遲時間(First Input Delay, FID)」是三項核心指標裡的「互動性」代表**。衡量互動性的其他指標還有TTI(Time to Interactive), TBT(Total Blocking Time)…等等，但Google最後選擇以FID做為使用體驗的核心指標，因為在研究後發現，第一次的互動延遲最能代表使用者對網頁品質的第一印象，同時互動性的問題也最常發生在網頁尚在載入的時候。

更多FID參考資料

滾動算不算user input、如果使用者沒有和網頁互動怎麼算、那些算是"互動"、為何不用TTI做為網頁的互動性指標...等等，如果你有這些問題，歡迎參考下面這些文章。

-   [FID介紹(web.dev)](https://web.dev/fid/)
-   [如何優化FID (web.dev)](https://web.dev/optimize-fid/)

* * *

## 什麼是CLS?

CLS，Cumulative Layout Shift或「累計版面配置轉移」，計算了網頁元件在載入時的非預期移位。一個"跳來跳去"的網頁會帶給讀者相當不好的用戶體驗。

![CLS累計版面配置轉移](./wp-content/uploads/2020/05/CLS-%E7%B4%AF%E8%A8%88%E7%89%88%E9%9D%A2%E9%85%8D%E7%BD%AE%E8%BD%89%E7%A7%BB-1024x289.png)

**標準:** 網頁元件移位的分數(Layout Shift Score)是一個介於0~1的值，而CLS是所有移位情形的分數加種，因此可能大於1。Google為CLS設下的門檻是0.1，小於這個數字就算是好的網站體驗。另外，網站至少要讓75%的使用者都達到CLS < o.1才算過關。

### CLS例子

因為網頁上物件載入時間不一，而在閱讀上有跳來跳去的惱人體驗不勝枚舉，像痞客邦所架的部落格幾乎都有這樣的問題。

### CLS計算方式

每一次的元件移位都會有個分數，這個分數的計算是`元件移位分數(layout shift score) = 影響範圍(impact fraction) * 移動距離(distance fraction)`，以下圖為例，影響的範圍佔了整個畫面(viewport)的75%，元件的移動距離為畫面高度的25%，因此這次移位的分數為0.75\*0.25=0.1875。

![CLS 計算方法](./wp-content/uploads/2020/06/CLS-%E8%A8%88%E7%AE%97%E6%96%B9%E6%B3%95-1024x770.png)

累計版面配置轉移(CLS)就是在使用者瀏覽網頁時，每次非預期性的元件移位分數加總。

### CLS在用戶體驗上的意義

**累計版面配置轉移(Cumulative Layout Shift)」是三項核心指標裡的「穩定性」代表**。一個跳來跳去的網頁非常容易惹惱使用者，尤其現在很多網頁瀏覽都發生在速度較不穩定的手機裝置上。

更多CLS參考資料

怎麼區分預期和非預期元件移動、版面配置轉移造成的原因有哪些、該怎麼防止這樣的情形...等等，如果你有這些問題，歡迎參考下面這些文章。

-   [CLS介紹 (web.dev)](https://web.dev/cls/)
-   [如何優化CLS (web.dev)](https://web.dev/optimize-cls/)
-   [Web Performance Conference 2020演講: CLS (YouTube)](https://www.youtube.com/watch?v=zIJuY-JCjqw)

* * *

## Web Vitals測量/監測工具

在介紹測量工具之前，必須先了解「實驗室資料(lab data)」和「實際資料(field data)」的不同。以First Input Delay為例，實驗室工具並不會嘗試和網頁"互動"，所以該指標並不會出現在PageSpeed Insights這樣的測量工具上，在互動性的部分會以[Total Blocking Time(封鎖時間總計, TBT)](https://web.dev/tbt/)來替代。

![可以衡量web vitals的工具](./wp-content/uploads/2020/06/Vitals-Tools1-1024x652.png)

[衡量web vitals的工具們](https://web.dev/vitals-tools/)

TBT / Total Blocking Time / 封鎖時間總計

TBT是指FCP到TTI之間，主線程"塞住"的時間加總。TBT是互動性在lab data中的指標。在Google所定義的標準中，小於300毫秒為優良；大於600毫秒為不合格。

詳細可以參考這篇[web.dev文章](https://web.dev/tbt/)。

### 瀏覽器插件

這是官方出的[Chrome挿件](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma)，能夠在瀏覽時即時回報該網頁的LCP, FID, CLS。

![web vitals插件](./wp-content/uploads/2020/06/web-vitals-%E6%8F%92%E4%BB%B6.png)

* * *

### Chrome用戶體驗報告(CrUX Report)

Chrome用戶體驗報告，Chrome User Experience (CrUX) Report，是一個公開的database，紀錄了每個月Chrome用戶在瀏覽網頁時的網頁表現， 而這項公開資料也開始記錄三項web core vitals。

下圖為台灣104人力銀行網站在2020年四月的web vitals表現，這裡的LCP部分可以這樣解讀: *92.08%的使用者在瀏覽104人力銀行網站(www.104.com.tw)時的LCP載入時間是好的(<2500ms)，4.97%普通(>=2500ms, <4000ms)，2.91%不好(>=4000ms)，其中75%的使用者所遇到的LCP小於1.4秒。*

![104人力銀行網站用戶體驗](./wp-content/uploads/2020/05/104%E4%BA%BA%E5%8A%9B%E9%8A%80%E8%A1%8C%E7%B6%B2%E7%AB%99%E7%94%A8%E6%88%B6%E9%AB%94%E9%A9%97-1024x665.png)

這樣的畫面可以利用Google BigQuery跑出來，詳細可以[參考這裡](https://github.com/GoogleChrome/CrUX/blob/master/sql/core-web-vitals.sql)。

* * *

### Google PageSpeed Insights Tool 網站速度工具

Google的[PageSpeed Insights Tool](https://developers.google.com/speed/pagespeed/insights/?hl=zh-TW)跑出的報告中也包括了三個web vitals指標。

![](./wp-content/uploads/2020/06/PageSpeed-Insights-Tool-%E8%A8%88%E7%AE%97web-vitals.png)

註: 「互動性」以TBT代替FID，因為測試工具不會和網頁互動。

* * *

### Chrome開發者工具

從Chrome的開發者工具裡的Lighthouse(前身為Audits)，也能直接跑出Lighthouse的報告。

![Chrome開發者工具計算Web Vitals](./wp-content/uploads/2020/06/Chrome%E9%96%8B%E7%99%BC%E8%80%85%E5%B7%A5%E5%85%B7-web-vitals.png)

* * *

### WebPagetest.org

[WebPageTest](https://webpagetest.org/)是在筆者在測試網頁效能時最寫歡用的一項工具，這項工具現在將Web Vitals作為報告裡的重要指標，同時也會在網頁載入的逐格影片中秀出Chrome所判定的LCP，並用紅色線條框出來。

> Twitter／X 貼文
>
> [在 Twitter／X 查看原始貼文](https://twitter.com/patmeenan/status/1260294231589113859)

* * *

### Data Studio數據儀錶板

官方有出一個利用CrUX資料做出來的數據儀表般，如果對BigQuery不熟悉可以直接套用這份的[模板](http://g.co/chromeuxdash)。

![](./wp-content/uploads/2020/06/CrUX%E5%84%80%E9%8C%B6%E6%9D%BF-1024x537.png)

* * *

### 安裝`web-vitals`並製作自己的工具

開發者可以將`web vitals`這套約莫1K左右的小型library與自己的工具/網站結合，安裝後就可以輕鬆的調用指標，例如`getCLS()`,`getFID()`, `getLCP()`，官方有相當[完整的指南](https://github.com/GoogleChrome/web-vitals/#overview)可以參考。

上述的文檔中也有用Google Analytics紀錄web vitals資料的教學，筆者實際操作後有成功將web vitals以事件的方式記錄到Google Analytics中。

![](./wp-content/uploads/2020/06/GA%E7%B4%80%E9%8C%84web-vitals-1024x189.png)

以下為測試時使用的代碼，如果有更好的方法歡迎留言分享!

```
<!-- 將以下代碼加入Header-->
<script src="https://unpkg.com/web-vitals@0.2.2/dist/web-vitals.es5.umd.min.js"></script>
<!– 將以下代碼加入Footer –>
<script>
function sendToGoogleAnalytics({name, delta, id}) {
// 假設網站已經有一般的GA代碼
ga(‘send’, ‘event’, {
eventCategory: ‘Web Vitals’,
eventAction: name,
// GA裡的event value必須為整數，因此四捨五入
// 另外CLS分數會乘以1000
eventValue: Math.round(name === ‘CLS’ ? delta * 1000 : delta),
// 每一次的頁面載入都有獨特的“ID”，用以累加CLS
eventLabel: id,
// 將事件設為非互動性(non-interactive)
nonInteraction: true,
});
}
addEventListener(‘DOMContentLoaded’, function() {
webVitals.getCLS(sendToGoogleAnalytics);
webVitals.getFID(sendToGoogleAnalytics);
webVitals.getLCP(sendToGoogleAnalytics);
});
```

* * *

### Google站長工具

Google Search Console裡將原本的「速度報告」改為「網站使用體驗核心指標報告」。資料來源是CrUX，意即實際使用者在瀏覽網站的資料。[官方文件](https://support.google.com/webmasters/answer/9205520?hl=zh-Hant)有更多解釋。

![](./wp-content/uploads/2020/06/google%E7%AB%99%E9%95%B7%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8%E9%AB%94%E9%A9%97%E6%A0%B8%E5%BF%83%E6%8C%87%E6%A8%99-176x300.png)

* * *

## 結語

網站效能(Web Performance)是SEO工作上時常會接觸到的一塊，現在有了Google幫大家選出來的三項標準指標，就可以在和工程師討論時省下一些決定KPIs的功夫。另外Google宣布將把web vitals列為排名因素，想必優化這些項目會成為很多站長們下半年度的目標。

以上是筆者對於這一次web vitals計畫的整理，如果有錯誤或不清楚的地方還請留言指正；若這樣的內容對你有幫助歡迎訂閱電子報或關注[數位引擎](https://www.facebook.com/searchenginecommunity/)臉書粉絲頁!

**分類**

-   [SEO相關](/categories/seo相關.html)

**標籤**

-   [SEO相關](/tags/seo相關.html)

Keep exploring

## 延伸閱讀

Facebook 保存筆記

2023年5月14日

### [從 FID 到 INP：互動回應速度指標的歷史轉換](/notes/facebook-fid-to-inp.html)

保存 2023 年記錄 Core Web Vitals 指標轉換的說明，從使用者互動到下一個畫面繪製，理解 INP 想測量的體驗問題。

Facebook 保存筆記

2021年4月8日

### [Core Web Vitals 官方問答：分數、資料與排名的歷史筆記](/notes/facebook-cwv-faq.html)

保存 2021 年 Core Web Vitals 上線前整理的官方問答，聚焦 LCP、FID、CLS 的資料計算方式與排名影響邊界。

Facebook 保存筆記

2020年3月9日

### [行動版內容優先索引：Dynamic Serving 別忘了 Vary](/notes/facebook-mobile-first-indexing.html)

保存一則工作案例，說明 Dynamic Serving 依 User-Agent 回傳不同 HTML 時，為什麼 HTTP 的 Vary: User-Agent 可能成為重要的快取訊號。

Keep exploring

## 繼續閱讀

[全部文章 →](/articles.html)

### 相關文章

2020年5月27日

#### [SEO搜尋引擎原理 - 爬蟲抓取篇](/how-search-engines-crawl.html)

[閱讀文章 →](/how-search-engines-crawl.html)

2020年4月27日

#### [SEO遊戲 - 尋找隱藏關鍵字](/seo-puzzle-hidden-keywords.html)

[閱讀文章 →](/seo-puzzle-hidden-keywords.html)

2020年10月21日

#### [片段資訊檢索(Passage Retrieval)介紹](/passage-retrieval-and-seo.html)

[閱讀文章 →](/passage-retrieval-and-seo.html)

×

開啟原圖 ↗