如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

隨著移動網際網路的發展,使用者對產品的使用體驗要求越來越高。APP內的H5作為重要載體,靈活,輕量,在移動端的應用非常廣泛,是一個非常核心的使用者體驗指標。但對比App,H5的效能表現還是遜色一籌,比如頁面開啟往往會出現白屏,載入慢等問題。

針對這些H5具體使用時的各類問題,

友盟+U-APM應用效能監控平臺為開發者奉上「H5頁面分析」功能。

針對APP內H5頁面常見的使用者感知、載入效能、慢載入三大問題,實時監控應用中H5頁面的效能情況,即時幫助開發者應對H5頁面的各類效能狀況。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

01

使用者感知

從C端使用者角度, 使用者會向APP開發者投訴頁面載入過慢,反應速度很慢,這類偏向感知類的反饋,但這個反饋很難整體進行衡量和判斷,鎖定到底是哪裡出現問題、異常到底指向哪裡角度去進行判斷。

因此頁面上提供首屏時間、首次內容繪製時間、頁面可互動時間這3個使用者可視性效能指標便於開發者瞭解當前頁面的載入情況;

指標定義

首屏時間(FP)

:First Paint,從開啟頁面到首個畫素渲染到頁面的時長

首次內容繪製時間(FCP)

:First Contentful Paint,首次繪製完成DOM內容的時長,內容包括文字、圖片(包含背景圖)、非白色的 canvas 或 SVG,也包括帶有正在載入中的 Web 字型的文字

頁面可互動時間(TTI)

:Time to interactive,從頁面載入開始到頁面處於完全可互動狀態的時長。

1秒快開比:首屏完全載入時長≤1s的PV佔比2秒快開比:首屏完全載入時長≤2s的PV佔比5秒慢開比:首屏完全載入時長>5s的PV佔比

透過以上指標開發者可以快速掌握全域性載入情況,感知載入時間較長的使用者佔比情況;還可透過提供的樣本分佈掌握使用者對於頁面載入的容忍情況。維度分佈、指標列表多個維度。

整體篩選控制元件支援篩選時間範圍、屬性維度、頁面、高階功能。啟動頁面的篩選支援按照域名進行聚合,如果需要篩選某個URL,請先選擇對應的域名,再在域名下篩選URL。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

樣本分佈和維度分佈多個指標可以檢視。樣本分佈按照各個維度下求指標的平均值,支援Top5和明細的檢視。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

指標列表展示所有指標,支援匯出,包含50%、90%、95%分位值。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

02

載入效能

在瞭解完C端對於頁面整體的感知情況後,開發者可能會關注到底哪裡的載入慢了影響了整體的感知,此時就有了“載入效能”這個模組的設計;

在這個模組中可以為開發者提供頁面載入的完整生命週期,並能能夠根據不同階段瞭解各環節的載入耗時。

整體趨勢:洞察頁面中不同生命週期的平均時長和維度分佈

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

載入效能包含整體趨勢、平均時長、指標列表、樣本分佈和維度分佈等指標。整體趨勢可以檢視載入指標的平均值、50%、90%、95%分位值。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

分頁面統計:洞察App中不同頁面在不同階段的載入耗時

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

03

慢載入

在瞭解了整體感知和頁面各生命週期中階段的耗時後也可從慢載入角度定位APP的請求較慢的情況。

慢載入定義

:可自行設定慢請求的閾值,如果請求時長大於設定的閾值,則為一次慢請求。頁面完全載入時長超過慢載入閾值的被視為慢啟動,預設為3秒,設定後頁面即刻重新整理。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

URL列表中包含請求URL的列表,URL以host+path進行聚合,點選URL後可以檢視到在所有篩選的時間和條件下每次慢請求的ID list。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

點選URL行旁邊的維度分佈可以展開整體的維度分佈圖,展示了這個URL按照Host+Path聚合後,在每個維度下面的數量分佈。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

點選請求ID行右邊的載入時序圖,即可展開這次慢請求的詳情,其中展示了本次請求的詳細裝置資訊以及頁面載入的完整生命週期。透過完整的載入時序圖可以瞭解單請求中哪個環節出現問題,快速定位。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣

以上功能可透過

U-APM應用效能監控平臺

新上線的

H5頁面分析

一一實現,開發者只需要額外

整合JS SDK

,按照整合文件操作就可完成!

04 取樣率

H5分析統一取樣率為5%,此取樣率按照裝置的啟動定義,即為每次啟動有5%的可能性被取樣。如果開發者是Pro使用者需要做取樣率調整,U-APM團隊會協助做相應支援。

關於U-APM 應用效能監控平臺

截止目前,U-APM已支援服務國內各領域多家頭部客戶,如七貓免費小說、獵豹清理大師、車來了、江南百景圖等。未來,U-APM會繼續秉承為開發者提供好工具好服務的理念,助力應用穩定性與效能監控,有效提升開發者發現問題、定位問題的效率,共同守護使用者體驗。

如何最佳化APP的H5頁面效能?看這一篇就夠了!詳解H5頁面分析秘訣