Successfully reported this slideshow.

Measuring User Experience

902 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

Measuring User Experience

  1. 1. Measuring User ExperienceAlois Reitbauer
  2. 2. Disclaimer
  3. 3. We used tomeasure here
  4. 4. We miss about 80%Your visibility ends here
  5. 5. … let‟s look at an example
  6. 6. Web Application Delivery Chain Content Internet ServerBrowser Processing 3rd Party
  7. 7. Robots forMonitoring
  8. 8. Monitor fromEverywhere
  9. 9. Robots are not humans(even if they come close)
  10. 10. Challenges TodayLack of standardsIn Browser Measurement ComplexMost tools for development/troubleshooting
  11. 11. We need this …
  12. 12. Request Start Time Business Event Time Time-to-First-ByteOnLoad Time DNS/Network Time Bandwidth Rendering TimeLatency (Geo)Location JS Execution Time Browser Info Resource Download TimeRendering Time
  13. 13. … we want to get all thisinformation non intrusively (aka hacking)
  14. 14. 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()"> ……
  15. 15. Resource Time Measurement……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“downloadEnd(„myimg‟)” />…..
  16. 16. … browsers have all thisinformation, so why not expose it
  17. 17. W3CPerformanceWorkingGroup
  18. 18. Web Performance SpecsNavigation Timing Basic page navigation informationResource Timing Information about page resources (own & third party)User Timing Custom actions and high-res timerTimeline Unified Access to Performance Data
  19. 19. Understand Page Loading
  20. 20. Navigation Timingwindow.performance.timing.
  21. 21. Navigation Timing in Chrome
  22. 22. Navigation Timing on Windows Mobile
  23. 23. Let‟s try this ourselves ...
  24. 24. The page is not enough
  25. 25. Resource Timingwindow.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].
  26. 26. Custom TimeMeasurements
  27. 27. 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 returned Result Structure: { <markName> : [<val1>, <val2>, …] ….. }
  28. 28. Measuresmeasure () fetchStart -> nowmeasure (startTime) startTime -> nowmeasure(startTime, endTime) startTime -> endTime
  29. 29. Performance Timeline
  30. 30. Real world exampleswhat‟s possible today
  31. 31. BrowserSupport
  32. 32. Open IssuesHow to send the data back to the serverRendering and JS ExecutionImplementing the backend servicesFull browser supportMore efficient bandwidth measurement
  33. 33. LegacyBrowsers
  34. 34. Alois Reitbaueralois.reitbauer@dynaTrace.com @AloisReitbauer http://blog.dynatrace.com

×