Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FINDING A BETTER MEASUREMENT YARDSTICK 
RIP ONLOAD
Buddy Brewer 
@bbrewer 
Philip Tellis 
@bluesmoon
ONLOAD BENEFITS 
THE GOOD
• Supported by all browsers 
• Light weight instrumentation 
• Supported by all monitoring tools 
• Able to compare across...
ONLOAD DRAWBACKS 
THE BAD
• Easy for developers to abuse 
• Won't work for single page applications 
• Often misses perceived performance
ONLOAD WEIRDNESS 
THE UGLY
• Inconsistent across web sites 
• Users could successfully navigate forward before 
onload
ALTERNATIVES
BROWSER 
STANDARD 
EVENTS
• Load event 
• Front-End time 
• DOMContentLoaded 
• DOMComplete
CUSTOM 
EVENTS
var observer = new MutationObserver(function(mutations) 
{ 
mutations.forEach(function(mutation) 
{ 
[].slice.call(mutatio...
// create and dispatch the onUsable event 
var event = new CustomEvent(“Usable", 
{“detail":{"foo":true}}); 
element.dispa...
(function () 
{ 
function CustomEvent ( event, params ) { 
params = params || 
{ bubbles: false, cancelable: false, detail...
if (document.createEventObject) 
{ 
createCustomEvent = function (e_name, params) 
{ 
var evt = document.createEventObject...
WE COULD USE USERTIMING 
• window.performance.mark(“Usable”); 
• Good for setting a time point 
• Does not actually fire a...
POLL!
SINGLE PAGE APPS 
• Easy to create a proxy around XMLHttpRequest 
• Does not capture sub-resources required for the 
“sing...
WE COULD USE MRML 
• <BRAINSCAN> tag is useful here 
• Limited Browser support (none) 
• http://ifaq.wap.org/computers/mrm...
BEHAVIORAL EVENTS
• Time to scroll 
• Time to click 
• Time to convert
EVALUATION 
CRITERIA
1. Identify a key user behavior 
2. Track this behavior with the timing data 
3. Find the timer that the behavior is most ...
BOUNCE RATE
CONVERSION RATE
SESSION LENGTH
TRACKING TIMER IMPACT 
70% 
53% 
35% 
18% 
0% 
DOMContentLoaded Front-End DOMComplete Load 
2 2.5 3 3.5 4 4.5 5 5.5 6 6.5 ...
2 sec 8 sec Slope 
DOMContentLoaded 44.79% 61.72% 2.82% / sec 
Front-End 44.24% 49.60% 0.89% / sec 
DOMComplete 40.84% 57....
2 sec 8 sec Slope 
DOMContentLoaded 44.79% 61.72% 2.82% / sec 
Front-End 44.24% 49.60% 0.89% / sec 
DOMComplete 40.84% 57....
2 sec 8 sec Slope 
DOMContentLoaded 44.79% 61.72% 2.82% / sec 
Front-End 44.24% 49.60% 0.89% / sec 
DOMComplete 40.84% 57....
I S T H I S T H E 
ANSWER?
UNITED STATES VS AUSTRALIA 
60% 
45% 
30% 
15% 
0% 
2 3 4 5 6 7 8 9 10 11 12 
US AU
SUMMARY 
• There is probably no single answer 
• Depends on your users and what you want them to do 
• There may even be m...
WE’LL PROVIDE THE RUM, AND SOME GO PROS 
SOASTA WRAP PARTY
ATTRIBUTIONS 
https://www.flickr.com/photos/jcubic/14091200977 (Tombstone) 
https://www.flickr.com/photos/wasteofspace/596...
Upcoming SlideShare
Loading in …5
×

2014 11-18 rip onload

1,121 views

Published on

RIP Onload: Finding a better measurement yardstick. Buddy Brewer and Philip Tellis, Velocity EU Barcelona, 18 November 2014.

Published in: Internet
  • Be the first to comment

2014 11-18 rip onload

  1. 1. FINDING A BETTER MEASUREMENT YARDSTICK RIP ONLOAD
  2. 2. Buddy Brewer @bbrewer Philip Tellis @bluesmoon
  3. 3. ONLOAD BENEFITS THE GOOD
  4. 4. • Supported by all browsers • Light weight instrumentation • Supported by all monitoring tools • Able to compare across sites
  5. 5. ONLOAD DRAWBACKS THE BAD
  6. 6. • Easy for developers to abuse • Won't work for single page applications • Often misses perceived performance
  7. 7. ONLOAD WEIRDNESS THE UGLY
  8. 8. • Inconsistent across web sites • Users could successfully navigate forward before onload
  9. 9. ALTERNATIVES
  10. 10. BROWSER STANDARD EVENTS
  11. 11. • Load event • Front-End time • DOMContentLoaded • DOMComplete
  12. 12. CUSTOM EVENTS
  13. 13. var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { [].slice.call(mutation.addedNodes).forEach(function(node) { if (node.nodeName === "IMG") { if (node.offsetHeight && node.offsetWidth) console.log("Image loaded before mutation"); else node.onload = node.onerror = function(event) { console.log("Image " + event.type + "ed"); }; } }); }); }); observer.observe(document, { childList: true, subtree: true }); MutationObserver Pattern: https://developer.mozilla.org/en/docs/Web/API/MutationObserver
  14. 14. // create and dispatch the onUsable event var event = new CustomEvent(“Usable", {“detail":{"foo":true}}); element.dispatchEvent(event); Chrome, Firefox, Opera, Safari, Mobile Safari CustomEvent Pattern: https://developer.mozilla.org/en/docs/Web/API/CustomEvent
  15. 15. (function () { function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; }; CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })(); IE 9 & 10 CustomEvent Pattern: https://developer.mozilla.org/en/docs/Web/API/CustomEvent
  16. 16. if (document.createEventObject) { createCustomEvent = function (e_name, params) { var evt = document.createEventObject(); evt.type = evt.propertyName = e_name; evt.detail = params.detail; return evt; }; } Android 2.x CustomEvent Pattern: https://developer.mozilla.org/en/docs/Web/API/CustomEvent
  17. 17. WE COULD USE USERTIMING • window.performance.mark(“Usable”); • Good for setting a time point • Does not actually fire an Event, so you have to poll
  18. 18. POLL!
  19. 19. SINGLE PAGE APPS • Easy to create a proxy around XMLHttpRequest • Does not capture sub-resources required for the “single page” • Not all XHRs are created equal, so we have an exclude list • But you can capture HTTP response status
  20. 20. WE COULD USE MRML • <BRAINSCAN> tag is useful here • Limited Browser support (none) • http://ifaq.wap.org/computers/mrml.html
  21. 21. BEHAVIORAL EVENTS
  22. 22. • Time to scroll • Time to click • Time to convert
  23. 23. EVALUATION CRITERIA
  24. 24. 1. Identify a key user behavior 2. Track this behavior with the timing data 3. Find the timer that the behavior is most sensitive to
  25. 25. BOUNCE RATE
  26. 26. CONVERSION RATE
  27. 27. SESSION LENGTH
  28. 28. TRACKING TIMER IMPACT 70% 53% 35% 18% 0% DOMContentLoaded Front-End DOMComplete Load 2 2.5 3 3.5 4 4.5 5 5.5 6 6.5 7 7.5 8 Seconds Bounce Rate
  29. 29. 2 sec 8 sec Slope DOMContentLoaded 44.79% 61.72% 2.82% / sec Front-End 44.24% 49.60% 0.89% / sec DOMComplete 40.84% 57.01% 2.70% / sec Load 39.41% 55.53% 2.69% / sec
  30. 30. 2 sec 8 sec Slope DOMContentLoaded 44.79% 61.72% 2.82% / sec Front-End 44.24% 49.60% 0.89% / sec DOMComplete 40.84% 57.01% 2.70% / sec Load 39.41% 55.53% 2.69% / sec
  31. 31. 2 sec 8 sec Slope DOMContentLoaded 44.79% 61.72% 2.82% / sec Front-End 44.24% 49.60% 0.89% / sec DOMComplete 40.84% 57.01% 2.70% / sec Load 39.41% 55.53% 2.69% / sec
  32. 32. I S T H I S T H E ANSWER?
  33. 33. UNITED STATES VS AUSTRALIA 60% 45% 30% 15% 0% 2 3 4 5 6 7 8 9 10 11 12 US AU
  34. 34. SUMMARY • There is probably no single answer • Depends on your users and what you want them to do • There may even be multiple answers for one web site • Perhaps the best we can hope for is to find a consistent methodology for determining what “done” means
  35. 35. WE’LL PROVIDE THE RUM, AND SOME GO PROS SOASTA WRAP PARTY
  36. 36. ATTRIBUTIONS https://www.flickr.com/photos/jcubic/14091200977 (Tombstone) https://www.flickr.com/photos/wasteofspace/5961093609 (He-Man) https://www.flickr.com/photos/usagent/3111087806 (Skeletor) https://www.flickr.com/photos/stoic1/2693944218 (Tung Lashor) https://www.flickr.com/photos/marfis75/8031936764 (Two Exits) https://www.flickr.com/photos/exfordy/222888541 (Customized Citroën) https://www.flickr.com/photos/bluesmoon/10271376176/ (Pat and Steve)

×