CSDN話題挑戰賽第2期
參賽話題：前端技術分享

分享的本意就是總結并傳播知識。這里，我把最近在某公司的分享脫敏后分享給大家。

今天要講的是最常見的用戶體驗指標和提升方式。

說在前面

做了一期觀測云有觀點后，應某費控公司獨角獸邀請，到某費控公司獨角獸分享如何提高用戶體驗。ppt30分鐘，答疑一個小時。以下是現場ppt的的實況，（文字后期語音摘錄）。

引言

今天主要要跟大家分享的主題，是如何通過提升網站性能，進而提高用戶體驗。

「主題」

?

背景介紹：該費控公司率先成為賽道里的SaaS獨角獸。2022年也是拿到了10億元的D輪融資。其產品以報銷功能完善著稱，支持電子發票和紙質發票兩種識別方式。

此外該公司旗下還有另外三大產品線：平臺連接滴滴打車、餓了么、京東、各大商旅平臺等的企業因公消費聚合平臺合思商城；解決傳統會計檔案管理存儲成本和人力成本的易會檔，以及開放的財務數字化應用商店合思+。

「第一頁 主題講解」

要知道真正講性能優化，可能需要的時間遠遠不是短短二十分鐘，前端性能優化范圍很廣，今天僅以我這幾年前端研發工作的實踐、閱讀的書，以及在過程中的一些思考，拋磚引玉，如果有所啟發，那是非常不錯的。

不過鑒于學識有限，難免會有紕漏，歡迎大家對其中內容點評。

「第二頁 目錄大綱」

提示：這部分是目錄大綱

第三頁 三個常見場景

首先需要講的是產品或者系統的性能與系統穩定有關，經常會出現用戶經常反應的一個情況，就是頁面報錯或者卡頓。

但是因為設備不同、瀏覽器兼容、網絡快慢、產品設計等原因，開發或者研發很少能復現。還有更常見的場景，便是報錯或者卡頓還沒來得及上傳到RUM系統或者反饋上來，用戶已經流失了。

很明顯系統穩定跟留住用戶有關，系統報錯與用戶體驗有關，用戶體驗跟用戶增長有關。
網站性能、報錯和卡頓已經直接關聯到系統穩定、用戶體驗、用戶增長的常見的問題。

第四頁 可觀測性簡介

然而在前端性能的投入，往往不夠，前端同學多是忙于在本地開發環境進行業務書寫，很少有時間或者精力專門做性能提升，也更容易忽略頁面的性能。而且，即便在開發者本地的開發環境，也只能是感知到了負責開發內容的性能，隨著前端業務的復雜度，前端架構也日趨復雜，而且線上因為紛繁復雜的設備兼容性，能夠真正做到線上網站告警，乃至網站可觀測卻不是一件很容易的事情。

第五頁 觀測云小廣告

現在是廣告時間，觀測云能提升用戶體驗，他具備豐富的追蹤能力，能利用精準的用戶會話數據，對網站進行詳細的分析，并通過強大的儀表進行展示。

?第六頁 觀測云vip用戶體驗可觀測

其中VIP客戶設置用戶追蹤traceID或者使用自定義的user ID或者tag，根據收集用戶軌跡、性能數據、錯誤分析，進行實時展示，還能便捷實現精準告警，精準展示VIP客戶的網站數據。

第七頁 第一個性能指標fcp

現在開始這次對提升性能的第一個實踐和經驗分享，便是FCP。

FCP是早期性能指標發展中比較早的一個指標，在常見的client-side-rendering場景中的spa架構中，因為body下id為app的div的渲染的結束，導致fcp通常大于等于first paint，FCP更適合在ssr場景中對首次內容渲染后用于衡量網站的加載體驗，如在ssr的網站性能監控中，就比較建議針對FCP做告警設置。雖然fcp對于提升網站提升有效，但這個指標對于用戶真實體驗有較大的差異。

fcp和真實發生的頁面渲染之間往往還存在著網絡資源隊列處理請求、資源解析和dom的實際渲染中特別多的因素，隨著頁面內容復雜度攀升，當前渲染頁面是否允許用戶操作，頁面渲染是否令人愉悅，但隨著將rendering更多的放在瀏覽器側，Fcp已經遠遠不能滿足用戶體驗對性能檢驗的需求。便是今天還要更大家分享在實踐中需要關注的三個指標。

第八頁 最新三個核心指標

今天跟大家聊一聊3大核心指標，首先是這些指標的含義，和指標如何解讀，還有這3大核心指標的影響因素。
這三大指標分別是從頁面加載、用戶交互以及視覺穩定性的角度入手。分別是

第九頁 核心指標LCP和數值

LCP是一項以用戶為中心的指標，用于衡量網頁被感知到的加載速度，指的是可見的最大內容元素的渲染時間；
如圖中所示，LCP應該在頁面首次開始加載的2.5秒內，超過2.5sLCP則被定義為poor；

我們來查看一下LCP的影響因素呢，當用戶訪問一個網站，從端上發起請求后通常有好幾個階段，一般瀏覽器都不知道接下來要用什么內容，可能是css、js、字體和圖片、或者音視頻，其中瀏覽器大部分時間都花在等待服務器的數據。從端上傳輸到服務器，然后再返回設備。

如果能預拉取這些內容，那么能極大的提高加載速度，即使只是預先拉取部分文件，也能有很顯著的網頁速度提升。
Google在2022年發布的數據，可使網頁加載速度提升14個百分點，同時保持良好的LCP。

觀測云推薦用戶能夠預拉取部分文件，預拉取部分文件應該是常用、公共、有良好緩存策略的文件。

當然這部分還是要根據業務和用戶的需求來決定。如何能提前預提取呢。對此我想介紹兩個可供參考的，能簡單快捷的使用，并且對LCP和網站速度有明顯提升。

?第十頁 如何提高LCP

這兩項是技術基本都是很多年前就有，但經常被用戶忽略的。

第一點是 讓頁面提前可與目標網站建立直接連接來獲取資源。
由于這些請求每次都會發送到你的服務器，因此能夠提高向用戶顯示的內容的速度。
一次DNS查詢的平均時間大概是60-120ms左右，看似一個很短的時間，但是相對于網頁的渲染來說，這是一個非常長的時間。
DNS預取技術是利用CPU和網絡帶寬來域名解析機制，可以針對多個域名采取并行處理的方式，每個域名開啟一個新的線程。
<meta>? 信息告訴瀏覽器，需要做dsn預解析 <meta http-equiv=“x-dns-prefetch-control” content=“on”/>
使用link標簽對后端api進行預解析，<link rel=“dns-prefetch”? href=“api.com” />
尤其對于client side rendering的架構來講，在已經構建完空白節點后在由client fire http request時建立連接其實已經滯后很多。

第二點是預拉取
在meta標簽內Preload source，是聲明式的 fetch，可以強制瀏覽器請求資源，同時不阻塞文檔?onload?事件。
Prefetch 提示瀏覽器這個資源將來可能需要，但是把決定是否和什么時間加載這個資源的決定權交給瀏覽器。

Fetchpriority=“high” rel=“preload” href=“resource.jpg”
Preload本來是一個專門針對音視頻進行優化的一個標簽，目前可以用對靜態資源、關鍵公共js css 字體進行加載的一項技術
以上便是一些實踐中對于提升lcp有幫助的一些經驗。

除了以上的這些內容，還有什么能影響LCP呢，一般是服務器響應慢、js阻塞、資源加載慢、客戶端渲染架構。
這里需要講到服務器響應慢、資源加載慢，
目前觀測云能全鏈路展示耗時占比，如果是服務器響應慢，則能快速看出來。
資源加載慢，觀測云有兩個字段對大家做性能調優有幫助。第一個是view_resource_count頁面資源數量，第二個是resource_size。
一般情況下瀏覽器會限制同一個域名下可以下載資源的數量，以chrome為例，在建立連接階段客戶端最多與主機建立6個tcp連接，通過劃分子域方式，將多個資源分布在不同子域上，減少請求隊列的等待時間，這也算得上一種優化的方式。
根據從觀測云得到的view_resource_count數量，可以做數量減少的嘗試。比如從100到40。這也是非常值得嘗試的性能提升。
最后一點便是reduce resource size，可以做大小降低上的嘗試。比如從3M到1.5M。這也是非常值得嘗試的性能提升。

?第十一頁 核心指標CLS

Cls是衡量視覺穩定性非常重要的指標，它可以量化在頁面上布局累計偏移的最終效果，它可以衡量頁面是否令人愉悅，CLS的計算公式
Layout shift score = impact fraction*distance fraction；
一般CLS應該在0.1以下，如果超過這個數值，就需要關注一下這個指標。

什么情況下會導致CLS比較差呢？
一般是沒有尺寸的圖像/視頻的dom節點（這里尤其需要考慮css embeded到js中的場景有可能會讓cls比較低），不設置寬高的大div，以及字體文件突然加載的閃爍。而且可以通過chrome的devtools能夠直接看到對cls影響比較大的dom節點。對于lazy-load的image/video節點，可以設置多套尺寸，能夠降低cls。也可以使用類似于骨架屏的策略，對這些節點的樣式進行預設。
還有一種情況，就是長列表下滑場景，需要保證盒模型有足夠的空間切換，也就是不論盒模型內數據如何變化，都要始終預留出數據變動所需要的布局空間。總之，通過努力，我們認為CLS這個數值，是有機會不斷接近0的。

第十二頁 如何提升CLS

第十三頁? ?核心指標FID

FID可以衡量用戶首次于頁面進行互動的時刻，也就是用戶可以點擊按鈕、滑動頁面

第十四頁 如何提升FID

FID可以衡量用戶首次于頁面進行互動的時刻，也就是用戶從這個時候才可以點擊按鈕、滑動頁面。
觀測云view_long_task_count，頁面代碼卡頓的次數。

第十五頁 觀測云rum核心指標的FCP圖

這里能看到觀測云控制臺的核心指標FCP基本在2s的箱體

?
第十六頁 觀測云rum核心指標 LCP

這里能看到觀測云控制臺的核心指標LCP基本在2s的箱體，存在部分波動。

第十七頁 觀測云核心指標CLS

這里可以通過這張圖片能看出什么來呢？這是觀測云控制臺在阿里云的數據。
整體來看不論是頁面切換，還是首次加載，cls整體絕大多數情況都在0.1以下，整體性能數據還是不錯的，但是有明顯超過0.1的情況存在。

第十八頁 觀測云核心指標CLS

讓我看一下官網的數據，這里可以通過這張圖片能看出什么來呢？
整體來看不論是頁面切換，還是首次加載，cls整體絕大多數情況都在0.1以下，但是有明顯超過0.1的情況存在。

?第十九頁 觀測云rum核心指標FID

第二十頁 實踐內容

某費控獨角獸公司指標分析1，數據不展示

第二十一頁 實踐內容

某費控獨角獸公司指標分析2，數據不展示

第二十二頁 致謝

這就是今天的這次分享，
希望這次分享對性能優化有啟發，
大家可以掃描最左側企業公眾號第一時間掌握觀測云最新資訊
掃描中間二維碼添加微信和我技術交流或者侃大山
掃描左右側二維碼關注我了解最新文章

總結

以上是生活随笔為你收集整理的前端用户体验提升系列（一）最常见的用户体验指标和提升方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。