Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ă„hnlich wie Measuring User Experience in the Browser
Ă„hnlich wie Measuring User Experience in the Browser (20)
Mehr von Alois Reitbauer
Mehr von Alois Reitbauer (20)
KĂĽrzlich hochgeladen
KĂĽrzlich hochgeladen (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 alois.reitbauer@dynaTrace.com @AloisReitbauer http://blog.dynatrace.com
Hinweis der Redaktion
- http://www.istockphoto.com/stock-photo-4781558-listen-to-me-dad.php?st=a570ca1