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