w3c web performance - a detailed overview
TRANSCRIPT
W3C Web Performance
A detailed overview
Alois Reitbauer, @AloisReitbauer
Unknown unknowns
Or you cannot optimize what you don’t measure
vs
Don’t try this at homeIt’s too dangerous, seriously
<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()"> ……
{Code} Page Load TimeBad Idea
{
}
……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” />…..
{Code} Timing ResourcesBad Idea
{
}
W3C Performance Working Group
Navigation TimingHow fast is my page?
window.performance.timing.{
}
Works in most browsers
http://blog.dynatrace.com/samples/bookmark.html
var time = window.performance.timing;
(time.loadEventEnd -
time.navigationStart)/1000
{Code} Load ti me of a page
{
}
Resource TimingHow fast are my resources?
A typical eCommerce Page
without external dependencies
# of Domains
# of Resources
Total Bytes
DNS [ms]
Connect [ms]
With Third Party Content 26 176 2856 Kb 1286,82 1176,09
Without Third Party Content 2 59 897 Kb 0,91 22,25
window.performance.getEntriesByType(“resourc
e”);
{
}
var resources =
window.performance.getEntriesByType("resour
ce");
var sort = function (a,b) {return b.duration -
a.duration};
resources.sort (sort);
resources[0].name;
{Code} Slowest resource
{
}
User TimingManual Page Instrumentation
<html>
< head>
performance.mark(“headStart”); ….
<body>
performance.mark (“contentStart”); …..
performance.measure(“mainContent”);
performance.measure(“overhead”,
“headStart”,
“contentStart);
{Code} Page Instrumentati on
{
}
Beyond measurementBuilding faster applications
Page VisibilityCan you see me?
function onLoad() {
document.addEventListener("webkitvisibilitych
ange", visibilityChanged, false);
}
function visibilityChanged() {
if (document.webkitHidden) // relax
else // do heavy stuff
}
{Code} Page Acti vity control
{
}* Chrome version
The futureMore visibility … and faster
Beacon*Calling home
* not yet implemented
{Today} No reliable delivery
function unload() {
return beacon("POST", "/log", analyticsData);
}
{Code} Sending Beacon Data
{
}
Navigation Timing 2 *Turn the radio on
* not yet implemented
Sub Millisecond Resoluti on
Unifi ed Interface
Link Negoti ati on Time (Mobile!)
Resource Priorities*Would you mind waiting?
* not yet implemented
Visible aft er Click
<html>
….
<body>
<img src=“helperLogos.jpg”
defer>
<img src=“mainHeader.jpg”>
…..
{Code} Main content fi rst
{
}
Invisible
Below the fold
Video!
<html>
….
<body>
<div style=“footer”>
<img src=“largeImage.jpg”
postpone>
</div>
<div style=“content”>
…..
{Code} Only load when visible
{
}
Error Logging *Something went wrong
* not yet implemented
Handle situati ons when
page did not load
resource did not load
Polyfilling and beyond IE6 and Safari, you can do this too!
Polyfi lling for older browsers
Page Load TimeResource loading (except JS & CSS)
Insight into JavaScript executionsBrowser Error Reporting
Merge with “classical” analytics data
Reality AheadCool things from the real world
CDN Performance Monitoring
Third Party Monitoring
Screen size and rendering
Putti ng it all together
