The Web Performance Landscape in 2024 [PerfNow 2024]

Slide 1

Slide 1 text

The Web Performance Landscape in 2024 webperf.social/@tammy #perfnow

Slide 2

Slide 2 text

webperf.social/@tammy tammyeverts.bsky.social linkedin.com/in/tammyeverts

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Web Performance Guide speedcurve.com/web-performance-guide/

Slide 5

Slide 5 text

speedcurve.com/benchmarks

Slide 6

Slide 6 text

PERFORMANCE

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Dunning-Kruger effect

Slide 9

Slide 9 text

Dunning-Kruger effect Cognitive bias in which people with limited competence in a particular domain overestimate their abilities…

Slide 10

Slide 10 text

Dunning-Kruger effect Cognitive bias in which people with limited competence in a particular domain overestimate their abilities… …and high performers tend to underestimate their abilities

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

We don’t know what we don’t know

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

2007

Slide 17

Slide 17 text

2007 Very few metrics Synthetic monitoring Limited understanding of real users Simpler, smaller pages Very few third parties

Slide 18

Slide 18 text

18 years

Slide 19

Slide 19 text

There are still significant gaps in what we know about…

Slide 20

Slide 20 text

Our users There are still significant gaps in what we know about…

Slide 21

Slide 21 text

Our users Their devices There are still significant gaps in what we know about…

Slide 22

Slide 22 text

Our users Their devices Their browsers There are still significant gaps in what we know about…

Slide 23

Slide 23 text

Our users Their devices Their browsers Our metrics There are still significant gaps in what we know about…

Slide 24

Slide 24 text

Our users Their devices Their browsers Our metrics Our teams There are still significant gaps in what we know about…

Slide 25

Slide 25 text

Our users Their devices Their browsers Our metrics Our teams Our pages There are still significant gaps in what we know about…

Slide 26

Slide 26 text

Our users Their devices Their browsers Our metrics Our teams Our pages Effectiveness of our optimizations There are still significant gaps in what we know about…

Slide 27

Slide 27 text

5.52 billion internet users worldwide Statista, October 2024

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

So many ways to use the web

Slide 31

Slide 31 text

71.1% Statcounter GlobalStats, October 2024

Slide 32

Slide 32 text

95.62% Statcounter GlobalStats, October 2024

Slide 33

Slide 33 text

60.38% Statcounter GlobalStats, October 2024

Slide 34

Slide 34 text

infrequently.org/series/performance-inequality iPhone

Slide 35

Slide 35 text

infrequently.org/series/performance-inequality iPhone = iNequality

Slide 36

Slide 36 text

“The performance gap between wealthy users and budget shoppers grew more this year than the gains from improved chips delivered at the low end.” infrequently.org/series/performance-inequality Alex Russell

Slide 37

Slide 37 text

“The performance gap between wealthy users and budget shoppers grew more this year than the gains from improved chips delivered at the low end.” “Inequality is growing faster than the bottom-end can improve.” infrequently.org/series/performance-inequality Alex Russell

Slide 38

Slide 38 text

LCP and INP on Android • 2022 vs 2024 bsky.app/profile/anniesullie.bsky.social/post/3l7qo3ltvv22i

Slide 39

Slide 39 text

worldpopulationreview.com/country-rankings/internet-speeds-by-country

Slide 40

Slide 40 text

So many metrics

Slide 41

Slide 41 text

TTFB FCP LCP INP CLS TTI FID TBT DOM CPU OMG WTF

Slide 42

Slide 42 text

50+ synthetic metrics 25 additional metrics for EACH third party 30+ RUM metrics ??? custom metrics

Slide 43

Slide 43 text

Or too few metrics?

Slide 44

Slide 44 text

speedcurve.com/web-performance-guide/get-started-with-core-web-vitals/

Slide 45

Slide 45 text

speedcurve.com/web-performance-guide/glossary-of-web-performance-metrics

Slide 46

Slide 46 text

66.68% Statcounter GlobalStats, October 2024

Slide 47

Slide 47 text

18.07% Statcounter GlobalStats, October 2024

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

There is no consistent correlation with Google's thresholds for 'Good', 'Needs Improvement' and 'Poor'

Slide 50

Slide 50 text

speedcurve.com/blog/INP-user-experience-correlation 400ms 100ms 600ms 350ms ‘Good’ INP is under 200ms – or is it?

Slide 51

Slide 51 text

To recap…

Slide 52

Slide 52 text

We mostly build for iOS We mostly monitor Chrome Popular metrics don’t capture Safari Our goals might be wrong

Slide 53

Slide 53 text

what we know

Slide 54

Slide 54 text

Pages are enormous

Slide 55

Slide 55 text

2022 2024 HTTP Archive, October 2024

Slide 56

Slide 56 text

Median resource size • 2022 vs 2024 HTTP Archive, October 2024

Slide 57

Slide 57 text

26 scripts 23 scripts 2022 2024 Median JS size & requests HTTP Archive, October 2024

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

2125 KB

Slide 60

Slide 60 text

Resource size • median vs 90p HTTP Archive, October 2024

Slide 61

Slide 61 text

Resource requests • median vs 90p HTTP Archive, October 2024

Slide 62

Slide 62 text

We’re still making the same optimization mistakes

Slide 63

Slide 63 text

19 out of 20 pages had an inefficient cache policy speedcurve.com/blog/15-neglected-page-speed-optimizations

Slide 64

Slide 64 text

17 out of 20 pages had unused JS speedcurve.com/blog/15-neglected-page-speed-optimizations

Slide 65

Slide 65 text

16 out of 20 didn’t enable bfcache restoration speedcurve.com/blog/15-neglected-page-speed-optimizations

Slide 66

Slide 66 text

14 out of 20 didn’t have ‘width’ and ‘height’ attributes speedcurve.com/blog/15-neglected-page-speed-optimizations

Slide 67

Slide 67 text

2 sites lazy loaded the LCP image! speedcurve.com/blog/15-neglected-page-speed-optimizations

Slide 68

Slide 68 text

performance accessibility

Slide 69

Slide 69 text

crucible.io/insights/design/web-design/website-statistics-in-2024-security-accessibility 96.3% of pages had WCAG failures

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Maybe none of these issues affected the critical rendering path

Slide 72

Slide 72 text

Maybe none of these issues affected the critical rendering path Maybe optimizations were hard (or impossible) to implement

Slide 73

Slide 73 text

Maybe none of these issues affected the critical rendering path Maybe optimizations were hard (or impossible) to implement Maybe people just did not know

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

PERFORMANCE

Slide 76

Slide 76 text

PERFORMANCE

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

Always Be Asking

Slide 81

Slide 81 text

1. Who am I building for? 2. Who am I testing for? 3. Do I know what’s on my pages – and its impact? 4. Am I doing the right optimizations? 5. Am I tracking the right metrics? 6. Should I be using custom metrics? 7. When my pages get faster, does it help my users and my business?