前端性能提昇必備技巧

金虹橋程序員 2021-09-18 13:14:31 阅读数:196

前端 性能 技巧

性能對流量的影響

image.png

網頁應以多快速度加載?根據 skilled.co,47% 的客戶希望網頁在 2 秒或更短時間內完成加載。同樣來自 skilled.co 的數據,AI 醫療保健軟件公司 mPulse Mobile 的測試發現:

  • 頁面加載時間為 2.4 秒以內時,其轉化率為 1.9%
  • 3.3 秒時,轉化率為 1.5%
  • 4.2 秒時,轉化率為不到 1.1%
  • 超過 5.7 秒時,轉化率為 0.6%

其他公司也獲得類似的結果

  • 沃爾瑪發現,頁面加載時間每减少 1 秒,轉化數就會增加 2%
  • COOK 通過將頁面加載時間减少 0.85 秒,使轉化數提高了 7%
  • Mobify 發現,首頁加載時間每减少 100 毫秒,轉化率就會提高 1.11%

性能模型

RAIL

RAIL是一種以用戶為中心的性能模型,它提供了一種考慮性能的結構。該模型將用戶體驗分解為關鍵操作(例如,點擊、滾動、加載),並幫助您為每個操作定義性能目標。

RAIL 代錶 Web 應用程序生命周期的四個不同方面:響應、動畫、空閑和加載。用戶對這些上下文中的每一個都有不同的性能期望,因此性能目標是根據上下文和用戶如何感知延遲的 UX 研究來定義的。

image.png
RAIL性能模型的4個部分

Response響應:在 50 毫秒內處理事件

目標是在 100 毫秒內響應輸入,那麼為什麼我們的計劃是實現 50 毫秒?這是因為除了輸入處理之外,通常還有其他工作要做,並且這些工作占用了可接受輸入響應的部分可用時間。如果應用程序在空閑時間內在推薦的 50 毫秒塊中執行工作,這意味著如果輸入在這些工作塊之一期間發生,則它最多可以排隊 50 毫秒。考慮到這一點,可以安全地假設只有剩餘的 50 毫秒可用於實際輸入處理。下圖顯示了這種效果,該圖顯示了在空閑任務期間收到的輸入如何排隊,從而减少了可用的處理時間

image.png
空閑任務如何影響輸入響應

Animation 動畫:在 10 毫秒內生成一幀

  • 在 10 毫秒或更短的時間內生成動畫中的每一幀。從技術上講,每幀的最大預算為 16 毫秒(1000 毫秒/每秒 60 幀≈16 毫秒),但瀏覽器需要大約 6 毫秒來渲染每幀,因此每幀 10 毫秒的准則。
  • 以視覺平滑為目標。用戶會注意到幀速率何時發生變化。

Idel空閑:最大化空閑時間

最大化空閑時間以增加頁面在 50 毫秒內響應用戶輸入的幾率。

Load 加載:頁面內容應在 5 秒內可以互動

當頁面加載緩慢時,用戶注意力會遊移,用戶會認為任務已損壞。加載速度快的網站具有更長的平均會話、更低的跳出率和更高的廣告可見度

web vitals

核心 Web 指標是適用於所有網頁的 Web 指標子集,每比特網站所有者都應該測量這些指標,並且這些指標還將顯示在所有 Google 工具中。每項核心 Web 指標代錶用戶體驗的一個不同方面,能够進行實際測量,並且反映出以用戶為中心的關鍵結果的真實體驗。

核心 Web 指標的構成指標會隨著時間的推移而發展 。當前針對 2020 年的指標構成側重於用戶體驗的三個方面——加載性能交互性視覺穩定性——並包括以下指標(及各指標相應的閾值):

image.png

Largest Contentful Paint (LCP)

最大內容繪制,測量加載性能。為了提供良好的用戶體驗,LCP 應在頁面首次開始加載後的2.5 秒內發生。

First Input Delay (FID)

首次輸入延遲,測量交互性。為了提供良好的用戶體驗,頁面的 FID 應為100 毫秒或更短。

Cumulative Layout Shift (CLS)

累積布局偏移,測量視覺穩定性。為了提供良好的用戶體驗,頁面的 CLS 應保持在 0.1. 或更少。

為了確保您能够在大部分用戶的訪問期間達成建議目標值,對於上述每項指標,一個良好的測量閾值為頁面加載的第 75 個百分比特數,且該閾值同時適用於移動和桌面設備。

CLS = 影響分數 * 距離分數

影響分數

前一幀當前幀的所有不穩定元素的可見區域集合(占總可視區域的部分)就是當前幀的影響分數

image.png
在上圖中,有一個元素在一幀中占據了一半的可視區域。接著,在下一幀中,元素下移了可視區域高度的 25%。紅色虛線矩形框錶示兩幀中元素的可見區域集合,在本示例中,該集合占總可視區域的 75%,因此其影響分數0.75

距離分數

距離分數指的是任何不穩定元素在一幀中比特移的最大距離(水平或垂直)除以可視區域的最大尺寸維度(寬度或高度,以較大者為准)。

image.png
在上方的示例中,最大的可視區域尺寸維度是高度,不穩定元素的比特移距離為可視區域高度的 25%,因此距離分數為 0.25。

所以,在這個示例中,影響分數0.75距離分數0.25 ,所以布局偏移分數0.75 * 0.25 = 0.1875

指標收集

推薦使用 web-vitals

問題分析

常用工具

lighthouse

Lighthouse可在 Chrome DevTools、web.dev/measure、Chrome 擴展、Node.js 模塊和 WebPageTest 中使用。你給它一個 URL,它模擬一個 3G 連接速度較慢的中端設備,在頁面上運行一系列審計,然後給你一份負載性能報告,以及如何改進的建議。

Chrome 開發者工具

Chrome DevTools對頁面加載或運行時發生的一切進行深入分析。請參閱開始分析運行時性能以熟悉性能面板 UI。

WebPageTest

WebPageTest 是一個 Web 性能工具,它使用真實的瀏覽器來訪問網頁並收集計時指標。在webpagetest.org/easy上輸入一個URL,以獲取有關頁面在具有慢速3G 連接的真實Moto G4 設備上的負載性能的詳細報告。您還可以將其配置為包含 Lighthouse 審核。

performance-bookmarklet(個人推薦)

該插件可以看到瀑布流順序、各域名資源調用順序、資源分類等有幫助的信息

導航計時瀑布

image.png

  • 如果您使用User Timing API (performance.markperformance.measure)設置標記,它還會顯示標記和度量
  • 將鼠標懸停在條形上以查看包含精確毫秒/持續時間的工具提示

導航計時 API 詳細信息

image.png

參考文章

版权声明:本文为[金虹橋程序員]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918131431387z.html