This document discusses metrics for measuring web page performance beyond traditional page load times. It introduces navigation timing and resource timing APIs that provide performance metrics for individual page resources. It also discusses how to measure the impact of performance on business metrics like conversion rates. The document advocates setting realistic performance goals based on metrics like median load times and percentile improvements rather than aiming for the fastest possible pages.

1. B E Y O N D PA G E L E V E L M E T R I C S

2. Buddy Brewer
@bbrewer
Philip Tellis
@bluesmoon

3. G I T H U B
https://github.com/lognormal/
velocity-sc2014-beyond-page-
metrics
https://github.com/lognormal/
boomerang
git clone <clone url>

4. W H AT D O E S A PA G E L O O K L I K E O N
T H E N E T W O R K ?

5. H O W D O D I F F E R E N T B R O W S E R S
H A N D L E PA R A L L E L I Z AT I O N ?

6. W H I C H PA G E C O M P O N E N T S
A F F E C T P E R C E I V E D L AT E N C Y ?

7. A R E A N Y O F T H E M S P O F S ?
• Static JavaScript files, external CSS files
• Anything that blocks onload if you have scripts that
run on onload

8. W H Y D O W E
N E E D R U M ?
C A N ’ T W E G E T T H I S
A L R E A D Y ?

9. San Francisco
London
Paris
Gilroy
Tellisford
Eze

10. Fast
Connections
Slow
Connections

11. Common Browsers
Uncommon Browsers

12. ≠

13. N AV I G AT I O N T I M I N G
P E R F O R M A N C E T I M I N G

14. N AV I G AT I O N T I M I N G
AVA I L A B I L I T Y
• IE >= 9
• FF >= 7
• Chrome >= 6
• Opera >= 15
• Latest Android, Blackberry,
Opera Mobile, Chrome for
Android, Firefox for
Android, IE Mobile

15. N AV I G AT I O N T I M I N G E X A M P L E
var loadEventDuration = performance.timing.loadEventEnd - !
performance.timing.loadEventStart;

16. R E S O U R C E T I M I N G
P E R F O R M A N C E T I M E L I N E

17. R E S O U R C E T I M I N G AVA I L A B I L I T Y
• IE >= 10
• Chrome
• Opera >= 16
• Latest Opera Mobile, Chrome for Android, IE Mobile

18. R E S O U R C E T I M I N G G E T S U S
I N T E R E S T I N G T H I N G S
• Generate a complete waterfall
https://github.com/andydavies/waterfall
• Calculate a cache-hit-ratio per resource
• Identify problem resources

19. C O R S : C R O S S - O R I G I N R E S O U R C E
S H A R I N G
• Cross-domain resources only tell you start & end time
• Timing-Allow-Origin: *

20. L I M I TAT I O N S O F R E S O U R C E T I M I N G
• Does not report resources that error out, which is one
of the things we care about
• Doesn’t tell you if a response is a 304 or 200

21. M E A S U R I N G A S I N G L E O B J E C T
var url = 'http://www.buddybrewer.com/images/buddy.png';!
var me = performance.getEntriesByName(url)[0];!
var timings = { !
loadTime: me.duration, !
dns: me.domainLookupEnd - me.domainLookupStart, !
tcp: me.connectEnd - me.connectStart, !
waiting: me.responseStart - me.requestStart, !
fetch: me.responseEnd - me.responseStart!
}

22. M E A S U R I N G A C O L L E C T I O N O F
O B J E C T S
var i, first, last, entries = performance.getEntries();!
for (i=0; i<entries.length; i++) {!
if (entries[i].name.indexOf('platform.twitter.com') != -1) {!
if (first === undefined) !
first = entries[i];!
if (last === undefined) !
last = entries[i];!
if (entries[i].startTime < first.startTime) !
first = entries[i];!
if (entries[i].responseEnd > last.responseEnd) !
last = entries[i];!
}!
}!
console.log('Took ' + (last.responseEnd - first.startTime) + ' ms');

23. U S E R T I M I N G
P E R F O R M A N C E T I M I N G

24. U S E R T I M I N G
AVA I L A B I L I T Y
• IE >= 10
• Chrome >= 25
• Opera >= 15
• Latest Opera Mobile,
Chrome for Android, IE
Mobile

25. U S E R T I M I N G E X A M P L E
window.performance.mark('mark_start');!
setTimeout(function() {!
window.performance.mark('mark_end');!
window.performance.measure(‘measure_time_to_this_point’);!
window.performance.measure('measure_duration', 'mark_start',
‘mark_end');!
console.log('Long thing took ' + !
performance.getEntriesByName('measure_duration')[0].duration + !
' ms');!
}, 1000);

26. P E R F O R M A N C E M A N A G E M E N T I N
T H R E E S T E P S
How Fast Am I? How Fast Should I Be? How Do I Get There?

27. H O W FA S T S H O U L D I B E ?

28. T R A C K I N G C O N V E R S I O N S
W H A T I S A C O N V E R S I O N ?
Orders
Shares, Likes, Comments
Page Views
Subscriptions
Signups
Card Additions
Video Plays

29. M E A S U R I N G T H E I M PA C T O F S P E E D
S P E E D S T R O N G LY C O R R E L A T E S T O C O N V E R S I O N S

30. T H I S M E A N S W E
C A N M E A S U R E
PAT I E N C E

31. E X A M P L E
Time Range: 1 Month
Median Load Time: 4.12
Visits: 25M
Conversion Rate: 2.71%
Average Order: $100

32. C A N W E D O B E T T E R ?
S P E E D I N C R E A S E S D R I V E B U S I N E S S I M P R O V E M E N T S
Median Load Time: 4.12
Total Conversion Rate: 2.71%
Conversion Rate @ 3.0s: 4.88%

33. W H AT A R E W E P L AY I N G F O R ?
Total Conversion Rate: 2.71%
Best Case Conversion Rate: 4.88%
Conversion Gap: 2.32%
Visits: 25M
AOV: $100

34. (4.88% - 2.71%) * 25M * $100 = $54.25M

35. 1 second = $54M

36. BUT

37. 1 0 0 T H P E R C E N T I L E ?
P O T E N T I A L V S R E A L I S T I C G O A L S
Median Load Time: 4.12
Total Conversion Rate: 2.71%
Conversion Rate @ 3.0s: 4.88%

38. R E A L I S T I C , I T E R AT I V E G O A L S
Target Load Time: 4 seconds (vs 3 seconds)
Percentile at 4 sec: 49th
Target Percentile: 60th (vs 100th percentile)
Percentile Gap: 11%

39. (4.88% - 2.71%) * (11% * 25M) * $100 = $6M

40. Improving from
4.12 sec @ 50th percentile
to
4.0 sec @ 60th percentile
=
$6M / month

41. Thank You

42. AT T R I B U T I O N S
https://secure.flickr.com/photos/torkildr/3462607995 (servers)
https://secure.flickr.com/photos/hackny/8038587477 (real users)
https://secure.flickr.com/photos/isherwoodchris/3096255994 (NYC)
https://secure.flickr.com/photos/motoxgirl/11972577704 (Countryside)
https://secure.flickr.com/photos/98640399@N08/9287370881 (Fiber Optic)
https://secure.flickr.com/photos/secretlondon/2592690167 (Acoustic Coupler)
https://secure.flickr.com/photos/jenny-pics/2904201123 (Rum Bottle)
https://secure.flickr.com/photos/bekathwia/2415018504 (Privacy Sweater)
https://secure.flickr.com/photos/zigzaglens/3566054676 (Star Field)