The Web Performance Landscape in 2024 [PerfNow 2024]

I delivered the keynote on day 1 of performance.now() in Amsterdam to catch folks up on the current performance landscape. Topics included:

• Global web usage and performance stats
• The performance (in)equality gap
• Page bloat – how much bigger can web pages get?!
• Metrics – what they can tell us (and what they can’t)
• Common optimization mistakes
• And more!

Transcript

1. The Web Performance Landscape in 2024 webperf.social/@tammy #perfnow
2. webperf.social/@tammy tammyeverts.bsky.social linkedin.com/in/tammyeverts
4. Web Performance Guide speedcurve.com/web-performance-guide/
5. speedcurve.com/benchmarks
6. PERFORMANCE
8. Dunning-Kruger effect
9. Dunning-Kruger effect Cognitive bias in which people with limited competence in a particular domain overestimate their abilities…
10. 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
13. We don’t know what we don’t know
17. 2007 Very few metrics Synthetic monitoring Limited understanding of real users Simpler, smaller pages Very few third parties
18. 18 years
19. There are still significant gaps in what we know about…
20. Our users There are still significant gaps in what we know about…
21. Our users Their devices There are still significant gaps in what we know about…
22. Our users Their devices Their browsers There are still significant gaps in what we know about…
23. Our users Their devices Their browsers Our metrics There are still significant gaps in what we know about…
24. Our users Their devices Their browsers Our metrics Our teams There are still significant gaps in what we know about…
25. Our users Their devices Their browsers Our metrics Our teams Our pages There are still significant gaps in what we know about…
26. 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…
27. 5.52 billion internet users worldwide Statista, October 2024
30. So many ways to use the web
31. 71.1% Statcounter GlobalStats, October 2024
32. 95.62% Statcounter GlobalStats, October 2024
33. 60.38% Statcounter GlobalStats, October 2024
34. infrequently.org/series/performance-inequality iPhone
35. infrequently.org/series/performance-inequality iPhone = iNequality
36. “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
37. “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
38. LCP and INP on Android • 2022 vs 2024 bsky.app/profile/anniesullie.bsky.social/post/3l7qo3ltvv22i
39. worldpopulationreview.com/country-rankings/internet-speeds-by-country
40. So many metrics
41. TTFB FCP LCP INP CLS TTI FID TBT DOM CPU OMG WTF
42. 50+ synthetic metrics 25 additional metrics for EACH third party 30+ RUM metrics ??? custom metrics
43. Or too few metrics?
44. speedcurve.com/web-performance-guide/get-started-with-core-web-vitals/
45. speedcurve.com/web-performance-guide/glossary-of-web-performance-metrics
46. 66.68% Statcounter GlobalStats, October 2024
47. 18.07% Statcounter GlobalStats, October 2024
49. There is no consistent correlation with Google's thresholds for 'Good', 'Needs Improvement' and 'Poor'
50. speedcurve.com/blog/INP-user-experience-correlation 400ms 100ms 600ms 350ms ‘Good’ INP is under 200ms – or is it?
51. To recap…
52. We mostly build for iOS We mostly monitor Chrome Popular metrics don’t capture Safari Our goals might be wrong
53. what we know
54. Pages are enormous
55. 2022 2024 HTTP Archive, October 2024
56. Median resource size • 2022 vs 2024 HTTP Archive, October 2024
57. 26 scripts 23 scripts 2022 2024 Median JS size & requests HTTP Archive, October 2024
59. 2125 KB
60. Resource size • median vs 90p HTTP Archive, October 2024
61. Resource requests • median vs 90p HTTP Archive, October 2024
62. We’re still making the same optimization mistakes
63. 19 out of 20 pages had an inefficient cache policy speedcurve.com/blog/15-neglected-page-speed-optimizations
64. 17 out of 20 pages had unused JS speedcurve.com/blog/15-neglected-page-speed-optimizations
65. 16 out of 20 didn’t enable bfcache restoration speedcurve.com/blog/15-neglected-page-speed-optimizations
66. 14 out of 20 didn’t have ‘width’ and ‘height’ attributes speedcurve.com/blog/15-neglected-page-speed-optimizations
67. 2 sites lazy loaded the LCP image! speedcurve.com/blog/15-neglected-page-speed-optimizations
68. performance accessibility
69. crucible.io/insights/design/web-design/website-statistics-in-2024-security-accessibility 96.3% of pages had WCAG failures
71. Maybe none of these issues affected the critical rendering path
72. Maybe none of these issues affected the critical rendering path Maybe optimizations were hard (or impossible) to implement
73. Maybe none of these issues affected the critical rendering path Maybe optimizations were hard (or impossible) to implement Maybe people just did not know
75. PERFORMANCE
76. PERFORMANCE
80. Always Be Asking
81. 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?
83. Room to learn =
84. Room to learn = Opportunities to make an impact
85. Thank you!