Web Performance 101 [Chrome Dev Summit 2021]

Tammy Everts

November 09, 2021

Tweet Share

Transcript

1. Web Performance 101 What is web performance and why should

   I care? @tameverts #ChromeDevSummit ¯\_(ツ)_/¯

2. @tameverts

3. None
4. None

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?
8. None

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

25. None

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

39. “web stress” When apps or sites are slow, we have

    to concentrate up to 50% harder to stay on task. @tameverts
40. None

41. Radware, 2013 Frustration peaks between 11.5 and 26% during browsing

    and checkout @tameverts

42. Behaviour

43. None

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

57. None

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

62. None

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/

67. None

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/
70. None

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

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?

81. None

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
85. None
86. None
87. None
88. None

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
95. None
96. None

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

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

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

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)
119. None

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
121. None
122. None

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!

125. None

126. zillow.com/tech/bigger-faster-more-engaging-budget/

127. Third parties Long tasks time Total size Total number of

     requests
128. None

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/

137. None

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

145. None

146. 2. Build a cross-disciplinary team

147. None

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…

157. None
158. None
159. None
160. None

161. If they care about user engagement…

162. None
163. None

164. If they care about SEO…

165. None

166. If they care about third parties…

167. None
168. None

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

176. None

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/
178. None
179. None
180. None
181. None
182. None

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!

187. None
188. None
189. None

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