Download - 2014 11-18 rip onload
![Page 1: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/1.jpg)
R I P O N L O A DF I N D I N G A B E T T E R M E A S U R E M E N T YA R D S T I C K
![Page 2: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/2.jpg)
Buddy Brewer @bbrewer
Philip Tellis @bluesmoon
![Page 3: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/3.jpg)
T H E G O O D
O N L O A D B E N E F I T S
![Page 4: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/4.jpg)
• Supported by all browsers
• Light weight instrumentation
• Supported by all monitoring tools
• Able to compare across sites
![Page 5: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/5.jpg)
T H E B A D
O N L O A D D R A W B A C K S
![Page 6: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/6.jpg)
• Easy for developers to abuse
• Won't work for single page applications
• Often misses perceived performance
![Page 7: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/7.jpg)
T H E U G LY
O N L O A D W E I R D N E S S
![Page 8: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/8.jpg)
• Inconsistent across web sites
• Users could successfully navigate forward before onload
![Page 9: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/9.jpg)
A LT E R N AT I V E S
![Page 10: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/10.jpg)
B R O W S E R S TA N D A R D E V E N T S
![Page 11: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/11.jpg)
• Load event
• Front-End time
• DOMContentLoaded
• DOMComplete
![Page 12: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/12.jpg)
C U S T O M E V E N T S
![Page 13: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/13.jpg)
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
![Page 14: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/14.jpg)
// create and dispatch the onUsable eventvar event = new CustomEvent(“Usable",
{“detail":{"foo":true}});
element.dispatchEvent(event);
CustomEvent Pattern: https://developer.mozilla.org/en/docs/Web/API/CustomEvent
Chrome, Firefox, Opera, Safari, Mobile Safari
![Page 15: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/15.jpg)
(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;})();
CustomEvent Pattern: https://developer.mozilla.org/en/docs/Web/API/CustomEvent
IE 9 & 10
![Page 16: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/16.jpg)
if (document.createEventObject){ createCustomEvent = function (e_name, params) { var evt = document.createEventObject(); evt.type = evt.propertyName = e_name; evt.detail = params.detail;
return evt; };}
CustomEvent Pattern: https://developer.mozilla.org/en/docs/Web/API/CustomEvent
Android 2.x
![Page 17: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/17.jpg)
W E C O U L D U S E U S E R T I M I N G
• window.performance.mark(“Usable”);
• Good for setting a time point
• Does not actually fire an Event, so you have to poll
![Page 18: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/18.jpg)
P O L L !
![Page 19: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/19.jpg)
S I N G L E PA G E A P P S
• 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
![Page 20: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/20.jpg)
W E C O U L D U S E M R M L
• <BRAINSCAN> tag is useful here
• Limited Browser support (none)
• http://ifaq.wap.org/computers/mrml.html
![Page 21: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/21.jpg)
B E H AV I O R A L E V E N T S
![Page 22: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/22.jpg)
• Time to scroll
• Time to click
• Time to convert
![Page 23: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/23.jpg)
E VA L U AT I O N C R I T E R I A
![Page 24: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/24.jpg)
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
![Page 25: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/25.jpg)
B O U N C E R AT E
![Page 26: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/26.jpg)
C O N V E R S I O N R AT E
![Page 27: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/27.jpg)
S E S S I O N L E N G T H
![Page 28: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/28.jpg)
T R A C K I N G T I M E R I M PA C T
0%
18%
35%
53%
70%
2 2.5 3 3.5 4 4.5 5 5.5 6 6.5 7 7.5 8
DOMContentLoaded Front-End DOMComplete Load
Seconds
Bo
unce
Rat
e
![Page 29: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/29.jpg)
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
![Page 30: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/30.jpg)
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
![Page 31: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/31.jpg)
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
![Page 32: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/32.jpg)
I S T H I S T H E A N S W E R ?
![Page 33: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/33.jpg)
U N I T E D S TAT E S V S A U S T R A L I A
0%
15%
30%
45%
60%
2 3 4 5 6 7 8 9 10 11 12
US AU
![Page 34: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/34.jpg)
S U M M A R Y
• 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
![Page 35: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/35.jpg)
S O A S TA W R A P PA R T YW E ’ L L P R O V I D E T H E R U M , A N D S O M E G O P R O S
![Page 36: 2014 11-18 rip onload](https://reader033.vdocuments.site/reader033/viewer/2022060122/5595fca11a28aba6548b482b/html5/thumbnails/36.jpg)
AT T R I B U T I O N S
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)