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.

Measuring Performance in the Browser

1.802 Aufrufe

Veröffentlicht am

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

Measuring Performance in the Browser

  1. 1. Performance in the BrowserAlois Reitbauer<br />
  2. 2. Our challenges today<br />No standardized way to measure end user performance<br />Measuring on the server side is not enough<br />Measuring in the browser is complex<br />Best Practices are only one side of the story<br />Today’s approaches are only suitable for development/troubleshooting<br />
  3. 3. The level of detail we want<br />
  4. 4. My<br />
  5. 5. Request Start Time<br />Business Event Time<br />Time-to-First-Byte<br />DNS/Network Time<br />OnLoad Time<br />Bandwidth<br />Rendering Time<br />Latency<br />(Geo)Location<br />JS Execution Time<br />Browser Info<br />Resource Download Time<br />Rendering Time<br />
  6. 6. … we want to get all this information non intrusively (aka hacking)<br />
  7. 7. OnLoad Time Measurement<br /><html><br /> <head><br /><script type="text/javascript"><br />varstart = new Date().getTime(); <br /> function onLoad() {<br />var now = new Date().getTime();<br />var latency = now - start; alert("page loading time: " + latency);<br /> }<br /> </script><br /> </head><br /> <body onload="onLoad()"><br /> ……<br />
  8. 8. Resource Time Measurement<br />……<br /><script type="text/javascript"><br />downloadStart(“myimg”);<br /></script><br /><imgsrc=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” /><br />…..<br />
  9. 9. … browsers have all this information, so why not expose it<br />
  10. 10. W3C Performance <br />Working Group<br />
  11. 11. Web Performance Specifications (relevant in this context)<br />Navigation Timing<br />Basic page navigation information<br />Resource Timing<br />Information about page resources (own & third party)<br />User Timing<br />Custom actions and “Business Events”<br />Timeline<br />Unified Access to Performance Data<br />
  12. 12. Navigation Timing<br />window.performance.timing.<br />
  13. 13. Web Timing Example (Chrome)<br />
  14. 14. Resources<br />
  15. 15. Resource Timing<br />Timing for Resources<br />Initiator tells origin of request<br />Issues with privacy of third party content<br />Issues with iframes (only root resource tracked)<br />Timing-Allow-Origin Header for Third Party Content<br />Missing information on failed requests<br />
  16. 16. Resource Timing<br />window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].<br />
  17. 17. Business Events<br />
  18. 18. Marks<br />vs. <br />Measures<br />
  19. 19. Working with Marks<br />mark (markName)<br />add a new mark with the current timestamp<br />getMarks (markName)<br />Retrieve all marks with the specified name. If none is specified all marks will be returned<br />Result Structure:<br />{<br /> <markName> : [<val1>, <val2>, …]<br /> …..<br />}<br />
  20. 20. Pre-Defined Marks<br />MARK_FULLY_LOADED<br />Custom mark for fully loaded state of page<br />MARK_FULLY_VISIBLE<br />Defines page is fully visible<br />MARK_ABOVE_THE_FOLD<br />All above the fold content is visible<br />MARK_TIME_TO_USER_ACTION<br />Custom mark to define that page can be used.<br />
  21. 21. Measures<br />Used to calculate durations<br />measure () <br />fetchStart -> now<br />measure (startTime)<br />startTime -> now<br />measure(startTime, endTime)<br />startTime -> endTime<br />
  22. 22. Where are we today?<br />
  23. 23. Browser Support<br />Navigation Timing<br /><br />Resource Timing<br /><br />User Timing<br /> <br />Performance Timeline<br /> <br />
  24. 24. Open Issues<br />How to send the data back to the server<br />Rendering and JS Execution<br />Implementing the backend services<br />
  25. 25. A synthetic monitoring replacement?<br />
  26. 26. The impact on WPO?<br />
  27. 27. A game changer for mobile?<br />
  28. 28. Alois Reitbauer<br />alois.reitbauer@dynaTrace.com<br />@AloisReitbauer<br />http://blog.dynatrace.com<br />

×