Measuring User Experience in the Browser
6 likes1,121 views
The document discusses user experience management and outlines various web performance metrics that can be captured from browsers such as time-to-first-byte, onload time, bandwidth, rendering time, and resource download times. It describes the W3C Navigation Timing and Resource Timing APIs that browsers expose to capture this performance data non-intrusively. Examples are provided of how this data could be used for real-world applications like identifying geo hotspots, page error monitoring, and performance profiling.
![Resource Timing
window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].](https://image.slidesharecdn.com/userexperiencehh-120215093327-phpapp01/85/Measuring-User-Experience-in-the-Browser-26-320.jpg)
![Marks
mark (markName)
add a new mark with the current timestamp
getMarks (markName)
Retrieve all marks with the specified name. If none is
specified all marks will be returned
Result Structure:
{
<markName> : [<val1>, <val2>, …]
…..
}](https://image.slidesharecdn.com/userexperiencehh-120215093327-phpapp01/85/Measuring-User-Experience-in-the-Browser-28-320.jpg)
More Related Content
Similar to Measuring User Experience in the Browser (20)
More from Alois Reitbauer (20)
Measuring User Experience in the Browser
- 1. User Experience Management Alois Reitbauer
- 2. Disclaimer
- 3. We used to measure here
- 4. We miss about 80% Your visibility ends here
- 5. … let‟s look at an example
- 6. Web Application Delivery Chain Content Internet Server Browser Processing 3rd Party
- 9. Robots are not humans (even if they come close)
- 10. Challenges Today Lack of standards In Browser Measurement Complex Most tools for development/troubleshooting
- 11. We need this …
- 13. Request Start Time Business Event Time Time-to-First-Byte OnLoad Time DNS/Network Time Bandwidth Rendering Time Latency (Geo)Location JS Execution Time Browser Info Resource Download Time Rendering Time
- 14. … we want to get all this information non intrusively (aka hacking)
- 15. OnLoad Time Measurement <html> <head> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> ……
- 16. Resource Time Measurement …… <script type="text/javascript"> downloadStart(“myimg”); </script> <img src=“./myimg.jpg” onload=“downloadEnd(„myimg‟)” /> …..
- 17. … browsers have all this information, so why not expose it
- 19. Web Performance Specs Navigation Timing Basic page navigation information Resource Timing Information about page resources (own & third party) User Timing Custom actions and high-res timer Timeline Unified Access to Performance Data
- 20. Understand Page Loading
- 22. Navigation Timing in Chrome
- 23. Navigation Timing on Windows Mobile
- 24. Let‟s try this ourselves ...
- 25. The page is not enough
- 28. Marks mark (markName) add a new mark with the current timestamp getMarks (markName) Retrieve all marks with the specified name. If none is specified all marks will be returned Result Structure: { <markName> : [<val1>, <val2>, …] ….. }
- 29. Measures measure () fetchStart -> now measure (startTime) startTime -> now measure(startTime, endTime) startTime -> endTime
- 31. Browser Support
- 32. Open Issues How to send the data back to the server Rendering and JS Execution Implementing the backend services Full browser support More efficient bandwidth measurement
- 33. Blocking data transfer if(isBrowserCloseEnabled) { var startTime = new Date().getTime(); while(((new Date().getTime()) - startTime) < 750) { }; }
- 34. Legacy Browsers
- 35. Real world examples what‟s possible today
- 42. Alois Reitbauer [email protected] @AloisReitbauer http://blog.dynatrace.com
Editor's Notes
- #4: http://www.istockphoto.com/stock-photo-4781558-listen-to-me-dad.php?st=a570ca1