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

From Milliseconds
 to Millions: A Look at the N...

Harry Roberts
November 08, 2019
Technology
1
2.4k

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

See All by Harry Roberts
Site-Speed That Sticks
csswizardry
2
190
How to Think Like a Performance Engineer
csswizardry
22
1.2k
cache rules everything
csswizardry
3
3k
My Website Is Slow!
 Where Do I Start?
csswizardry
5
410
Optimising Largest Contentful Paint
csswizardry
33
3k
Get Your Head Straight
csswizardry
15
19k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
9k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.3k
FaCSSt: CSS & Performance
csswizardry
26
3.9k

Other Decks in Technology

See All in Technology
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
Storage Browser for Amazon S3
miu_crescent
1
130
podman_update_2024-12
orimanabu
1
260
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
How to be an AWS Community Builder | 君もAWS Community Builderになろう！〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
530
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
NW-JAWS #14 re:Invent 2024（予選落ち含）で 発表された推しアップデートについて
nagisa53
0
250
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
360
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
730
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
370
Oracle Cloud Infrastructure：2024年12月度サービス・アップデート
oracle4engineer
PRO
0
160

Featured

See All Featured
Side Projects
sachag
452
42k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Six Lessons from altMBA
skipperchong
27
3.5k
Building Applications with DynamoDB
mza
91
6.1k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Building an army of robots
kneath
302
44k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k

Transcript

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

    Web Performance

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

  3. None

  4. From clearfixes to waterfalls.

  5. Ask the Right Questions

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

  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?

  8. Nobody Wants a Faster Website

  9. They want the most effective website.

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

    donations Deliver content

  11. Case Study

  12. We want to be faster but still run the same

    number of ads. Publishing Client “

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

  14. How much can we get away with?

  15. None

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

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

  18. None

  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

  20. Any data is better than none.

  21. Case Study

  22. Do you know about your Venezuela problem? “

  23. Do you know about your Venezuela problem? “

  24. None

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

    free
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None

  32. Follow the Numbers

  33. Numbers seldom lie.

  34. Case Study

  35. None

  36. <head> <script>...</script> <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> <link rel="stylesheet" href="/app.css"

    /> <script src="/app.js"></script> <meta charset="UTF-8" /> <title>...</title> </head>

  37. <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> <title>...</title>

    <script src="/app.js"></script> <script>...</script> <link rel="stylesheet" href="/app.css" /> </head>

  38. It got slower.

  39. Move Slow to Move Fast

  40. There is probably no rush.

  41. Take your time to measure.

  42. Release incrementally.

  43. One thematic release per day.

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

    Know what to avoid next time

  45. Maximise the Work Not Done

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

  47. Case Study

  48. None

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

  50. Case Study

  51. None

  52.          

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

  53. There is no prize beyond first place.

  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

  55. Load is subresources; Start Render is <head>.

  56. A week in their <head>.

  57.          

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

  59. 4EKI 8MQI W     ,SQI 'EXIKSV] 4VSHYGX

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

  60. Pricing Performance

  61. Don’t do it for the money, but never do it

    for no money. Oliver Reichenstein “

  62. Performance directly affects the bottom line.

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

  64. Case Study

  65. None

  66. 03.s average [reduction in] latency across our funnel equals £8m

    a year in additional revenue. csswz.it/2FQHt2S “

  67. Value-Based Pricing.

  68. My fee represents my contribution to the project with a

    dramatic ROI for you and equitable compensation for me. Alan Weiss “

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

    “

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

  71. I am not your Business Analyst.

  72. But I can be for a little bit.

  73. Phase Zero.

  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.
  75. None

  76. Customer Data and A/B Tests.

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

    to after 6s
  78. None

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

  80. Now we can put numbers against it.

  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%. “

  82. Keep on Top of Things

  83. Performance budgets, pragmatically.

  84. How should we set performance budgets?

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

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

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

    further

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

    daily

  89. Normalise performance.

  90. Normalise Performance Talk about it like it’s always been there

    Mention it in passing Have dashboards for individual teams
  91. None

  92. Ultimately blur the lines.

  93. Performance is a proxy for business success.

  94. Know When to Stop

  95. Good enough is good enough.

  96. Thank You Very Much

  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

  98. harry.is/for-hire