Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Harry Roberts
November 08, 2019

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?

Harry Roberts

November 08, 2019
Tweet

More Decks by Harry Roberts

Other Decks in Technology

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