从移动端测量 Web 应用程序的性能 [英] Measure performance of web application from mobile
问题描述
想要从我的 android 和 iOS 设备测量移动设备(在 Microsoft PowerApps 中设计)的网络应用程序的性能.基本上,我对 UI 性能 KPI 和页面之间的响应时间更感兴趣.
Want to measure the performance of a web application for mobile devices (designed in Microsoft PowerApps) from my android and iOS devices. Basically, I am more interested towards the UI performance KPI's and response time from page to page.
想从不带模拟器的设备上执行此操作.是否有任何开源平台可以安装在移动设备上来实现这一点,对此有何建议或任何解决方法?
Want to perform this from the devices not with simulator. Is there any open source platform which can be installed on the mobile devices to achieve this, any suggestion or any work around for this?
找不到任何类似的帖子.
Couldn't find any similar post.
推荐答案
衡量关键的 Web Vitality
Google 有一个很棒的库可以监控网络生命特征.它让您可以实时监控,您甚至可以将信息通过管道传输到 Google Analytics 或您自己的服务器.
To measure key web vitals
There is a great library by Google to monitor web vitals. It lets you monitor in real time and you can even pipe the info to Google Analytics or your own server.
这个监控
Cumulative Layout Shift (CLS)
First Input Delay (FID)
Largest Contentful Paint (LCP)
First Contentful Paint (FCP)
Time to First Byte (TTFB)
衡量其他指标
至于其他指标,它们(几乎)都可以从 window.performance
.
这为您提供了计算加载时间等所需的所有信息(摘自此答案)::>
This gives you all the information you need to calculate load times etc. (taken from this answer):
connectEnd Time when server connection is finished.
connectStart Time just before server connection begins.
domComplete Time just before document readiness completes.
domContentLoadedEventEnd Time after DOMContentLoaded event completes.
domContentLoadedEventStart Time just before DOMContentLoaded starts.
domInteractive Time just before readiness set to interactive.
domLoading Time just before readiness set to loading.
domainLookupEnd Time after domain name lookup.
domainLookupStart Time just before domain name lookup.
fetchStart Time when the resource starts being fetched.
loadEventEnd Time when the load event is complete.
loadEventStart Time just before the load event is fired.
navigationStart Time after the previous document begins unload.
redirectCount Number of redirects since the last non-redirect.
redirectEnd Time after last redirect response ends.
redirectStart Time of fetch that initiated a redirect.
requestStart Time just before a server request.
responseEnd Time after the end of a response or connection.
responseStart Time just before the start of a response.
timing Reference to a performance timing object.
navigation Reference to performance navigation object.
performance Reference to performance object for a window.
type Type of the last non-redirect navigation event.
unloadEventEnd Time after the previous document is unloaded.
unloadEventStart Time just before the unload event is fired.
两个难计算的
以上两项您唯一无法计算的是总阻塞时间 (TBT)和互动时间 (TTI).
为此,您需要使用 PerformanceObserver 和查找第一次内容绘制和交互时间之间的所有长任务(大于 50 毫秒).
For that you would need to use PerformanceObserver and find all long tasks (greater than 50ms) between First Contentful Paint and Time To Interactive.
互动时间同样复杂,您必须对此进行一些研究(也许从这里开始),因为它很难实施,我也懒得在实时统计数据上跟踪它.
Time to Interactive is equally complicated and you would have to do some research on that (maybe start here) as it is quite hard to implement and I don't bother tracking it on live stats.
或者你可以调整 这个用于 TTI 的 polyfill
这篇关于从移动端测量 Web 应用程序的性能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!