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

Buddy Brewer @bbrewer

Philip Tellis @bluesmoon

T H E G O O D

O N L O A D B E N E F I T S

• Supported by all browsers

• Light weight instrumentation

• Supported by all monitoring tools

• Able to compare across sites

T H E B A D

O N L O A D D R A W B A C K S

• Easy for developers to abuse

• Won't work for single page applications

• Often misses perceived performance

T H E U G LY

O N L O A D W E I R D N E S S

• Inconsistent across web sites

• Users could successfully navigate forward before onload

A LT E R N AT I V E S

B R O W S E R S TA N D A R D E V E N T S

• Load event

• Front-End time

• DOMContentLoaded

• DOMComplete

C U S T O M E V E N T S

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

// 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

(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

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

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

P O L L !

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

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

B E H AV I O R A L E V E N T S

• Time to scroll

• Time to click

• Time to convert

E VA L U AT I O N C R I T E R I A

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

B O U N C E R AT E

C O N V E R S I O N R AT E

S E S S I O N L E N G T H

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

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

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

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

I S T H I S T H E A N S W E R ?

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

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

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

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)