Web performance at Friends of Search 2024 (Arnout Hellemans)

Transcript

1. Performance Wake-up
2. https://medium.com/@addyosmani/shopping-for-speed-on-ebay-com-6229711d7573
3. Would you be willing to slow your site down 0.1 second ?
4. Uncomfortable, isn’t it?
5. "A 2012 detailed study at Bing (Kohavi et al.2013) showed that every 100 ms speedup improves revenue by 0.6%."* *Kohavi, Ron; Tang, Diane; Xu, Ya. Trustworthy Online Controlled Experiments: A Practical Guide to A/B Testing (p. 82).
6. Performance optimization is just… optimization.
7. WPO Stats, wpostats.com
8. You’re competing for subconscious attention
9. So, how are we doing?
10. Bol.com
11. gtmetrix.com 9,2MB network payload
13. Are CWV a “ranking factor”?
14. https://www.linkedin.com/feed/update/urn:li:activity:71736 81294403358721/
15. Johan his excellent comment
16. Is this just academic?
17. 1% of global electricity usage, and growing
18. https://twitter.com/JohnMu/status/1768187387698364518
19. Most websites are slow rotten. Why?
20. developers and their decisions
21. servers and systems
22. scripts and styles
23. ads and analytics
24. measurement and monitoring
25. tools and testing
26. Are you measuring your measuring?
27. https://gtmetrix.com/reports/yoast.com/AVp6IGIT/
28. Chrome Developer Tools; “Network” tab
29. ~560kb in ~0.4 seconds
31. GTM > GA + HotJar + GO
32. GTM > GA + HotJar + GO = ~220kb
33. GTM > GA + HotJar + GO = ~220kb = 40% of page weight
34. GTM > GA + HotJar + GO = ~220kb = 40% of page weight = 0.1 second
35. What’s the real world impact?
37. 2 trees
38. !? Lots of trees Yikes.
39. This isn’t everybody though, surely?
40. So everybody’s favo urite hotel site is prob ably nailing it, right?
41. Mountains of JS
42. Mountains of JS = ~1.4mb (of ~3mb page)
43. Mountains of JS = ~1.4mb (of ~3mb page) = ~+1.5 seconds
44. Mountains of JS = ~1.4mb (of ~3mb page) = ~+1.5 seconds = $$$
46. No JS JS
48. How’s your site? (Spoiler: It’s probably worse)
49. You have to optimize your optimizing.
50. “But this stuff is hard / new / alien” How do I do it?
51. web.dev/vitals/ May 2020
52. web.dev/vitals/ “INP” Interaction to Next Paint (12 March, 2024)
53. INP example
54. web.dev/chrome-ux-report-data-studio-dashboard/
55. CWV fixes "It's hard to quantify"
56. web.dev/optimize-vitals-lighthouse/ Specific recommendations!
57. web.dev/patterns/web-vitals-patterns/ Patterns!
58. developers.google.com/web/fundamentals/design-and-ux/responsive/images Advanced theory!
59. web.dev/vitals-tools-workflow/ Workflows and processes!
60. So, aren’t these are all solved problems?
61. What happens in a real world scenario?
63. Maybe the wrong people (or nobody) own this?
64. Start with a business case
65. Site performance is site-wide (and therefore doesn’t get prioritized)
66. Environment (greener) Cost Saving Inclusivity Profitability Agility / Velocity Align with company values / goals
67. e.g., CO2 impact
68. CO2 impact x pageviews = number of trees to plant to offset 28,000 trees!
69. or cost saving
70. Page transfer size x number of requests x $
71. and code quality…
72. Fewer errors Easier a/b testing faster development (velocity) Easier to scale development resources Optimised code leads to:
73. And don’t forget about device tax…
75. Inclusivity = Device tax or Connection tax
77. 12 million EUR / per 0.5 second
78. Manage (control) stakeholder expectations You can be “creative” with forecasts…
79. Got a dedicated, embedded team “Quality” isn’t a one-off process!
80. CONGRATULATIONS We’ve made your roadmap for 2024.
81. So, where do I start?
82. Four tactical focus areas Code & nerdy stuff ng up!
83. 1. Caching
84. What’s the fastest way to load something?
85. Cache this “forever”
86. (but not if I update it)
87. 2. Images
88. What format? AVIF > WEBP > PNG/JPG
89. Squoosh.app
90. 3. Fonts
91. <link rel="preconnect" href="https:/ /fonts.gstatic.com"> <link href="https:/ /fonts.googleapis.com/css2?family=Rubik&di splay=swap" rel="stylesheet"> Third-party resources = slow
92. <link rel="preload" as="font" type="font/woff2" href="/fonts/rubik.woff2" fetchpriority="high"/> <style type="text/css"> @font-face { font-family:'Rubik'; src: url('/fonts/rubik.woff2’); } </style> self-hosting = faster woff2 = faster fetchpriority = new
93. <style type="text/css"> @font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik'), local('Rubik-Regular'), url('/fonts/rubik-latin-400.woff2?ver=1606167081') format('woff2'); } @font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; src:local('Rubik Bold'), local('Rubik-Bold'), url('/fonts/rubik-latin-700.woff2?ver=1606167081') format('woff2'); } </style> Manage weight, style, display, and glyphs
94. 4. JavaScript & CSS
95. <script src="/scripts/example.js" />
96. <script async src="/scripts/example.js" />
97. <script defer src="/scripts/example.js" />
98. Honestly… Just use Lighthouse, then go read web.dev
99. CONGRATULATIONS You’re at step one. Your site is no longer on fire
100. Tools
101. pagespeed.web.dev
102. websitecarbon.com
103. cloudflare.com
104. instant.page
105. Squoosh.app
106. caniuse.com
107. partytown.builder.io
108. sitebulb.com