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
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()"> ……
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
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
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
