Measuring Performance in the Browser

1,687 views
1,525 views

Published on

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

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

No notes for slide

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 />

×