measuring performance in the browser
DESCRIPTION
TRANSCRIPT
![Page 1: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/1.jpg)
Performance in the BrowserAlois Reitbauer
![Page 2: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/2.jpg)
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
![Page 3: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/3.jpg)
The level of detail we want
![Page 4: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/4.jpg)
My
![Page 5: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/5.jpg)
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
![Page 6: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/6.jpg)
… we want to get all this information non intrusively
(aka hacking)
![Page 7: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/7.jpg)
<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
![Page 8: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/8.jpg)
……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” />…..
Resource Time Measurement
![Page 9: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/9.jpg)
… browsers have all this information, so why not
expose it
![Page 10: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/10.jpg)
W3C Performance
Working Group
![Page 11: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/11.jpg)
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
![Page 12: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/12.jpg)
Navigation Timing
window.performance.timing.
![Page 13: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/13.jpg)
Web Timing Example (Chrome)
![Page 14: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/14.jpg)
Resources
![Page 15: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/15.jpg)
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
![Page 16: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/16.jpg)
Resource Timing
window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].
![Page 17: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/17.jpg)
Business Events
![Page 18: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/18.jpg)
Marksvs.
Measures
![Page 19: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/19.jpg)
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>, …]
…..
}
![Page 20: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/20.jpg)
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.
![Page 21: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/21.jpg)
Measures
Used to calculate durations
measure () fetchStart -> now
measure (startTime) startTime -> now
measure(startTime, endTime) startTime -> endTime
![Page 22: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/22.jpg)
Where are we today?
![Page 23: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/23.jpg)
Navigation Timing
Resource Timing
User Timing
Performance Timeline
Browser Support
![Page 24: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/24.jpg)
Open Issues
How to send the data back to the server
Rendering and JS Execution
Implementing the backend services
![Page 25: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/25.jpg)
A synthetic monitoring
replacement?
![Page 26: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/26.jpg)
The impact on WPO?
![Page 27: Measuring Performance in the Browser](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482345c5806b5e8048b4663/html5/thumbnails/27.jpg)
A game changer for mobile?