Download - W3C Web Performance - A detailed overview
![Page 1: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/1.jpg)
W3C Web Performance
A detailed overview
Alois Reitbauer, @AloisReitbauer
![Page 3: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/3.jpg)
Unknown unknowns
Or you cannot optimize what you don’t measure
![Page 4: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/4.jpg)
vs
![Page 5: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/5.jpg)
Don’t try this at homeIt’s too dangerous, seriously
![Page 6: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/6.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()"> ……
{Code} Page Load TimeBad Idea
{
}
![Page 7: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/7.jpg)
……<script type="text/javascript"> downloadStart(“myimg”);</script><img src=“./myimg.jpg” onload=“downloadEnd(‘myimg’)” />…..
{Code} Timing ResourcesBad Idea
{
}
![Page 8: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/8.jpg)
W3C Performance Working Group
![Page 9: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/9.jpg)
Navigation TimingHow fast is my page?
![Page 10: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/10.jpg)
window.performance.timing.{
}
![Page 11: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/11.jpg)
Works in most browsers
http://blog.dynatrace.com/samples/bookmark.html
![Page 12: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/12.jpg)
var time = window.performance.timing;
(time.loadEventEnd -
time.navigationStart)/1000
{Code} Load ti me of a page
{
}
![Page 13: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/13.jpg)
Resource TimingHow fast are my resources?
![Page 14: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/14.jpg)
A typical eCommerce Page
![Page 15: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/15.jpg)
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
![Page 16: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/16.jpg)
window.performance.getEntriesByType(“resourc
e”);
{
}
![Page 17: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/17.jpg)
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
{
}
![Page 18: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/18.jpg)
User TimingManual Page Instrumentation
![Page 19: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/19.jpg)
<html>
< head>
performance.mark(“headStart”); ….
<body>
performance.mark (“contentStart”); …..
performance.measure(“mainContent”);
performance.measure(“overhead”,
“headStart”,
“contentStart);
{Code} Page Instrumentati on
{
}
![Page 20: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/20.jpg)
Beyond measurementBuilding faster applications
![Page 21: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/21.jpg)
Page VisibilityCan you see me?
![Page 22: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/22.jpg)
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
![Page 23: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/23.jpg)
The futureMore visibility … and faster
![Page 24: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/24.jpg)
Beacon*Calling home
* not yet implemented
![Page 25: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/25.jpg)
{Today} No reliable delivery
![Page 26: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/26.jpg)
function unload() {
return beacon("POST", "/log", analyticsData);
}
{Code} Sending Beacon Data
{
}
![Page 27: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/27.jpg)
Navigation Timing 2 *Turn the radio on
* not yet implemented
![Page 28: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/28.jpg)
Sub Millisecond Resoluti on
Unifi ed Interface
Link Negoti ati on Time (Mobile!)
![Page 29: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/29.jpg)
Resource Priorities*Would you mind waiting?
* not yet implemented
![Page 30: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/30.jpg)
Visible aft er Click
![Page 31: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/31.jpg)
<html>
….
<body>
<img src=“helperLogos.jpg”
defer>
<img src=“mainHeader.jpg”>
…..
{Code} Main content fi rst
{
}
![Page 32: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/32.jpg)
Invisible
Below the fold
Video!
![Page 33: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/33.jpg)
<html>
….
<body>
<div style=“footer”>
<img src=“largeImage.jpg”
postpone>
</div>
<div style=“content”>
…..
{Code} Only load when visible
{
}
![Page 34: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/34.jpg)
Error Logging *Something went wrong
* not yet implemented
![Page 35: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/35.jpg)
Handle situati ons when
page did not load
resource did not load
![Page 36: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/36.jpg)
Polyfilling and beyond IE6 and Safari, you can do this too!
![Page 37: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/37.jpg)
Polyfi lling for older browsers
Page Load TimeResource loading (except JS & CSS)
Insight into JavaScript executionsBrowser Error Reporting
Merge with “classical” analytics data
![Page 38: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/38.jpg)
Reality AheadCool things from the real world
![Page 39: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/39.jpg)
CDN Performance Monitoring
![Page 40: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/40.jpg)
Third Party Monitoring
![Page 41: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/41.jpg)
Screen size and rendering
![Page 42: W3C Web Performance - A detailed overview](https://reader033.vdocuments.site/reader033/viewer/2022052600/55838df6d8b42a8e0c8b500b/html5/thumbnails/42.jpg)
Putti ng it all together