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.

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