Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The hunt for the unicorn*
performance metric
@tameverts
#deltaVconf
*no unicorns were harmed in the making of this talk
@tameverts
CXO • SpeedCurve
WPOstats.com
@tameverts
How do we
scale empathy?
Why care?
“Web stress”
When apps or sites are slow,
we have to concentrate
up to 50% harder to stay on task
@tameverts
The average web user believes they waste
two days a year waiting for pages to load.
@tameverts
Slow websites (and apps) suck
for your visitors
Slow websites (and apps) suck
for your business
@tameverts
BBC loses an additional 10% of users for
every additional second it takes their site to
load
Rebuilding Pinterest pages fo...
WPOstats.com
Slow websites (and apps) suck
Define “slow”
Define “suck”
“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 fro...
But how do we measure
perception… at scale?
@tameverts
TTFB DNS TCP Start render
DOM loading DOM ready Page load Fully loaded
TTI Resource timing
Number of
requests
Bytes in
Spe...
Load Time
The time from the start of the initial navigation
until the beginning of the window load event
@tameverts
Start Render
The time from the start of the initial navigation
until the first non-white content is painted to the
browser...
SpeedIndex
The average time at which visible parts of the
page are displayed within the viewport
@tameverts
Visually Complete
The time at which all content in the viewport has rendered
and nothing visibly changes as the page finis...
@tameverts
@tameverts
❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes t...
First Contentful Paint (FCP)
First Contentful Paint is the time when some contentful thing
(text, image, canvas, or SVG) i...
First Meaningful Paint (FMP)
The paint after which the biggest
above-the-fold layout change has happened
and web fonts hav...
@tameverts
Time to First Interactive (TTFI)
When the page is first expected to be usable and
will respond quickly (with the possibili...
@tameverts
❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes t...
Hero Rendering Times
H1
Largest image
Largest background image
https://speedcurve.com/blog/web-performance-monitoring-hero...
@tameverts
@tameverts
@tameverts
❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes t...
So which metric is best?
http://lab.speedcurve.com/rendering/picker.php
@tameverts
And the winner is…
(You probably saw that coming.)
Deliver any content?
Start Render
Deliver significant
amount of content?
Speed Index, FMP
Deliver critical content?
Hero R...
https://speedcurve.com/blog/renderin
g-metrics/
Custom metrics FTW!
Measure performance
with high-precision timestamps,
using both synthetic and real user monitoring
http...
How long does it
take to display the
main product image
on my site?
@tameverts
Time to First Tweet
The time from clicking the link to viewing
the first tweet on each page’s timeline
Pinner Wait Time (P...
@tameverts
❑ Correlates to what users actually see in the browser
❑ Is easy to use and accessible right out of the box
❑ Recognizes t...
What next?
1. Know your most meaningful metrics
2. Track them (ideally with synthetic and
RUM)
3. Don’t focus on averages and medians...
Again…
why should you care?
Between the ages
of 25 and 60,
our ability to use the web
declines by 0.8% a year
Thanks!
@tameverts
tammy@speedcurve.com
The hunt for the unicorn performance metric [DeltaV London 2018]
The hunt for the unicorn performance metric [DeltaV London 2018]
The hunt for the unicorn performance metric [DeltaV London 2018]
The hunt for the unicorn performance metric [DeltaV London 2018]
The hunt for the unicorn performance metric [DeltaV London 2018]
The hunt for the unicorn performance metric [DeltaV London 2018]
Upcoming SlideShare
Loading in …5
×

The hunt for the unicorn performance metric [DeltaV London 2018]

1,197 views

Published on

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.

Published in: Technology
  • Be the first to comment

The hunt for the unicorn performance metric [DeltaV London 2018]

  1. 1. The hunt for the unicorn* performance metric @tameverts #deltaVconf *no unicorns were harmed in the making of this talk
  2. 2. @tameverts CXO • SpeedCurve WPOstats.com
  3. 3. @tameverts
  4. 4. How do we scale empathy?
  5. 5. Why care?
  6. 6. “Web stress” When apps or sites are slow, we have to concentrate up to 50% harder to stay on task @tameverts
  7. 7. The average web user believes they waste two days a year waiting for pages to load.
  8. 8. @tameverts
  9. 9. Slow websites (and apps) suck for your visitors
  10. 10. Slow websites (and apps) suck for your business
  11. 11. @tameverts
  12. 12. 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
  13. 13. WPOstats.com
  14. 14. Slow websites (and apps) suck
  15. 15. Define “slow”
  16. 16. Define “suck”
  17. 17. “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
  18. 18. But how do we measure perception… at scale?
  19. 19. @tameverts
  20. 20. 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
  21. 21. Load Time The time from the start of the initial navigation until the beginning of the window load event @tameverts
  22. 22. Start Render The time from the start of the initial navigation until the first non-white content is painted to the browser display @tameverts
  23. 23. SpeedIndex The average time at which visible parts of the page are displayed within the viewport @tameverts
  24. 24. Visually Complete The time at which all content in the viewport has rendered and nothing visibly changes as the page finishes loading @tameverts
  25. 25. @tameverts
  26. 26. @tameverts
  27. 27. ❑ 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…
  28. 28. 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
  29. 29. 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
  30. 30. @tameverts
  31. 31. 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
  32. 32. @tameverts
  33. 33. ❑ 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…
  34. 34. Hero Rendering Times H1 Largest image Largest background image https://speedcurve.com/blog/web-performance-monitoring-hero-times/ @tameverts
  35. 35. @tameverts
  36. 36. @tameverts
  37. 37. @tameverts
  38. 38. ❑ 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…
  39. 39. So which metric is best?
  40. 40. http://lab.speedcurve.com/rendering/picker.php @tameverts
  41. 41. And the winner is…
  42. 42. (You probably saw that coming.)
  43. 43. Deliver any content? Start Render Deliver significant amount of content? Speed Index, FMP Deliver critical content? Hero Rendering Times @tameverts
  44. 44. https://speedcurve.com/blog/renderin g-metrics/
  45. 45. 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
  46. 46. How long does it take to display the main product image on my site? @tameverts
  47. 47. 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
  48. 48. @tameverts
  49. 49. ❑ 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…
  50. 50. What next?
  51. 51. 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
  52. 52. Again… why should you care?
  53. 53. Between the ages of 25 and 60, our ability to use the web declines by 0.8% a year
  54. 54. Thanks! @tameverts tammy@speedcurve.com

×