Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Measuring User Experience in the Browser

1.619 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×