1. FINDING A BETTER MEASUREMENT YARDSTICK
RIP ONLOAD

2. Buddy Brewer
@bbrewer
Philip Tellis
@bluesmoon

3. ONLOAD BENEFITS
THE GOOD

4. • Supported by all browsers
• Light weight instrumentation
• Supported by all monitoring tools
• Able to compare across sites

5. ONLOAD DRAWBACKS
THE BAD

6. • Easy for developers to abuse
• Won't work for single page applications
• Often misses perceived performance

7. ONLOAD WEIRDNESS
THE UGLY

8. • Inconsistent across web sites
• Users could successfully navigate forward before
onload

9. ALTERNATIVES

10. BROWSER
STANDARD
EVENTS

11. • Load event
• Front-End time
• DOMContentLoaded
• DOMComplete

12. CUSTOM
EVENTS

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. // 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. (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. 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. 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. POLL!

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. WE COULD USE MRML
• <BRAINSCAN> tag is useful here
• Limited Browser support (none)
• http://ifaq.wap.org/computers/mrml.html

21. BEHAVIORAL EVENTS

22. • Time to scroll
• Time to click
• Time to convert

23. EVALUATION
CRITERIA

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. BOUNCE RATE

26. CONVERSION RATE

27. SESSION LENGTH

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. 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. 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. 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. I S T H I S T H E
ANSWER?

33. UNITED STATES VS AUSTRALIA
60%
45%
30%
15%
0%
2 3 4 5 6 7 8 9 10 11 12
US AU

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. WE’LL PROVIDE THE RUM, AND SOME GO PROS
SOASTA WRAP PARTY

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)