问题
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.
回答1:
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.
This monitors
Cumulative Layout Shift (CLS)
First Input Delay (FID)
Largest Contentful Paint (LCP)
First Contentful Paint (FCP)
Time to First Byte (TTFB)
To measure other metrics
As for other metrics they can (nearly) all be derived from 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.
The two difficult ones to calculate
The only thing you can't calculate with the above two items is Total Blocking Time (TBT) and Time To Interactive (TTI).
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.
Or you could just adapt this polyfill for TTI
来源：https://stackoverflow.com/questions/64312048/measure-performance-of-web-application-from-mobile