Measuring Performance in the Browser
•Descargar como PPTX, PDF•
4 recomendaciones•1,029 vistas
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (10)
Similar a Measuring Performance in the Browser
Similar a Measuring Performance in the Browser (20)
Más de Alois Reitbauer
Más de Alois Reitbauer (11)
Último
Último (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