Measuring Performance in the Browser
- 2. Our challenges todayNo standardized way to measure end user performanceMeasuring on the server side is not enoughMeasuring in the browser is complexBest Practices are only one side of the storyToday’s approaches are only suitable for development/troubleshooting
- 5. Request Start TimeBusiness Event TimeTime-to-First-ByteDNS/Network TimeOnLoad TimeBandwidthRendering TimeLatency(Geo)LocationJS Execution TimeBrowser InfoResource Download TimeRendering 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 TimingBasic page navigation informationResource TimingInformation about page resources (own & third party)User TimingCustom actions and “Business Events”TimelineUnified Access to Performance Data
- 15. Resource TimingTiming for ResourcesInitiator tells origin of requestIssues with privacy of third party contentIssues with iframes (only root resource tracked)Timing-Allow-Origin Header for Third Party ContentMissing information on failed requests
- 19. Working with Marksmark (markName)add a new mark with the current timestampgetMarks (markName)Retrieve all marks with the specified name. If none is specified all marks will be returnedResult Structure:{ <markName> : [<val1>, <val2>, …] …..}
- 20. Pre-Defined MarksMARK_FULLY_LOADEDCustom mark for fully loaded state of pageMARK_FULLY_VISIBLEDefines page is fully visibleMARK_ABOVE_THE_FOLDAll above the fold content is visibleMARK_TIME_TO_USER_ACTIONCustom mark to define that page can be used.
- 21. MeasuresUsed to calculate durationsmeasure () fetchStart -> nowmeasure (startTime)startTime -> nowmeasure(startTime, endTime)startTime -> endTime
- 24. Open IssuesHow to send the data back to the serverRendering and JS ExecutionImplementing the backend services