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 [DeltaV London 2018]

977 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

×