Measuring Performance in the Browser
Download as PPTX, PDF4 likes1,032 views
The document discusses measuring end user performance in the browser, which is complex due to a lack of standardization. It proposes exposing detailed timing data that browsers already collect, such as resource download times and rendering times, in a non-intrusive way according to W3C specifications. This includes Navigation Timing, Resource Timing, User Timing, and the Performance Timeline. Open issues include how to send the performance data back to servers and implementing the necessary backend services. Exposing this level of browser performance data could be a game changer for monitoring, mobile optimization, and the web performance field overall.
![Resource Timingwindow.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].](https://image.slidesharecdn.com/w3c-111005090254-phpapp01/85/Measuring-Performance-in-the-Browser-16-320.jpg)
![Working with Marksmark (markName)add a new mark with the current timestampgetMarks (markName)Retrieve all marks with the specified name. If none is specified all marks will be returnedResult Structure:{ <markName> : [<val1>, <val2>, …] …..}](https://image.slidesharecdn.com/w3c-111005090254-phpapp01/85/Measuring-Performance-in-the-Browser-19-320.jpg)
Measuring Performance in the Browser
- 1. Performance in the BrowserAlois Reitbauer
- 2. Our challenges todayNo standardized way to measure end user performanceMeasuring on the server side is not enoughMeasuring in the browser is complexBest Practices are only one side of the storyToday’s approaches are only suitable for development/troubleshooting
- 3. The level of detail we want
- 4. My
- 5. Request Start TimeBusiness Event TimeTime-to-First-ByteDNS/Network TimeOnLoad TimeBandwidthRendering TimeLatency(Geo)LocationJS Execution TimeBrowser InfoResource Download TimeRendering Time
- 6. … we want to get all this information non intrusively (aka hacking)
- 7. OnLoad Time Measurement<html> <head><script type="text/javascript">varstart = new Date().getTime(); function onLoad() {var now = new Date().getTime();var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> ……
- 8. Resource Time Measurement……<script type="text/javascript">downloadStart(“myimg”);</script><imgsrc=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” />…..
- 9. … browsers have all this information, so why not expose it
- 10. W3C Performance Working Group
- 11. Web Performance Specifications (relevant in this context)Navigation TimingBasic page navigation informationResource TimingInformation about page resources (own & third party)User TimingCustom actions and “Business Events”TimelineUnified Access to Performance Data
- 13. Web Timing Example (Chrome)
- 14. Resources
- 15. Resource TimingTiming for ResourcesInitiator tells origin of requestIssues with privacy of third party contentIssues with iframes (only root resource tracked)Timing-Allow-Origin Header for Third Party ContentMissing information on failed requests
- 17. Business Events
- 19. Working with Marksmark (markName)add a new mark with the current timestampgetMarks (markName)Retrieve all marks with the specified name. If none is specified all marks will be returnedResult Structure:{ <markName> : [<val1>, <val2>, …] …..}
- 20. Pre-Defined MarksMARK_FULLY_LOADEDCustom mark for fully loaded state of pageMARK_FULLY_VISIBLEDefines page is fully visibleMARK_ABOVE_THE_FOLDAll above the fold content is visibleMARK_TIME_TO_USER_ACTIONCustom mark to define that page can be used.
- 21. MeasuresUsed to calculate durationsmeasure () fetchStart -> nowmeasure (startTime)startTime -> nowmeasure(startTime, endTime)startTime -> endTime
- 22. Where are we today?
- 23. Browser SupportNavigation TimingResource TimingUser Timing Performance Timeline
- 24. Open IssuesHow to send the data back to the serverRendering and JS ExecutionImplementing the backend services
- 25. A synthetic monitoring replacement?
- 26. The impact on WPO?
- 27. A game changer for mobile?