衡量一個(gè) Web 頁(yè)面的體驗(yàn)和質(zhì)量一直有非常多的工具和指標(biāo) ... 每次我們?nèi)リP(guān)注這些指標(biāo)的時(shí)候都會(huì)非常痛苦，因?yàn)檫@些指標(biāo)真的是又多又難理解，測(cè)量這些指標(biāo)的工具也非常多。

當(dāng)看到最近發(fā)布的 Chrome 83 中又增加了幾個(gè)性能指標(biāo)的時(shí)候我頭都大了...

然而不要著急，這些指標(biāo)就是為了聚焦關(guān)注度和降低理解成本的，下面我們就來(lái)具體看一下，新增加的 Core Web Vitals 到底是什么東西？

如何衡量用戶體驗(yàn)質(zhì)量？

[[327657]]

優(yōu)化用戶體驗(yàn)的質(zhì)量一直都是是每個(gè) Web 站點(diǎn)長(zhǎng)期成功的關(guān)鍵，衡量用戶體驗(yàn)的質(zhì)量有很多方面。雖然用戶體驗(yàn)的某些方面是需要基于特定于站點(diǎn)和上下文的，但是所有站點(diǎn)仍然有一組共同的指標(biāo)——Core Web Vitals，這些指標(biāo)包括加載體驗(yàn)、交互性和頁(yè)面內(nèi)容的視覺穩(wěn)定性，他們構(gòu)成了 2020 年核心 Web 健康指標(biāo)的基礎(chǔ)。

多年來(lái)，Google 提供了很多工具：(Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console's Speed Report) 來(lái)衡量和報(bào)告性能。一些開發(fā)人員是使用這些工具的專家，而大部分其他人則發(fā)現(xiàn)大量的工具和衡量標(biāo)準(zhǔn)都很難學(xué)習(xí)和使用。

網(wǎng)站開發(fā)者不應(yīng)該為了理解他們交付給用戶的體驗(yàn)的質(zhì)量指標(biāo)而成為性能專家。Web Vitals 計(jì)劃的目的就是簡(jiǎn)化場(chǎng)景，降低學(xué)習(xí)成本，并幫助站點(diǎn)關(guān)注最重要的指標(biāo)，即 Core Web Vitals。

Core Web Vitals

Core Web Vitals 是應(yīng)用于所有 Web 頁(yè)面的 Web Vitals 的子集，所有的站點(diǎn)開發(fā)者都應(yīng)該關(guān)注一下，他們將在所有谷歌提供的性能測(cè)試工具中進(jìn)行顯示。每個(gè) Core Web Vitals 代表用戶體驗(yàn)的一個(gè)不同方面，在該領(lǐng)域是可衡量的，并反映了以用戶為中心的關(guān)鍵結(jié)果的真實(shí)體驗(yàn)。

網(wǎng)頁(yè)核心的性能指標(biāo)應(yīng)該是隨著時(shí)間的推移而不斷演變的。當(dāng)前 2020 年主要關(guān)注用戶體驗(yàn)的三個(gè)方面——加載、交互性和視覺穩(wěn)定性:

•  Largest Contentful Paint (LCP): 衡量加載體驗(yàn)：為了提供良好的用戶體驗(yàn)， LCP 應(yīng)該在頁(yè)面首次開始加載后的 2.5 秒內(nèi)發(fā)生。
•  First Input Delay (FID): 衡量可交互性，為了提供良好的用戶體驗(yàn)，頁(yè)面的 FID 應(yīng)當(dāng)小于 100毫秒。
•  Cumulative Layout Shift (CLS):衡量視覺穩(wěn)定性，為了提供良好的用戶體驗(yàn)，頁(yè)面的CLS應(yīng)保持小于 0.1。

下面我們來(lái)詳細(xì)介紹這三種性能指標(biāo)：

LCP

加載體驗(yàn)的衡量

衡量 Web 頁(yè)主要內(nèi)容的加載速度是眾多開發(fā)者一直在關(guān)注的一個(gè)點(diǎn)，而且可衡量的指標(biāo)非常多。

比如最早的 load、DOMContentLoaded 事件，用這兩個(gè)事件來(lái)衡量頁(yè)面加載速度是非常糟糕的，因?yàn)樗鼈儾灰欢ㄅc用戶在屏幕上看到的內(nèi)容相對(duì)應(yīng)。

以用戶為中心的更新性能指標(biāo)（例如First Contentful Paint（FCP））它只能捕捉加載體驗(yàn)的最開始。如果頁(yè)面最開始顯示的是一個(gè) loading 動(dòng)畫，那這個(gè)指標(biāo)就很難關(guān)注了。

后來(lái)，業(yè)界開始建議使用比如 First Meaningful Paint (FMP) 和 Speed Index (SI)（都可以在 Lighthouse 中獲?。┑刃阅苤笜?biāo)來(lái)幫助捕獲初次渲染后的更多加載體驗(yàn)，但是這些指標(biāo)非常復(fù)雜，難以解釋，而且誤報(bào)率也比較高。

什么是 LCP

Largest Contentful Paint (LCP) 用于衡量標(biāo)準(zhǔn)報(bào)告視口內(nèi)可見的最大內(nèi)容元素的渲染時(shí)間。為了提供良好的用戶體驗(yàn)，網(wǎng)站應(yīng)努力在開始加載頁(yè)面的前 2.5 秒內(nèi)進(jìn)行 最大內(nèi)容渲染 。

相比 FCP ，這個(gè)指標(biāo)就非常有價(jià)值了，因?yàn)檫@個(gè)值是根據(jù)頁(yè)面加載渲染不斷變化的，如果頁(yè)面有一個(gè) lodaing 動(dòng)畫，然后才渲染出具體內(nèi)容，那么這個(gè)指標(biāo)計(jì)算出來(lái)的就是具體內(nèi)容的加載速度，而非 lodaing 動(dòng)畫的加載速度。

LCP 考慮哪些元素

LCP 目前并不會(huì)計(jì)算所有元素，因?yàn)檫@樣會(huì)使這個(gè)指標(biāo)變得非常復(fù)雜，它現(xiàn)在只關(guān)注下面的元素：    <img> 元素

•  <image>元素內(nèi)的<svg>元素
•  <video> 元素
•  通過 url() 函數(shù)加載背景圖片的元素
•  包含文本節(jié)點(diǎn)或其他內(nèi)聯(lián)文本元素子級(jí)的塊級(jí)元素。

為了在開始時(shí)保持簡(jiǎn)單，將元素限制到這個(gè)有限的集合是有意的。隨著研究的深入，將來(lái)可能會(huì)添加更多的元素。

如何計(jì)算 LCP ?

頁(yè)面上最大的元素即繪制面積最大的元素，所謂繪制面積可以理解為每個(gè)元素在屏幕上的 “占地面積”，如果元素延伸到屏幕外，或者元素被裁切了一部分，被裁切的部分不算入在內(nèi)，只有真正顯示在屏幕里的才算數(shù)。

圖片元素的面積計(jì)算方式稍微有點(diǎn)不同，因?yàn)榭梢酝ㄟ^ CSS 將圖片擴(kuò)大或縮小顯示，也就是說(shuō)，圖片有兩個(gè)面積：“渲染面積”與“真實(shí)面積”。在 LCP 的計(jì)算中，圖片的繪制面積將獲取較小的數(shù)值。例如：當(dāng)“渲染面積”小于“真實(shí)面積”時(shí)，“繪制面積”為“渲染面積”，反之亦然。

頁(yè)面在加載過程中，是線性的，元素是一個(gè)一個(gè)渲染到屏幕上的，而不是一瞬間全渲染到屏幕上，所以“渲染面積”最大的元素隨時(shí)在發(fā)生變化。

如果元素被刪除，LCP算法將不再考慮該元素，如果被刪除的元素剛好是 “繪制面積” 最大的元素，則使用新的 “繪制面積” 最大的元素創(chuàng)建一個(gè)新的性能條目。

該過程將持續(xù)到用戶第一次滾動(dòng)頁(yè)面或第一次用戶輸入（鼠標(biāo)點(diǎn)擊，鍵盤按鍵等），也就是說(shuō)，一旦用戶與頁(yè)面開始產(chǎn)生交互，則停止報(bào)告新的性能指標(biāo)。

在以上兩個(gè)時(shí)間軸中，最大的元素隨內(nèi)容加載而變化。在第一個(gè)示例中，新內(nèi)容被添加到 DOM 中，并且更改了最大的元素。在第二個(gè)示例中，布局發(fā)生更改，以前最大的內(nèi)容從視口中刪除。通常情況下，延遲加載的內(nèi)容要大于頁(yè)面上已存在的內(nèi)容。

改善 LCP

LCP較差的最常見原因是：

•  服務(wù)器響應(yīng)時(shí)間慢
•  阻斷渲染的 Javascript 和 CSS
•  資源加載時(shí)間慢
•  客戶端渲染

所以我們從上面的角度去考慮改善 LCP：

優(yōu)化服務(wù)器

這個(gè)很好理解，瀏覽器從服務(wù)器接收內(nèi)容所需的時(shí)間越長(zhǎng)，則在屏幕上呈現(xiàn)任何內(nèi)容所花費(fèi)的時(shí)間就越長(zhǎng)。更快的服務(wù)器響應(yīng)時(shí)間可以直接改善包括 LCP 在內(nèi)的所有頁(yè)面加載指標(biāo)。

[[327658]]

衡量服務(wù)器相應(yīng)時(shí)間有一個(gè)專門的指標(biāo)：首字節(jié)相應(yīng)時(shí)間（TTFB）是最初的網(wǎng)絡(luò)請(qǐng)求被發(fā)起到從服務(wù)器接收到第一個(gè)字節(jié)這段時(shí)間，它包含了 TCP 連接時(shí)間，發(fā)送 HTTP 請(qǐng)求時(shí)間和獲得響應(yīng)消息第一個(gè)字節(jié)的時(shí)間。你可以嘗試在下面幾個(gè)方便優(yōu)化 TTFB ：

•  緩存 HTML 離線頁(yè)面，緩存頁(yè)面資源，減少瀏覽器對(duì)資源的請(qǐng)求。
•  盡量減小資源阻斷渲染：CSS 和 JavaScript 壓縮、合并、級(jí)聯(lián)、內(nèi)聯(lián)等等
•  對(duì)圖片進(jìn)行優(yōu)化。轉(zhuǎn)化圖片的格式為 JPG 或者 WEBP 等等的格式，降低圖片的大小，以加快請(qǐng)求的速度。
•  對(duì) HTML 重寫、壓縮空格、去除注釋等。減少 HTML 大小，加快速度。
•  使用 preconnect 盡快與服務(wù)器建立鏈接、使用 dns-prefetch 盡快進(jìn)行 DNS 查找。
•  使用 CDN 加快請(qǐng)求速度

優(yōu)化阻斷渲染的資源

JavaScript 和 CSS 都是會(huì)阻斷頁(yè)面渲染的資源，需要盡可能的對(duì) CSS 和 JavaScript 文件進(jìn)行壓縮、延遲加載首屏無(wú)需使用的 JavaScript、內(nèi)聯(lián)關(guān)鍵的 CSS 等來(lái)減小阻斷時(shí)間。

優(yōu)化資源加載時(shí)間

剛才我們上面提到的這些資源，如果在首屏進(jìn)行渲染，則加載這些元素所花費(fèi)的時(shí)間將直接影響 LCP 。

•  <img> 元素
•  <image>元素內(nèi)的<svg>元素
•  <video> 元素
•  通過 url() 函數(shù)加載背景圖片的元素
•  包含文本節(jié)點(diǎn)或其他內(nèi)聯(lián)文本元素子級(jí)的塊級(jí)元素。

你可以使用下面的手段進(jìn)行優(yōu)化：

•  對(duì)圖片進(jìn)行優(yōu)化。轉(zhuǎn)化圖片的格式為 JPG 或者 WEBP 等等的格式，降低圖片的大小。
•  對(duì)重要的資源進(jìn)行預(yù)加載，比如為 style 標(biāo)簽添加 rel="preload" 屬性
•  使用 Gzip 和 Brotli 壓縮頁(yè)面資源，降低傳輸時(shí)間
•  使用 service worker 緩存資源

服務(wù)端渲染

使用服務(wù)端渲染可以確保首先在服務(wù)器上呈現(xiàn)頁(yè)面內(nèi)容，可以有效改善 LCP，但是相比客戶端渲染的缺點(diǎn)是會(huì)加大頁(yè)面從而影響 TTFB、服務(wù)端渲染需要等待所有 js 執(zhí)行完畢后才能相應(yīng)用戶輸入，這會(huì)使交互體驗(yàn)變差。

FID

第一印象

我們都知道留下一個(gè)好的第一印象是多么重要。在網(wǎng)絡(luò)上，一個(gè)好的第一印象可以決定一個(gè)人是不是可以成為一個(gè)網(wǎng)站的忠實(shí)的用戶，或者是離開以后再也不會(huì)回來(lái)。問題是，什么能給人留下好印象，你如何衡量你可能給用戶留下什么樣的印象?

在網(wǎng)絡(luò)上，第一印象可以有很多種不同的形式——我們對(duì)網(wǎng)站的設(shè)計(jì)和視覺吸引力有第一印象，對(duì)其速度和響應(yīng)能力也有第一印象。

開發(fā)者們使用 First Contentful Paint（FCP） 可以衡量對(duì)網(wǎng)站加載速度對(duì)第一印象 。但是，網(wǎng)站可以在屏幕上繪制像素的速度只是一部分，同樣重要的是用戶嘗試與這些像素進(jìn)行交互時(shí)你的網(wǎng)站的響應(yīng)速度！

什么是 FID

FID（ First Input Delay） 即記錄用戶和頁(yè)面進(jìn)行首次交互操作所花費(fèi)的時(shí)間 。FID 指標(biāo)影響用戶對(duì)頁(yè)面交互性和響應(yīng)性的第一印象。 為了提供良好的用戶體驗(yàn)，站點(diǎn)應(yīng)努力使首次輸入延遲小于 100 毫秒。

FID 發(fā)生在 FCP 和 TTI 之間，因?yàn)檫@個(gè)階段雖然頁(yè)面已經(jīng)顯示出部分內(nèi)容，但尚不具備完全的可交互性。這個(gè)階段用戶和頁(yè)面交互，往往會(huì)有較大延遲。

如上圖所示，瀏覽器接收到用戶輸入操作時(shí)，主線程正在忙于執(zhí)行一個(gè)耗時(shí)比較長(zhǎng)的任務(wù)，只有當(dāng)這個(gè)任務(wù)執(zhí)行完成后，瀏覽器才能響應(yīng)用戶的輸入操作。它必須等待的時(shí)間就此頁(yè)面上該用戶的 FID 值。

例如，以下所有 HTML 元素都需要在響應(yīng)用戶交互之前等待主線程上正在進(jìn)行的任務(wù)完成：

•  文本輸入框，復(fù)選框和單選按鈕（<input>，<textarea>）
•  選擇下拉菜單（<select>）
•  鏈接（<a>）

如何提高 FID

以下幾個(gè)方面是提高 FID 的重要指標(biāo)：

減少 JavaScript 執(zhí)行時(shí)間

同上面改善 LCP 的方法：

•  縮小并壓縮 JavaScript 文件
•  延遲加載首屏不需要的 JavaScript
•  盡量減少未使用的 polyfill

分解耗時(shí)任務(wù)

上面提到一個(gè)較長(zhǎng)的耗時(shí)任務(wù)是影響 FID 的重要指標(biāo)，任何阻塞主線程 50 毫秒或更長(zhǎng)時(shí)間的代碼段都可以稱為“長(zhǎng)任務(wù)”，我們可以將長(zhǎng)的耗時(shí)任務(wù)拆分為較小的異步任務(wù)。

使用 Web Worker

主線程阻塞是輸入延遲的主要原因之一。Web Workers 可以讓你在與主執(zhí)行線程分離的后臺(tái)線程上運(yùn)行 JavaScript，這樣做的好處是可以在一個(gè)單獨(dú)的線程中執(zhí)行費(fèi)時(shí)的處理任務(wù)，從而允許主（通常是UI）線程運(yùn)行而不被阻塞。將非 UI 操作移至單獨(dú)的工作線程可以減少主線程的阻塞時(shí)間，從而改善 FID 。

CLS

視覺穩(wěn)定性

您是否曾經(jīng)在訪問一個(gè) Web 頁(yè)面時(shí)發(fā)生下面的情況？在閱讀文章的同時(shí)文字突然移動(dòng)了、你突然找不到你閱讀的位置了、點(diǎn)按鈕的時(shí)候按鈕被移動(dòng)到了其他地方，導(dǎo)致你點(diǎn)了其他東西？

頁(yè)面內(nèi)容的意外移動(dòng)通常是由于異步加載資源或?qū)?DOM 元素動(dòng)態(tài)添加到現(xiàn)有內(nèi)容上方的頁(yè)面而發(fā)生的。罪魁禍?zhǔn)卓赡苁浅叽缥粗膱D像或視頻，渲染后比其后備更大或更小的字體，或者是動(dòng)態(tài)調(diào)整自身大小的第三方廣告或小部件。

Cumulative Layout Shift (CLS) 可通過測(cè)量實(shí)際用戶發(fā)生的頻率來(lái)幫助您解決此問題。

什么是 CLS？

CLS 會(huì)測(cè)量在頁(yè)面的整個(gè)生命周期中發(fā)生的每個(gè)意外的樣式移動(dòng)的所有單獨(dú)布局更改得分的總和。布局的移動(dòng)可能發(fā)生在可見元素從一幀到下一幀改變位置的任何時(shí)候。為了提供良好的用戶體驗(yàn)，網(wǎng)站應(yīng)努力使 CLS 分?jǐn)?shù)小于 0.1 。

如何計(jì)算 CLS?

布局偏移分值

為了計(jì)算布局的偏移值，瀏覽器會(huì)查看兩個(gè)渲染幀之間的視口大小和視口中不穩(wěn)定元素的移動(dòng)。布局偏移分是該移動(dòng)的兩個(gè)指標(biāo)的乘積:影響分?jǐn)?shù)和距離分?jǐn)?shù)。 

layout shift score = impact fraction * distance fraction 

影響分?jǐn)?shù)

前一幀和當(dāng)前幀的所有不穩(wěn)定元素的可見區(qū)域的并集（占視口總面積的一部分）是當(dāng)前幀的影響分?jǐn)?shù)。

在上圖中，有一個(gè)元素在一幀中占據(jù)了視口的一半。然后，在下一幀中，元素下移視口高度的25％。紅色的虛線矩形表示兩個(gè)幀中元素的可見區(qū)域的并集，在這種情況下，其為總視口的75％，因此其影響分?jǐn)?shù)為 0.75。

距離分?jǐn)?shù)

布局偏移值方程的另一部分測(cè)量不穩(wěn)定元素相對(duì)于視口移動(dòng)的距離。距離分?jǐn)?shù)是任何不穩(wěn)定元素在框架中移動(dòng)的最大距離(水平或垂直)除以視口的最大尺寸(寬度或高度，以較大的為準(zhǔn))。

在上面的例子中，最大的視口尺寸是高度，并且不穩(wěn)定元素移動(dòng)了視口高度的25%，這使得距離分?jǐn)?shù)為0.25。

因此，在此示例中，影響分?jǐn)?shù)為0.75，距離分?jǐn)?shù)為0.25，因此版式位移分?jǐn)?shù)為0.75 * 0.25 = 0.1875。

如何改善 CLS?

不要使用無(wú)尺寸元素

圖像和視頻等元素上始終需要包括 width 和 height 尺寸屬性，現(xiàn)代瀏覽器會(huì)根據(jù)圖像的 width 和 height 屬性設(shè)置圖像的默認(rèn)長(zhǎng)寬比，知道縱橫比后，瀏覽器就可以為元素計(jì)算和保留足夠的空間。

或者，使用 aspect-ratio 也可以提前指定寬高比： 

img {  
    aspect-ratio: attr(width) / attr(height);  
} 

那響應(yīng)式的圖片呢？可以使用 srcset 定義圖像，使瀏覽器可以在圖像之間進(jìn)行選擇，以及每個(gè)圖像的大小。 

<img   
    width="1000"   
    height="1000"  
    src="puppy-1000.jpg"  
    srcset="puppy-1000.jpg 1000w,  
            puppy-2000.jpg 2000w,  
            puppy-3000.jpg 3000w"  
    alt="ConardLi"  
/> 

•  永遠(yuǎn)不要在現(xiàn)有內(nèi)容之上插入內(nèi)容，除非是響應(yīng)用戶交互。這確保了預(yù)期的布局變化。
•  寧可轉(zhuǎn)換動(dòng)畫，也不要轉(zhuǎn)換觸發(fā)布局變化的屬性的動(dòng)畫。以一種提供從一個(gè)狀態(tài)到另一個(gè)狀態(tài)的上下文和連續(xù)性的方式動(dòng)畫轉(zhuǎn)換。

提前給廣告位預(yù)留空間

很多頁(yè)面廣告都是動(dòng)態(tài)插入的，所以一定要提前為廣告位預(yù)留一定空間。

警惕字體變化

字體通常是大文件，需要一段時(shí)間才能加載，一些瀏覽器直到下載完字體后才呈現(xiàn)文本

font-display: swap 告訴瀏覽器默認(rèn)使用系統(tǒng)字體進(jìn)行渲染，當(dāng)自定義字體下載完成之后再進(jìn)行替換。 

@font-face {  
  font-family: 'Pacifico';  
  font-style: normal;  
  font-weight: 400;  
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/xxx.woff2) format('woff2');  
  font-display: swap;  
} 

另外，你可以使用 <link rel="preload"> 更早的加載字體文件。

獲取 Core Web Vitals

Google 認(rèn)為，Core Web Vitals 對(duì)于所有網(wǎng)絡(luò)體驗(yàn)都至關(guān)重要。因此，它致力于在其工具中顯示這些指標(biāo)，下面是現(xiàn)有工具中指標(biāo)的支持情況：

尚未支持這些指標(biāo)的工具都將在最近得到支持。

web-vitals

現(xiàn)在你可以使用標(biāo)準(zhǔn)的 Web API 在 JavaScript 中測(cè)量每個(gè)指標(biāo)。 Google 提供了一個(gè) npm 包：web-vitals，這個(gè)庫(kù)提供了非常簡(jiǎn)單的 API，測(cè)量每個(gè)指標(biāo)就像調(diào)用一個(gè)普通函數(shù)一樣簡(jiǎn)單： 

npm install web-vitals 

每個(gè)測(cè)量函數(shù)都接收一個(gè) report 回調(diào)函數(shù)作為參數(shù)，回調(diào)函數(shù)將在測(cè)量完成后觸發(fā)，另外，對(duì)于像 LCP 和 CLS 這樣的指標(biāo)是不斷變化的，所以它們的回調(diào)函數(shù)可能會(huì)多次觸發(fā)，如果你想獲取在這期間獲取每次變化的數(shù)值，你可以指定第二個(gè)參數(shù) reportAllChanges，否則回調(diào)函數(shù)只有在最終測(cè)量完成后觸發(fā)一次。 

import {getCLS, getFID, getLCP} from 'web-vitals';  
getCLS(console.log, true);  
getFID(console.log); // Does not take a `reportAllChanges` param.  
getLCP(console.log, true); 

這些變化的指標(biāo)如果觸發(fā)多次的話可能會(huì)多次發(fā)送到你的服務(wù)器，所以回調(diào)函數(shù)中提供了下面三個(gè)參數(shù)：

•  name：指標(biāo)名稱
•  id：本地分析的id
•  delta：當(dāng)前值和上次獲取值的差值

因此你只需要每次上報(bào) delta (當(dāng)前值和上次獲取值的差值)，而不需要報(bào)告新值。然后在服務(wù)器可以通過計(jì)算所有id對(duì)應(yīng)值的和來(lái)獲取最終結(jié)果。

import {getCLS, getFID, getLCP} from 'web-vitals';  
function logDelta({name, id, delta}) {  
  console.log(`${name} matching ID ${id} changed by ${delta}`);  
}  
getCLS(logDelta, true);  
getFID(logDelta);  
getLCP(logDelta, true); 

你可以很好的結(jié)合 Google Analytics 來(lái)記錄你的上報(bào)指標(biāo)： 

import {getCLS, getFID, getLCP} from 'web-vitals';  
function sendToGoogleAnalytics({name, delta, id}) {  
  ga('send', 'event', {  
    eventCategory: 'Web Vitals',  
    eventAction: name,  
    eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta), 
    eventLabel: id,  
    nonInteraction: true,  
  });  
}  
getCLS(sendToGoogleAnalytics);  
getFID(sendToGoogleAnalytics);  
getLCP(sendToGoogleAnalytics); 

使用 Chrome 插件

如果你不想在程序中計(jì)算，還可以使用 Chrome 插件這樣更方便的方式，Google 也提供了一個(gè)新的插件 web-vitals-extension 來(lái)幫助我們獲取這些指標(biāo)：

這個(gè)插件非常簡(jiǎn)潔，只有 CLS、FID、LCP 這三個(gè)核心指標(biāo)，這樣可以大大聚焦我們的關(guān)注度，降低理解成本。

徽章的顏色可以告訴你頁(yè)面有沒有通過默認(rèn)設(shè)定的閾值：

•  灰色：插件不支持或者被禁用
•  綠色：通過所有指標(biāo)
•  紅色：一個(gè)或多個(gè)指標(biāo)不達(dá)標(biāo)

參考

•  https://web.dev/vitals/
•  https://web.dev/lcp/
•  https://web.dev/fid/
•  https://web.dev/cls/
•  https://github.com/GoogleChro...
•  https://github.com/GoogleChro...
•  https://developers.google.com...

小結(jié)

最后，想在瀏覽器中使用上面的工具和指標(biāo)？快升級(jí)一下 Chrome 83 版本吧～，更多 Chrome 83 的更新可以點(diǎn)擊 Chrome 83 發(fā)布，支持直接讀寫本地文件！新的跨域策略! 查看。

文中如有錯(cuò)誤，歡迎在評(píng)論區(qū)指正，如果這篇文章幫助到了你，歡迎點(diǎn)贊和關(guān)注。

想閱讀更多優(yōu)質(zhì)文章、可關(guān)注我的github博客，你的star✨、點(diǎn)贊和關(guān)注是我持續(xù)創(chuàng)作的動(dòng)力！

推薦關(guān)注我的微信公眾號(hào)【code秘密花園】，每天推送高質(zhì)量文章，我們一起交流成長(zhǎng)。