From Milliseconds to Millions: A Look at the Numbers Powering Web Performance

We all know performance is big business, but how big? Let’s take a look at some of the numbers powering the web performance industry from both sides of the table. What do performance improvements mean for my clients, and how do we translate that into a working relationship?

Transcript

1. From Milliseconds
   to Millions
   A Look at the Numbers Powering Web Performance
   

   View Slide

2. Hi, I’m Harry
   Consultant Performance Engineer
   Leeds, UK
   @csswizardry
   

   View Slide

3. View Slide

4. From clearfixes
   to waterfalls.
   

   View Slide

5. Ask the
   Right Questions
   

   View Slide

6. I don’t have
   all of the answers.
   

   View Slide

7. Ask the Right Questions
   How do you know the site is slow?
   What key areas of the site should I look at?
   What will it being faster mean for the business?
   How do you intend to measure this?
   

   View Slide

8. Nobody Wants
   a Faster Website
   

   View Slide

9. They want the
   most effective website.
   

   View Slide

10. Motives
    Increase revenues
    Improve engagement
    Drive sign-ups
    Raise conversions
    Solicit donations
    Deliver content
    

    View Slide

11. Case Study
    

    View Slide

12. We want to be faster but
    still run the same number of ads.
    Publishing Client
    “
    

    View Slide

13. 5HYHQXH $PRXQWRI$GVDQG7UDFNLQJ (QJDJHPHQW
    $PRXQWRI$GVDQG7UDFNLQJDQG5HYHQXH
    Ads
    Engagement
    Revenue
    

    View Slide

14. How much can we
    get away with?
    

    View Slide

15. View Slide

16. You Can’t Fix What
    You Can’t Measure
    

    View Slide

17. Gather Data
    Spend time gathering statistics
    Then spend some more
    

    View Slide

18. View Slide

19. Google Analytics
    Average data means means—we want percentiles
    Only samples 1% of sessions—insufficient for many sites
    Far too coarse—aggregates every device, browser, page, region
    Focuses on load times—considered a legacy metric
    

    View Slide

20. Any data is
    better than none.
    

    View Slide

21. Case Study
    

    View Slide

22. Do you know about your
    Venezuela problem?
    “
    
    

    View Slide

23. Do you know about your
    Venezuela problem?
    “
    
    

    View Slide

24. View Slide

25. Venezuela
    Economy is tanked
    Government minted Petro
    Electricity is virtually free
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. Follow
    the Numbers
    

    View Slide

33. Numbers
    seldom lie.
    

    View Slide

34. Case Study
    

    View Slide

35. View Slide

36. 
    ...
    content="width=device-width, minimum-scale=1.0" />
    
    
    
    ...
    
    

    View Slide

37. 
    
    content="width=device-width, minimum-scale=1.0" />
    ...
    
    ...
    
    
    

    View Slide

38. It got slower.
    

    View Slide

39. Move Slow
    to Move Fast
    

    View Slide

40. There is
    probably no rush.
    

    View Slide

41. Take your time
    to measure.
    

    View Slide

42. Release
    incrementally.
    

    View Slide

43. One thematic
    release per day.
    

    View Slide

44. What Has Most Impact?
    Know where to look next time
    Know what to avoid next time
    

    View Slide

45. Maximise the
    Work Not Done
    

    View Slide

46. It’s just as important
    to know what not to do.
    

    View Slide

47. Case Study
    

    View Slide

48. View Slide

49. Most conversions happen at 2s but our median is 2.9s.
    

    View Slide

50. Case Study
    

    View Slide

51. View Slide

52. 
    
    
    
    
    
    
    
    &RPSDQ\
    
    
    
    
    
    9LWDPL[ %UHYLOOH 1LQMD %OHQGWHF .LWFKHQ$LG 1XWUL%XOOHW
    /RDG7LPH 6WDUW5HQGHU
    /RDG7LPHDQG6WDUW5HQGHU±%HIRUH
    

    View Slide

53. There is no prize
    beyond first place.
    

    View Slide

54. Let’s Ignore Load
    Already the best on desktop and mobile
    It’s a legacy metric anyway
    We’re definitely suffering with Start Render
    Everyone hitting the site wants to see stuff
    Start Render is our focus
    

    View Slide

55. Load is subresources;
    Start Render is .
    

    View Slide

56. A week in their .
    

    View Slide

57. 
    
    
    
    
    
    
    
    
    &RPSDQ\
    
    
    
    
    
    9LWDPL[ %UHYLOOH %OHQGWHF 1LQMD 1XWUL%XOOHW .LWFKHQ$LG
    /RDG7LPH 6WDUW5HQGHU
    /RDG7LPHDQG6WDUW5HQGHU±$IWHU
    

    View Slide

58. View Slide

59. 4EKI
    8MQIW
    
    
    
    
    ,SQI 'EXIKSV] 4VSHYGX 4(4 764
    0SEH8MQI 88*& 7XEVX6IRHIV *MVWX'SRXIRXJYP4EMRX 7TIIH-RHI\
    0EWX4EMRXIH,IVS *MVWX'49-HPI
    %TTPI1MPIWXSRI8MQMRKWƁ1SFMPI
    

    View Slide

60. Pricing
    Performance
    

    View Slide

61. Don’t do it for the money,
    but never do it for no money.
    Oliver Reichenstein
    “
    

    View Slide

62. Performance directly
    affects the bottom line.
    

    View Slide

63. This is not a good
    time to be shy.
    

    View Slide

64. Case Study
    

    View Slide

65. View Slide

66. 03.s average [reduction in] latency
    across our funnel equals £8m a year in
    additional revenue.
    csswz.it/2FQHt2S
    “
    

    View Slide

67. Value-Based
    Pricing.
    

    View Slide

68. My fee represents my contribution to
    the project with a dramatic ROI for you
    and equitable compensation for me.
    Alan Weiss
    “
    

    View Slide

69. How much are we likely
    to make from this project?
    “
    

    View Slide

70. How have you calculated
    the value of this project?
    

    View Slide

71. I am not your
    Business Analyst.
    

    View Slide

72. But I can be
    for a little bit.
    

    View Slide

73. Phase Zero.
    

    View Slide

74. Phase Zero
    A period of pre-engagement
    Let’s work out the value of the project together
    Then we know how much it’s worth to you…
    …and I know what to charge you.
    

    View Slide

75. View Slide

76. Customer Data
    and A/B Tests.
    

    View Slide

77. 3× more conversions if we start
    rendering under 3s compared to after 6s
    

    View Slide

78. View Slide

79. 62.1%
    87.5%
    Bounce Rate With and Without Cloud.typography
    

    View Slide

80. Now we can put
    numbers against it.
    

    View Slide

81. If we can achieve a start render of
    0.9s, we stand to increase conversions
    by 8%. Across one year, this equates to
    increased revenues of £1–1.2m.
    I’ll take X%.
    “
    

    View Slide

82. Keep on
    Top of Things
    

    View Slide

83. Performance
    budgets, pragmatically.
    

    View Slide

84. How should we set
    performance budgets?
    

    View Slide

85. Set to your worst point
    in the last two weeks.
    

    View Slide

86. 0.8s under budget: new budget set to 2.2s
    

    View Slide

87. Only just staying in budget: leave as-is but don’t slip further
    

    View Slide

88. Yikes! Lots of work to do here: budget is overshot daily
    

    View Slide

89. Normalise
    performance.
    

    View Slide

90. Normalise Performance
    Talk about it like it’s always been there
    Mention it in passing
    Have dashboards for individual teams
    

    View Slide

91. View Slide

92. Ultimately
    blur the lines.
    

    View Slide

93. Performance is a proxy
    for business success.
    

    View Slide

94. Know When
    to Stop
    

    View Slide

95. Good enough
    is good enough.
    

    View Slide

96. Thank You
    Very Much
    

    View Slide

97. Thank You
    Understand the situation fully before you begin
    Maximise the work not done
    Calculate the value of the project
    Know when to stop
    

    View Slide

98. harry.is/for-hire
    

    View Slide