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 full-size slide

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

    View full-size slide

  3. From clearfixes
    to waterfalls.

    View full-size slide

  4. Ask the
    Right Questions

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. Nobody Wants
    a Faster Website

    View full-size slide

  8. They want the
    most effective website.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. How much can we
    get away with?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. Any data is
    better than none.

    View full-size slide

  17. Do you know about your
    Venezuela problem?


    View full-size slide

  18. Do you know about your
    Venezuela problem?


    View full-size slide

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

    View full-size slide

  20. Follow
    the Numbers

    View full-size slide

  21. Numbers
    seldom lie.

    View full-size slide


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



    ...

    View full-size slide



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

    ...


    View full-size slide

  24. It got slower.

    View full-size slide

  25. Move Slow
    to Move Fast

    View full-size slide

  26. There is
    probably no rush.

    View full-size slide

  27. Take your time
    to measure.

    View full-size slide

  28. Release
    incrementally.

    View full-size slide

  29. One thematic
    release per day.

    View full-size slide

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

    View full-size slide

  31. Maximise the
    Work Not Done

    View full-size slide

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

    View full-size slide

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

    View full-size slide









  34. &RPSDQ\





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

    View full-size slide

  35. There is no prize
    beyond first place.

    View full-size slide

  36. 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 full-size slide

  37. Load is subresources;
    Start Render is .

    View full-size slide

  38. A week in their .

    View full-size slide










  39. &RPSDQ\





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

    View full-size slide

  40. 4EKI
    8MQIW




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

    View full-size slide

  41. Pricing
    Performance

    View full-size slide

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

    View full-size slide

  43. Performance directly
    affects the bottom line.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Value-Based
    Pricing.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. I am not your
    Business Analyst.

    View full-size slide

  51. But I can be
    for a little bit.

    View full-size slide

  52. 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 full-size slide

  53. Customer Data
    and A/B Tests.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Now we can put
    numbers against it.

    View full-size slide

  57. 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 full-size slide

  58. Keep on
    Top of Things

    View full-size slide

  59. Performance
    budgets, pragmatically.

    View full-size slide

  60. How should we set
    performance budgets?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. Normalise
    performance.

    View full-size slide

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

    View full-size slide

  67. Ultimately
    blur the lines.

    View full-size slide

  68. Performance is a proxy
    for business success.

    View full-size slide

  69. Know When
    to Stop

    View full-size slide

  70. Good enough
    is good enough.

    View full-size slide

  71. Thank You
    Very Much

    View full-size slide

  72. 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 full-size slide

  73. harry.is/for-hire

    View full-size slide