一、意義:
??網站性能往往決定用戶體驗,網頁加載是否夠快,操作是否流暢往往是用戶對網站的第一印象,性能越好的網站,轉化率、用戶留存率往往更好。
二、捕獲方法:
通過window.performance獲取以下六個指標
??1、First Contentful Paint (FCP):開始呈現頁面內容
??2、Largest Contentful Paint (LCP):視口內可見的最大圖像或文本塊的渲染時間
??3、TTFB:接收到響應的第一個字節
??4、First Input Delay (FID):第一次進行交互的時間
??5、Ready:文檔已被解析
??6、Load:所有資源完成加載
FCP即首屏時間,LCP為用戶看到頁面的最大塊,Load為頁面加載完成,一般根據這三個指標綜合看該網頁性能。
三、上報參數:
捕獲的以上六個指標進行上報
??1、path: string // 頁面url
??2、d1: number|undefined // TTFB時間
??3、d2: number|undefined // FCP
??4、d3: number|undefined // LCP
??5、d4: number|undefined // FID
??6、d5: number|undefined // Ready
??7、d6: number|undefined // Load
??8、detail: string // duration超過500ms文件,字符串數組
更快捷更準確接入前端監控