measuring performance in the browser
DESCRIPTION
TRANSCRIPT
Performance in the BrowserAlois Reitbauer
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
The level of detail we want
My
Request Start Time
Time-to-First-Byte
OnLoad Time
Business Event Time
Resource Download TimeRendering Time
DNS/Network Time
JS Execution Time
Rendering TimeBandwidth
Latency (Geo)Location
Browser Info
… we want to get all this information non intrusively
(aka hacking)
<html> <head> <script type="text/javascript"> var start = new Date().getTime(); function onLoad() { var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency); } </script> </head> <body onload="onLoad()"> ……
OnLoad Time Measurement
……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” />…..
Resource Time Measurement
… browsers have all this information, so why not
expose it
W3C Performance
Working Group
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
Navigation Timing
window.performance.timing.
Web Timing Example (Chrome)
Resources
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
Resource Timing
window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].
Business Events
Marksvs.
Measures
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>, …]
…..
}
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.
Measures
Used to calculate durations
measure () fetchStart -> now
measure (startTime) startTime -> now
measure(startTime, endTime) startTime -> endTime
Where are we today?
Navigation Timing
Resource Timing
User Timing
Performance Timeline
Browser Support
Open Issues
How to send the data back to the server
Rendering and JS Execution
Implementing the backend services
A synthetic monitoring
replacement?
The impact on WPO?
A game changer for mobile?
