Web Performance 101 [Chrome Dev Summit 2021]

What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.

Transcript

1. Web Performance 101 What is web performance and why should I care? @tameverts #ChromeDevSummit ¯\_(ツ)_/¯
2. @tameverts
5. speedcurve.com/benchmarks/
6. What is “web performance”? Why should I care about it? How do I measure it? How can I get other people in my company to care about it?
7. “web performance” Is it loading? Can I use it? How does it feel?
9. 75th percentile of page loads across mobile and desktop
10. wsj.com/articles/google-search-ramps-up-penalties-for-slow-annoying-websites-11628614350
11. 2016 The internet is a basic human right.
12. Poor performance hurts a LOT of people.
13. People in rural areas People in Indigenous communities People with lower incomes Children Seniors People with accessibility challenges People in developing countries
14. @tameverts
15. That’s 15,000,000 people in the US alone.
16. 1 out of 3 homes in the US do not have broadband access. (25 Mbps down and 3 Mbps up) Federal Communications Commission, 2020 @tameverts
17. That’s 45,000,000 homes. And 12,000,000 children (many of whom are now learning remotely).
18. theverge.com/22177154/us-internet-speed-maps-competition-availability-fcc
19. “the homework gap”
20. 75% of Indigenous communities in Canada do not have access to broadband. @tameverts
21. Education Entrepreneurialism Social connection Governance Telemedicine
22. “I grew up with our community being under constant boil water advisories, and I wasn’t able to safely drink water out of the tap until just a few years ago. High-speed internet feels equally life changing.” Chief Willie Sellars, 2020
23. We can’t fix our networks, but we can fix our pages.
24. 2106kb HTTP Archive, October 2021
26. Big pages cost users.
27. whatdoesmysitecost.com
28. whatdoesmysitecost.com
29. Performance isn’t just about speed.
30. Page jank affects people with motor skill challenges (esp. on mobile). Assistive technology (e.g., screenreaders) may not work until the DOM fully loads. JavaScript can block assistive tech. @marcysutton
31. Users aged 65 and older are 43% slower at using websites than users aged 21-55. nngroup.com/articles/usability-for-senior-citizens/ @tameverts
32. business behaviour brain
33. Brain
34. The average web user believes they waste two days a year waiting for pages to load.
35. Stoyan Stefanov, The Psychology of Speed
36. Nielsen Norman Group, 1993 & 2010
37. 37 “We want you to be able to flick from one page to another as quickly as you can flick a page on a book. So, we’re really aiming very, very high here… at something like 100 milliseconds.” Urs Hölzle SVP Engineering, Google
39. “web stress” When apps or sites are slow, we have to concentrate up to 50% harder to stay on task. @tameverts
41. Radware, 2013 Frustration peaks between 11.5 and 26% during browsing and checkout @tameverts
42. Behaviour
44. “Phone rage”: How people react to slow mobile sites Tealeaf/Harris Interactive, 2011 @tameverts
45. 45 When do we start to interact with a page? Radware, 2014 @tameverts
46. 46 Source: Jakob Nielsen
47. nicj.net/measuring-continuity/
48. nicj.net/measuring-continuity/
49. Business
50. User experience and web performance are predictable indicators of business outcomes.
51. ❑ bounce rate ❑ cart size ❑ conversions ❑ revenue ❑ time on site ❑ page views ❑ SEO ❑ brand perception ❑ user retention ❑ competitors
52. WPOsta ts.com
53. Bounce rate
54. @tameverts
55. WPOstats.com
56. Conversions
58. Every 1 second of load time improvement equaled a 2% conversion rate increase for Walmart Staples shaved 1 second from median load time, improved conversion rate by 10% Fanatics cut median load times by 2 seconds, almost doubled mobile conversions
59. User retention
60. Strangeloop, 2011 @tameverts
61. Brand perception
63. fast slow @tameverts
64. Content “boring” Visual design “tacky” “confusing” Ease of navigation “frustrating” “hard-to-navigate”
65. SEO
66. https://www.forbes.com/sites/theyec/2021/09/22/google-seo-updates-for-2021-lcp-fcp-fid-cls-oh-my/
68. 40% decrease in wait time 15% increase in signup conversion rate 15% increase in SEO traffic
69. Good pages rank slightly (1%) better than average. Slow pages rank significantly (3.7%) worse. sistrix.com/blog/core-web-vitals-is-a-measurable-ranking-factor/
71. How fast should I be? How do I stay on track?
72. Performance budgets FTW!
73. Threshold YOU create for metrics that are meaningful for YOUR site Milestone timings (e.g. Start Render) Quantity-based (e.g. image weight) Rules-based (e.g. Lighthouse scores)
74. A good performance budget should show you… What your budget is When you go out of bounds How long you’re out of bounds When you’re back within budget
76. Why do I need them?
77. 2009 Improved average load time from 6s à 1.2s 7-12% increase in conversion rate + 25% increase in PVs Average load time degraded to 5s User feedback: “I will not come back to this site again.” Re-focused on performance 0.4% increase in conversion rate 2010 2011 @tameverts
78. 1. No front-end measurement 2. Constant feature development 3. Badly implemented third-parties 4. Waited too long to tackle problems 5. Relied on performance sprints 6. No way to track regressions
79. 1. Which metrics should I focus on? 2. What should my budget thresholds be? 3. How do I stay on top of them?
80. Which metrics should I focus on?
82. TTFB DNS TCP TTI FCP FMP FID OMG WTF
83. Is it loading? Can I use it? How does it feel?
84. What tools can we use? Synthetic (lab) Consistent baseline Mimics network & browser conditions No installation Compare any sites Detailed analysis Waterfall charts Filmstrips and videos Limited URLs Real user monitoring (field) Requires JavaScript installation Large sample size (up to 100%) Real network & browser conditions Geographic spread Correlation with other metrics (bounce rate) No detailed analysis Only measure your own site
89. @tameverts
90. @tameverts
91. @tameverts
92. Is it loading?
93. Time to First Byte AKA backend time Synthetic & RUM
94. Start Render The time from the start of the initial navigation until the first non-white content is painted Synthetic & RUM
97. Can I use it?
98. 98 When do users start to interact with a page? @tameverts
99. Amount of time it takes for the largest visual element to render Synthetic & RUM
101. Alternative: Last Painted Hero
102. How does it feel?
103. Score that reflects how much page elements shift during rendering. Available in Chrome and Chromium-based browsers. Synthetic & RUM
105. Size of the shifting element matters speedcurve.com/blog/visualising-cls-layout-shifts/
106. Image carousels can generate false positives speedcurve.com/blog/visualising-cls-layout-shifts/
107. Web fonts & opacity changes can cause issues speedcurve.com/blog/visualising-cls-layout-shifts/
108. Amount of time it takes for page to respond to user input (e.g. click, tap, key) Only measurable via RUM
109. FID can seem fast because user interactions take place later in the page’s rendering cycle... after CPU-hogging long tasks have completed. speedcurve.com/blog/first-input-delay-google-core-web-vitals/
110. No correlation when looking at all sessions speedcurve.com/blog/first-input-delay-google-core-web-vitals/
111. Stronger correlation at 75th percentile speedcurve.com/blog/first-input-delay-google-core-web-vitals/
112. Long Tasks Measures JavaScript functions that take 50ms or longer. Long or excessive JS tasks can delay rendering, as well as cause page “jank”. Measurable across browser types. Synthetic & RUM
114. Long Tasks have a high correlation to conversions speedcurve.com/blog/first-input-delay-google-core-web-vitals/
115. Other metrics to consider
116. Custom metrics Measure performance with high-precision timestamps Synthetic & RUM https://www.w3.org/TR/user-timing/ https://speedcurve.com/blog/user-timing-and-custom-metrics/
117. How long does it take to display the main product image on my site?
118. Time to First Tweet The time from clicking the link to viewing the first tweet on each page’s timeline Pinner Wait Time (PWT) The time from initiating an action (e.g., tapping a pin) until the action is complete (pin close-up view is loaded) Time to Interact (TTI)
120. Lighthouse Scores based on audits run on synthetic tests. Checks your page against “rules” for Performance, PWA, Best Practices, and SEO. For each category, you get a score out of 100 and recommendations for what to fix. developers.google.com/web/tools/lighthouse
123. matuzo.at/blog/building-the-most-inaccessible-site-possible- with-a-perfect-lighthouse-score/
124. Page size & requests Avoid serving huge pages to mobile!
126. zillow.com/tech/bigger-faster-more-engaging-budget/
127. Third parties Long tasks time Total size Total number of requests
129. Metrics to watch for… Responsiveness https://web.dev/responsiveness/ Smoothness https://web.dev/smoothness/
130. What should my budget thresholds be?
131. Performance budgets ≠ Performance goals
132. Goals are aspirational. How fast do I want to be eventually? Budgets are pragmatic. How can I keep my site from getting slower while I work toward my goals?
133. Priority 1 Create budgets to fight regression
134. Look at your last 2-4 weeks of data. Identify your worst number.
135. Priority 2 Set long-term goals
136. How fast are my competitors? speedcurve.com/benchmarks/
138. How can I improve business metrics?
139. How can I improve SEO? @tameverts
140. @tameverts
141. “The largest hurdle to creating and maintaining stellar site performance is the culture of your organization. Lara Hogan designingforperformance.com
142. “No matter the size or type of team, it can be a challenge to educate, incentivize, and empower those around you. “Performance more often comes down to a cultural challenge, rather than simply a technical one.” Lara Hogan designingforperformance.com
143. How to create a culture of performance
144. 1. Have a champion higher up
146. 2. Build a cross-disciplinary team
148. Everyone who touches a page should care about the performance of that page.
149. Embrace performance from the ground up. Embed engineers into other teams. Enlist performance ambassadors. Teach people how to use (or at least understand) the monitoring tools you use.
150. 3. Set shared goals
151. It’s perilously easy to accidentally become a gatekeeper.
152. We first went to the engineering leaders, and then we went to our product leader. Our pitch was totally different... Reefath Rajali // PayPal chasingwaterfalls.io/episodes/episode-two-with-reefath-rajali/
153. “When we went to our product leaders, we spoke more about the business numbers and the business benefits. “When we spoke to our engineering leaders, it was more about our consumer delight.” Reefath Rajali // PayPal chasingwaterfalls.io/episodes/episode-two-with-reefath-rajali/
154. Find out what people care about.
155. ❑ bounce rate ❑ cart size ❑ conversions ❑ revenue ❑ time on site ❑ page views ❑ SEO ❑ user happiness ❑ user retention ❑ competitors
156. If they care about business metrics…
161. If they care about user engagement…
164. If they care about SEO…
166. If they care about third parties…
169. Who they are What they care about What to show them Executives Competition Business impact Benchmarks (filmstrips and videos) Correlation charts (perf + KPIs) Marketing Third parties Traffic + engagement SEO Content Third-party performance Correlation charts (perf + bounce rate) Lighthouse SEO audits Image size Devs / engineers Well, lots of stuff, probably Consult with perf team @tameverts
170. 4. Make everyone accountable
171. Performance budgets FTW!
172. Give people ownership
173. “One of the original directives of the performance team was we weren’t going to set ourselves up to be performance cops.” Dan Chilton, Vox Media responsivewebdesign.com/podcast/vox-media-performance/
174. “We weren’t going to go around slapping people on the wrist, saying, ‘You built an article that broke the page size budget! You have to take that down or change that immediately!’ “Our goal setting out was to set up best practices, make recommendations, and be a resource within the company that people can turn to when they have to make performance- related decisions.” Dan Chilton, Vox Media responsivewebdesign.com/podcast/vox-media-performance/
175. 5. Communicate
177. “We, as engineers, should learn how to show the impact on anything we do.” Malek Hakim // Priceline chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/
183. 6. Score some easy wins
184. “The dull boring stuff” ~Andy Davies Scripts (especially third parties) Images Extraneous code Defer assets where possible
185. Shaved 15KB off logo Ran A/B test Increased bookings chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/
186. 6. Don’t forget to celebrate!
190. !!!
191. medium.com/the-telegraph-engineering
192. In summary…
193. There’s no magic. Show up with a plan. Do the work. Always be measuring. Keep doing the work. (Be patient.)
194. Thanks! @tameverts