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.
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 ?
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?
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
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%
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)