0
B E Y O N D PA G E L E V E L M E T R I C S
Buddy Brewer
@bbrewer
Philip Tellis
@bluesmoon
G I T H U B
https://github.com/lognormal/
velocity-sc2014-beyond-page-
metrics
https://github.com/lognormal/
boomerang
git...
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 ?
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 ?
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 ?
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 hav...
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 ?
San Francisco
London
Paris
Gilroy
Tellisford
Eze
Fast
Connections
Slow
Connections
Common Browsers
Uncommon Browsers
≠
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
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, Blac...
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...
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
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 Andr...
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....
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
• ...
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...
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...
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=...
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
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 Androi...
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...
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?
H O W FA S T S H O U L D I B E ?
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
Subscr...
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
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
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
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...
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%
...
(4.88% - 2.71%) * 25M * $100 = $54.25M
1 second = $54M
BUT
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 ...
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...
(4.88% - 2.71%) * (11% * 25M) * $100 = $6M
Improving from
4.12 sec @ 50th percentile
to
4.0 sec @ 60th percentile
=
$6M / month
Thank You
AT T R I B U T I O N S
https://secure.flickr.com/photos/torkildr/3462607995 (servers)
https://secure.flickr.com/photos/hac...
Upcoming SlideShare
Loading in...5
×

2014 06-23 velocity sc beyond page metrics

2,604

Published on

Published in: Sports, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,604
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
46
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "2014 06-23 velocity sc beyond page metrics"

  1. 1. B E Y O N D PA G E L E V E L M E T R I C S
  2. 2. Buddy Brewer @bbrewer Philip Tellis @bluesmoon
  3. 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. 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. 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. 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. 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. 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. 9. San Francisco London Paris Gilroy Tellisford Eze
  10. 10. Fast Connections Slow Connections
  11. 11. Common Browsers Uncommon Browsers
  12. 12.
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. H O W FA S T S H O U L D I B E ?
  28. 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. 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. 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. 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. 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. 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. 34. (4.88% - 2.71%) * 25M * $100 = $54.25M
  35. 35. 1 second = $54M
  36. 36. BUT
  37. 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. 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. 39. (4.88% - 2.71%) * (11% * 25M) * $100 = $6M
  40. 40. Improving from 4.12 sec @ 50th percentile to 4.0 sec @ 60th percentile = $6M / month
  41. 41. Thank You
  42. 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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×