User Experience ManagementAlois Reitbauer
Disclaimer
We used tomeasure here
We miss about 80%Your visibility ends here
… let‟s look at an example
Web Application Delivery Chain                                       Content                       Internet               ...
Robots forMonitoring
Monitor fromEverywhere
Robots are not humans(even if they come close)
Challenges TodayLack of standardsIn Browser Measurement ComplexMost tools for development/troubleshooting
We need this …
Request Start Time                                Business Event Time          Time-to-First-ByteOnLoad Time              ...
… we want to get all thisinformation non intrusively                  (aka hacking)
OnLoad Time Measurement<html> <head> <script type="text/javascript">  var start = new Date().getTime();  function onLoad()...
Resource Time Measurement……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“...
… browsers have all thisinformation, so why not               expose it
W3CPerformanceWorkingGroup
Web Performance SpecsNavigation Timing  Basic page navigation informationResource Timing  Information about page resources...
Understand Page        Loading
Navigation Timingwindow.performance.timing.
Navigation Timing       in Chrome
Navigation Timing on    Windows Mobile
Let‟s try this ourselves ...
The page is not enough
Resource Timingwindow.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].
Custom TimeMeasurements
Marksmark (markName)  add a new mark with the current timestampgetMarks (markName)  Retrieve all marks with the specified ...
Measuresmeasure ()  fetchStart -> nowmeasure (startTime)   startTime -> nowmeasure(startTime, endTime)   startTime -> endT...
Performance Timeline
BrowserSupport
Open IssuesHow to send the data back to the serverRendering and JS ExecutionImplementing the backend servicesFull browser ...
Blocking data transfer if(isBrowserCloseEnabled) {   var startTime = new Date().getTime();   while(((new Date().getTime())...
LegacyBrowsers
Real world exampleswhat‟s possible today
Identify Geo Hotspots
Page Error Monitoring
Third Party Content
Performance Profiling
Problem Analytics
Performance Bookmarklet http://blog.dynatrace.com/samples/bookmark.html
Alois Reitbaueralois.reitbauer@dynaTrace.com                 @AloisReitbauer       http://blog.dynatrace.com
Measuring User Experience in the Browser
Upcoming SlideShare
Loading in …5
×

Measuring User Experience in the Browser

1,565 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,565
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • http://www.istockphoto.com/stock-photo-4781558-listen-to-me-dad.php?st=a570ca1
  • Measuring User Experience in the Browser

    1. 1. User Experience ManagementAlois 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. BrowserSupport
    31. 31. Open IssuesHow to send the data back to the serverRendering and JS ExecutionImplementing the backend servicesFull browser supportMore efficient bandwidth measurement
    32. 32. Blocking data transfer if(isBrowserCloseEnabled) { var startTime = new Date().getTime(); while(((new Date().getTime()) - startTime) < 750) { }; }
    33. 33. LegacyBrowsers
    34. 34. Real world exampleswhat‟s possible today
    35. 35. Identify Geo Hotspots
    36. 36. Page Error Monitoring
    37. 37. Third Party Content
    38. 38. Performance Profiling
    39. 39. Problem Analytics
    40. 40. Performance Bookmarklet http://blog.dynatrace.com/samples/bookmark.html
    41. 41. Alois Reitbaueralois.reitbauer@dynaTrace.com @AloisReitbauer http://blog.dynatrace.com

    ×