什么是Web Vitals汛蝙？
近幾年來(lái)质帅，好的用戶體驗(yàn)已經(jīng)是衡量一個(gè)網(wǎng)站是否是一個(gè)好網(wǎng)站的重要指標(biāo)，優(yōu)化用戶體驗(yàn)的質(zhì)量是任何網(wǎng)站長(zhǎng)期成功的關(guān)鍵硬梁。無(wú)論您是Boss前硫、BA，PO還是DEV荧止，Web vital都可以幫助您量化站點(diǎn)的體驗(yàn)屹电，并確定改進(jìn)的機(jī)會(huì)。
Web vitals 是一個(gè)由谷歌發(fā)起的跃巡，為網(wǎng)站的質(zhì)量提供統(tǒng)一的指導(dǎo)(guideline)危号，這對(duì)于在Web上提供良好的用戶體驗(yàn)至關(guān)重要。
Google提供了一系列的metrics來(lái)measure一個(gè)網(wǎng)站的性能素邪，例如FCP外莲， TTFP，TTI等等兔朦，同時(shí)也提供了一系列的工具來(lái)獲取這些metrics的report偷线。https://developers.google.com/web/tools/chrome-user-experience-report
Web vital倡議旨在簡(jiǎn)化景觀，并幫助網(wǎng)站關(guān)注最重要的指標(biāo)沽甥，即 Core Web vital声邦。
什么是Core web vitals？
Core web vital是web vital的子集摆舟，適用于所有的網(wǎng)頁(yè)亥曹，應(yīng)該由所有的網(wǎng)站所有者衡量，并將出現(xiàn)在所有的谷歌工具恨诱。每一個(gè)Core web vital都代表了用戶體驗(yàn)的不同方面媳瞪，在領(lǐng)域中是可測(cè)量的，并反映了以用戶為中心的關(guān)鍵結(jié)果的真實(shí)體驗(yàn)照宝。
組成Core web vitals的metrics是會(huì)隨著時(shí)間的改變而改變的蛇受。但在2020年主要focus在用戶體驗(yàn)的下面三個(gè)方面， loading, interactivity, and visual stability厕鹃，他們分別用下面三個(gè)metric來(lái)度量
- Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
- Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.
為什么要考慮Core web vitals龙巨？
- 更好的用戶體驗(yàn)
- traffic笼呆，引流
LCP， FID旨别， CLS是什么诗赌？
LCP： https://web.dev/lcp/
最大內(nèi)容繪制 (LCP) 指標(biāo)會(huì)根據(jù)頁(yè)面首次開始加載的時(shí)間點(diǎn)來(lái)報(bào)告可視區(qū)域內(nèi)可見(jiàn)的最大圖像或文本塊完成渲染的相對(duì)時(shí)間。
LCP之前的相關(guān)屬性：諸如load（加載）或DOMContentLoaded（DOM 內(nèi)容加載完畢）這樣的舊有指標(biāo)并不是很好秸弛，因?yàn)檫@些指標(biāo)不一定與用戶在屏幕上看到的內(nèi)容相對(duì)應(yīng)铭若。而像First Contentful Paint 首次內(nèi)容繪制 (FCP)這類以用戶為中心的較新性能指標(biāo)只會(huì)捕獲加載體驗(yàn)最開始的部分。如果某個(gè)頁(yè)面顯示的是一段啟動(dòng)畫面或加載指示递览，那么這些時(shí)刻與用戶的關(guān)聯(lián)性并不大叼屠。
我們以往推薦過(guò)一些性能指標(biāo)，例如First Meaningful Paint 首次有效繪制 (FMP)和Speed Index 速度指數(shù) (SI) （兩個(gè)指標(biāo)都包含在燈塔工具中）绞铃，這些指標(biāo)有助于捕獲到更多初始繪制后的加載體驗(yàn)镜雨，但這些指標(biāo)十分復(fù)雜、難以解釋儿捧，而且常常出錯(cuò)荚坞，也就意味著這些指標(biāo)仍然無(wú)法識(shí)別出頁(yè)面主要內(nèi)容加載完畢的時(shí)間點(diǎn)。
哪些元素在考量范圍內(nèi)菲盾？
-
<img>元素 - 內(nèi)嵌在
<svg>元素內(nèi)的<image>元素 -
<video>元素（使用封面圖像） - 通過(guò)
url()函數(shù)（而非使用CSS 漸變）加載的帶有背景圖像的元素 - 包含文本節(jié)點(diǎn)或其他行內(nèi)級(jí)文本元素子元素的塊級(jí)元素颓影。
何時(shí)報(bào)告最大內(nèi)容繪制？
例子：
FID：https://web.dev/fid/
FID 測(cè)量從用戶第一次與頁(yè)面交互（例如當(dāng)他們單擊鏈接懒鉴、點(diǎn)按按鈕或使用由 JavaScript 驅(qū)動(dòng)的自定義控件）直到瀏覽器對(duì)交互作出響應(yīng)诡挂，并實(shí)際能夠開始處理事件處理程序所經(jīng)過(guò)的時(shí)間
一般來(lái)說(shuō)，發(fā)生輸入延遲（又稱輸入延時(shí)）是因?yàn)闉g覽器的主線程正忙著執(zhí)行其他工作临谱，所以還不能響應(yīng)用戶璃俗。可能導(dǎo)致這種情況發(fā)生的一種常見(jiàn)原因是瀏覽器正忙于解析和執(zhí)行由您的應(yīng)用程序加載的大型 JavaScript 文件悉默。在此過(guò)程中城豁，瀏覽器不能運(yùn)行任何事件偵聽(tīng)器，因?yàn)檎诩虞d的 JavaScript 可能會(huì)讓瀏覽器去執(zhí)行其他工作麦牺。
一些問(wèn)題：
- 為什么只考慮首次輸入？
- 哪些算是首次輸入鞭缭？
- 如果用戶始終沒(méi)有與您的網(wǎng)站進(jìn)行交互怎么辦剖膳？
- 為什么只考慮輸入延遲？
CLS：https://web.dev/cls/
CLS 測(cè)量整個(gè)頁(yè)面生命周期內(nèi)發(fā)生的所有意外布局偏移中最大一連串的布局偏移分?jǐn)?shù)
每當(dāng)一個(gè)可見(jiàn)元素的位置從一個(gè)已渲染幀變更到下一個(gè)已渲染幀時(shí)岭辣，就發(fā)生了布局偏移
一連串的布局偏移吱晒，也叫會(huì)話窗口是指一個(gè)或多個(gè)快速連續(xù)發(fā)生的單次布局偏移，每次偏移相隔的時(shí)間少于 1 秒沦童，且整個(gè)窗口的最大持續(xù)時(shí)長(zhǎng)為 5 秒（https://web.dev/evolving-cls/#why-a-session-window）
最大的一連串是指窗口內(nèi)所有布局偏移累計(jì)分?jǐn)?shù)最大的會(huì)話窗口
頁(yè)面內(nèi)容的意外移動(dòng)通常是由于異步加載資源仑濒，或者動(dòng)態(tài)添加 DOM 元素到頁(yè)面現(xiàn)有內(nèi)容的上方叹话。罪魁禍?zhǔn)卓赡苁俏粗叽绲膱D像或視頻、實(shí)際渲染后比后備字體更大或更小的字體墩瞳，或者是動(dòng)態(tài)調(diào)整自身大小的第三方廣告或小組件驼壶。
Note:只有當(dāng)現(xiàn)有元素的起始位置發(fā)生變更時(shí)才算作布局偏移。如果將新元素添加到 DOM 或是現(xiàn)有元素更改大小喉酌，則不算作布局偏移热凹，前提是元素的變更不會(huì)導(dǎo)致其他可見(jiàn)元素的起始位置發(fā)生改變。
如何計(jì)算布局偏移分?jǐn)?shù)泪电？
瀏覽器在計(jì)算布局偏移分?jǐn)?shù)時(shí)般妙，會(huì)查看可視區(qū)域大小和兩個(gè)已渲染幀之間的可視區(qū)域中不穩(wěn)定元素的位移。布局偏移分?jǐn)?shù)是該位移的兩個(gè)度量的乘積：影響分?jǐn)?shù)和距離分?jǐn)?shù)（兩者定義如下）相速。
布局偏移分?jǐn)?shù) = 影響分?jǐn)?shù) * 距離分?jǐn)?shù)
影響分?jǐn)?shù)
影響分?jǐn)?shù)測(cè)量不穩(wěn)定元素對(duì)兩幀之間的可視區(qū)域產(chǎn)生的影響碟渺，前一幀和當(dāng)前幀的所有不穩(wěn)定元素的可見(jiàn)區(qū)域集合（占總可視區(qū)域的部分）就是當(dāng)前幀的影響分?jǐn)?shù)
在上圖中，有一個(gè)元素在一幀中占據(jù)了一半的可視區(qū)域突诬。接著苫拍，在下一幀中，元素下移了可視區(qū)域高度的 25%攒霹。紅色虛線矩形框表示兩幀中元素的可見(jiàn)區(qū)域集合怯疤，在本示例中，該集合占總可視區(qū)域的 75%催束，因此其影響分?jǐn)?shù)為0.75集峦。
距離分?jǐn)?shù)
布局偏移分?jǐn)?shù)計(jì)算公式的另一部分測(cè)量不穩(wěn)定元素相對(duì)于可視區(qū)域位移的距離。距離分?jǐn)?shù)指的是任何不穩(wěn)定元素在一幀中位移的最大距離（水平或垂直）除以可視區(qū)域的最大尺寸維度（寬度或高度抠刺，以較大者為準(zhǔn)）塔淤。
在上方的示例中，最大的可視區(qū)域尺寸維度是高度速妖，不穩(wěn)定元素的位移距離為可視區(qū)域高度的 25%高蜂，因此距離分?jǐn)?shù)為 0.25。
所以罕容，在這個(gè)示例中备恤，影響分?jǐn)?shù)是0.75 ，距離分?jǐn)?shù)是0.25 锦秒，所以布局偏移分?jǐn)?shù)是0.75 * 0.25 = 0.1875 露泊。
如何定義 Core Web Vitals metrics的閾值
Core Web Vitals是一組度量Web上真實(shí)用戶體驗(yàn)的重要方面的字段指標(biāo)。它包括三個(gè)指標(biāo)旅择，以及每個(gè)指標(biāo)的目標(biāo)閾值惭笑，這有助于開發(fā)人員定性地了解他們的站點(diǎn)體驗(yàn)是“好”、“需要改進(jìn)”還是“差”。
此外沉噩，為了對(duì)頁(yè)面或站點(diǎn)的總體性能進(jìn)行分類捺宗，我們使用該頁(yè)面或站點(diǎn)的所有頁(yè)面瀏覽量的第75百分位數(shù)值。換句話說(shuō)川蒙，如果一個(gè)網(wǎng)站至少有75%的頁(yè)面瀏覽量達(dá)到了“好”的閾值蚜厉，那么這個(gè)網(wǎng)站就被歸類為具有“好”性能的網(wǎng)站。相反派歌，如果至少有25%的頁(yè)面瀏覽量達(dá)到“差”的閾值弯囊，該網(wǎng)站就被歸類為“差”的表現(xiàn)。例如胶果，一個(gè)2秒的75百分位LCP被歸類為“好”匾嘱，而一個(gè)5秒的75百分位LCP被歸類為“差”。
For the detail of how to define the target of thresholds, pls have a look at: https://web.dev/defining-core-web-vitals-thresholds/
Tools to measure and report Core Web Vitals
Google believe Core Web vital是對(duì)每一個(gè)網(wǎng)站都特別特別的重要早抠，所以Google把Core web vital metrics集成到了很多的流行的自己的工具上
Pagespeed insights：https://developers.google.com/speed/docs/insights/v5/about
Lighthouse
Chrome UX report：https://developers.google.com/web/tools/chrome-user-experience-report
Google Devtools
Web vital Extension
Javascript API霎烙， https://web.dev/ 官方提供了很多的API可以獲取Core web vitals不同指標(biāo)的值
