This talk walks through a brief history of UX and web performance research, highlighting landmark studies that helped connect the dots between performance and user experience. I also demystify the current state of performance metrics and help you understand what you need to focus on for your site and your users.

1. The hunt for the unicorn*
performance metric
@tameverts
#deltaVconf
*no unicorns were harmed in the making of this talk

2. @tameverts
CXO • SpeedCurve
WPOstats.com

3. @tameverts

6. How do we
scale empathy?

8. Why care?

9. “Web stress”
When apps or sites are slow,
we have to concentrate
up to 50% harder to stay on task
@tameverts

10. The average web user believes they waste
two days a year waiting for pages to load.

11. @tameverts

12. Slow websites (and apps) suck
for your visitors

13. Slow websites (and apps) suck
for your business

14. @tameverts

15. BBC loses an additional 10% of users for
every additional second it takes their site to
load
Rebuilding Pinterest pages for performance
resulted in 40% decrease in wait time,
15% increase in SEO traffic, and 15%
increase in signup conversion rate
FT.com reduced desktop load times to 1.5s
and mobile to 2.1s and increased user
engagement by 30%
@tameverts

16. WPOstats.com

17. Slow websites (and apps) suck

18. Define “slow”

19. Define “suck”

20. “The real thing we are after is
to create a user experience that
people love and they feel is fast…
and so we might be front-end
engineers, we might be dev,
we might be ops, but what we really
are is perception brokers.”
Steve Souders
@tameverts

21. But how do we measure
perception… at scale?

22. @tameverts

23. TTFB DNS TCP Start render
DOM loading DOM ready Page load Fully loaded
TTI Resource timing
Number of
requests
Bytes in
Speed Index PageSpeed Navigation timing DOM elements
DOM size Visually complete TTFP TTFMP

24. Load Time
The time from the start of the initial navigation
until the beginning of the window load event
@tameverts

25. Start Render
The time from the start of the initial navigation
until the first non-white content is painted to the
browser display
@tameverts

26. SpeedIndex
The average time at which visible parts of the
page are displayed within the viewport
@tameverts

27. Visually Complete
The time at which all content in the viewport has rendered
and nothing visibly changes as the page finishes loading
@tameverts

28. @tameverts

29. @tameverts

30. ❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes that not all pixels and page elements are
equal
❑ Allows us to customize what we measure on specific
pages
@tameverts
The best UX metric…

31. First Contentful Paint (FCP)
First Contentful Paint is the time when some contentful thing
(text, image, canvas, or SVG) is painted for the first time. It's
used as an approximation of First Meaningful Paint, but it often
catches non-meaningful paints like headers and navigation bars.
https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view@tameverts

32. First Meaningful Paint (FMP)
The paint after which the biggest
above-the-fold layout change has happened
and web fonts have loaded
https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view@tameverts

33. @tameverts

34. Time to First Interactive (TTFI)
When the page is first expected to be usable and
will respond quickly (with the possibility of slow
responses as more content loads)
https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/TimeToInteractive.md@tameverts

35. @tameverts

36. ❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes that not all pixels and page elements are
equal
❑ Allows us to customize what we measure on specific
pages
@tameverts
The best UX metric…

37. Hero Rendering Times
H1
Largest image
Largest background image
https://speedcurve.com/blog/web-performance-monitoring-hero-times/
@tameverts

38. @tameverts

39. @tameverts

40. @tameverts

41. ❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes that not all pixels and page elements are
equal
❑ Allows us to customize what we measure on specific
pages
@tameverts
The best UX metric…

42. So which metric is best?

43. http://lab.speedcurve.com/rendering/picker.php
@tameverts

44. And the winner is…

45. (You probably saw that coming.)

46. Deliver any content?
Start Render
Deliver significant
amount of content?
Speed Index, FMP
Deliver critical content?
Hero Rendering Times
@tameverts

47. https://speedcurve.com/blog/renderin
g-metrics/

48. Custom metrics FTW!
Measure performance
with high-precision timestamps,
using both synthetic and real user monitoring
https://www.w3.org/TR/user-timing/
https://speedcurve.com/blog/user-timing-and-custom-metrics/
@tameverts

49. How long does it
take to display the
main product image
on my site?
@tameverts

50. 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)
@tameverts

51. @tameverts

52. ❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes that not all pixels and page elements are
equal
❑ Allows us to customize what we measure on specific
pages
@tameverts
The best UX metric…

54. What next?

55. 1. Know your most meaningful metrics
2. Track them (ideally with synthetic and
RUM)
3. Don’t focus on averages and medians
4. Set goals (e.g., performance budgets)
5. Make yourself accountable (e.g., alerts)
6. Mind regressions
@tameverts

56. Again…
why should you care?

58. Between the ages
of 25 and 60,
our ability to use the web
declines by 0.8% a year

60. Thanks!
@tameverts
tammy@speedcurve.com