Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Psychology of Web Performance [Beyond Tellerrand 2023]

Tammy Everts
September 19, 2023

The Psychology of Web Performance [Beyond Tellerrand 2023]

What do the most successful websites and apps have in common? They're all fast. Faster sites have happier users, and those happy users visit longer and spend more. But why is that?

Enjoy a brief history of user experience and web performance, highlighting fascinating research into the neuroscience of speed and studies that connect the dots between site speed and user experience. You'll take away insights into why slow sites enrage you, and why you should prioritize making your own sites and apps as fast as possible for your own users.

Tammy Everts

September 19, 2023
Tweet

More Decks by Tammy Everts

Other Decks in Technology

Transcript

  1. 1
    Image: Control Vectors by Vecteezy

    View full-size slide

  2. Impact of latency
    on human-computer interaction

    View full-size slide

  3. Impact of latency
    on human-computer interaction
    That time Dad broke the stereo

    View full-size slide

  4. @tameverts
    webperf.social/@tammy

    View full-size slide

  5. Alarm Vectors by Vecteezy

    View full-size slide

  6. usability expert

    View full-size slide

  7. student
    usability expert

    View full-size slide

  8. web performance?!?!?

    View full-size slide

  9. If you do not consider time
    a crucial usability factor,
    you’re missing a huge aspect
    of the user experience.

    View full-size slide

  10. 80-90% of end-user response time
    happens at the front end

    View full-size slide

  11. 80-90% of end-user response time
    happens at the front end
    code

    View full-size slide

  12. 80-90% of end-user response time
    happens at the front end
    code
    design

    View full-size slide

  13. 80-90% of end-user response time
    happens at the front end
    code
    design
    content

    View full-size slide

  14. 80-90% of end-user response time
    happens at the front end
    code
    design
    content
    third parties

    View full-size slide

  15. Made pages 1.9 seconds faster, increased
    conversion rate by 94%
    1-second improvement, 14% decrease in
    bounce rate and 13% increase in conversions
    Improved Largest Contentful Paint by 31%,
    increased sales by 8%
    WPOstats.com

    View full-size slide

  16. Waiting is hard

    View full-size slide

  17. Passive waiting is harder

    View full-size slide

  18. Perception is more important
    than reality

    View full-size slide

  19. Perception is more important
    than reality

    View full-size slide

  20. How do we perceive time?

    View full-size slide

  21. When the span between heartbeats
    is longer, time feels slower*
    *by milliseconds

    View full-size slide

  22. Women tend to underestimate
    prospective time estimations compared to men,
    suggesting they may perceive time
    to be passing by more slowly

    View full-size slide

  23. Have you ever thought
    time is speeding up as you get older?

    View full-size slide

  24. Have you ever thought
    time is speeding up as you get older?
    It is.

    View full-size slide

  25. Over time, the rate at which we process
    visual information slows down.
    This is what makes time ‘speed up’
    as we grow older.

    View full-size slide

  26. Users aged 65+
    are 43% slower
    at using websites
    than users aged 21-55
    nngroup.com/articles/usability-for-senior-citizens/

    View full-size slide

  27. 86,400 seconds
    1,440 minutes

    View full-size slide

  28. 86,400 seconds
    1,440 minutes
    1 day

    View full-size slide

  29. 35 minutes
    7 Sharonas

    View full-size slide

  30. sex
    age
    boredom
    pain
    heart rate
    colour

    View full-size slide

  31. How does memory work?

    View full-size slide

  32. What is “flow”?

    View full-size slide

  33. “…a state in which people are so involved
    in an activity that nothing else seems to matter;
    the experience is so enjoyable that people
    will continue to do it even at great cost,
    for the sheer sake of doing it”
    Mihály Csíkszentmihályi
    Flow: The Psychology of Optimal Experience (1990)

    View full-size slide

  34. 56
    Image by BalashMirzabey on Freepik
    It can take up to 23 minutes
    to regain focus after an interruption

    View full-size slide

  35. 57
    Productivity
    It can take up to 23 minutes
    to regain focus after an interruption

    View full-size slide

  36. 58
    Productivity
    Wellbeing
    It can take up to 23 minutes
    to regain focus after an interruption

    View full-size slide

  37. How does all this apply
    to how we use technology?

    View full-size slide

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

    View full-size slide

  39. What we say we want vs. what we need
    1999 • 8 seconds
    2006 • 4 seconds
    Now • 2 seconds

    View full-size slide

  40. A wait longer than 2 seconds
    breaks concentration and affects productivity
    Robert Miller
    Response Time in Man-Computer Conversational Transactions

    View full-size slide

  41. A wait longer than 2 seconds
    breaks concentration and affects productivity
    Robert Miller
    Response Time in Man-Computer Conversational Transactions
    1968

    View full-size slide

  42. 65
    “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

    View full-size slide

  43. What do we know about
    how people perceive speed
    on the web?

    View full-size slide

  44. 68
    Jakob Nielsen, Website Response Times

    View full-size slide

  45. 69
    When do we start to interact with a page?

    View full-size slide

  46. 70
    Jakob Nielsen, Website Response Times

    View full-size slide

  47. “web stress”
    When apps or sites are slow,
    we concentrate up to 50% harder
    to stay on task

    View full-size slide

  48. People experience slowness
    in the moment

    View full-size slide

  49. Frustration peaks between 11.5 and 26%
    during browsing and checkout

    View full-size slide

  50. Slowness affects
    perception of everything

    View full-size slide

  51. Content “boring”
    Visual design “tacky”
    “confusing”
    Usability “frustrating”
    “hard-to-navigate”

    View full-size slide

  52. Slowness affects
    long-term behaviour

    View full-size slide

  53. What we think we want
    does not always make us happy

    View full-size slide

  54. “When, as with the Progressive JPEG
    method, image rendition is a two-stage
    process in which an initially coarse image
    snaps into sharp focus, cognitive fluency is
    inhibited and the brain has to work slightly
    harder to make sense of what is being
    displayed.”
    Dr. David Lewis
    Chair, Mindlab International

    View full-size slide

  55. Slowness is a feeling,
    not a thought

    View full-size slide

  56. “Phone rage”: How people react to slow mobile sites
    Tealeaf/Harris Interactive

    View full-size slide

  57. nicj.net/measuring-continuity/

    View full-size slide

  58. nicj.net/measuring-continuity/

    View full-size slide

  59. …and so we might be front-end engineers,
    we might be devs, we might be ops,
    but what we really are is perception brokers.”
    Steve Souders
    Author, High Performance Web Sites
    “The real thing we are after is to create
    a user experience that people love
    and they feel is fast…

    View full-size slide

  60. How do you measure perception
    …at scale?

    View full-size slide

  61. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.

    View full-size slide

  62. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”

    View full-size slide

  63. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”
    3. Not monitoring continuously
    Things can change suddenly (e.g., server issues, third parties).

    View full-size slide

  64. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”
    3. Not monitoring continuously
    Things can change suddenly (e.g., server issues, third parties).
    4. Not monitoring real users
    Synthetic measurements are only snapshots.

    View full-size slide

  65. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”
    3. Not monitoring continuously
    Things can change suddenly (e.g., server issues, third parties).
    4. Not monitoring real users
    Synthetic measurements are only snapshots.
    5. Not focusing on the right metrics
    e.g., “Load time” is dated; Core Web Vitals are only available in Chromium browsers

    View full-size slide

  66. Biggest measurement mistakes
    1. Not measuring at all
    You can’t fix what you don’t measure.
    2. Assuming your experience is universal
    “It’s fast enough on my desktop/phone.”
    3. Not monitoring continuously
    Things can change suddenly (e.g., server issues, third parties).
    4. Not monitoring real users
    Synthetic measurements are only snapshots.
    5. Not focusing on the right metrics
    e.g., “Load time” is dated; Core Web Vitals are only available in Chromium browsers
    6. Looking only at averages or medians
    Measure at 75th and 95th percentiles to understand the breadth of user experiences.

    View full-size slide

  67. Optimize the entire experience
    1. Eliminate confusion whenever possible
    Don Norman, Cofounder/emeritus, Nielsen Norman Group

    View full-size slide

  68. Optimize the entire experience
    1. Eliminate confusion whenever possible
    2. Make the wait appropriate to the results
    Don Norman, Cofounder/emeritus, Nielsen Norman Group

    View full-size slide

  69. Optimize the entire experience
    1. Eliminate confusion whenever possible
    2. Make the wait appropriate to the results
    3. Meet or exceed expectations
    Don Norman, Cofounder/emeritus, Nielsen Norman Group

    View full-size slide

  70. Optimize the entire experience
    1. Eliminate confusion whenever possible
    2. Make the wait appropriate to the results
    3. Meet or exceed expectations
    4. End strong
    Don Norman, Cofounder/emeritus, Nielsen Norman Group

    View full-size slide

  71. Made pages 1.9 seconds faster, increased
    conversion rate by 94%
    1-second improvement, 14% decrease in
    bounce rate and 13% increase in conversions
    Improved Largest Contentful Paint by 31%,
    increased sales by 8%
    WPOstats.com

    View full-size slide

  72. 107
    Create an experience
    that isn’t just tolerable…
    it’s delightful

    View full-size slide

  73. Time is life

    View full-size slide

  74. Thank you!
    @tameverts
    webperf.social/@tammy

    View full-size slide

  75. Why Waiting Is Torture
    nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html
    Wrinkles in Subsecond Time Perception Are Synchronized to the Heart
    onlinelibrary.wiley.com/doi/abs/10.1111/psyp.14270
    Sex Differences in Time Perception During Self-paced Running
    ncbi.nlm.nih.gov/pmc/articles/PMC5065319/
    The Color Red Distorts Time Perception for Men, but Not for Women
    nature.com/articles/srep05899
    Why the Days Seem Shorter as We Get Older
    cambridge.org/core/journals/european-review/article/why-the-days-seem-shorter-as-we-get-older/
    Flow: The Psychology of Optimal Experience
    Mihaly Csikszentmihalyi
    The Cost of Interrupted Work: More Speed and Stress
    ics.uci.edu/~gmark/chi08-mark.pdf
    Response Time in Man-Computer Conversational Transactions
    dl.acm.org/doi/10.1145/1476589.1476628
    Website Response Times
    nngroup.com/articles/website-response-times/
    Progressive Image Rendering: Good or Evil?
    radware.com/blog/applicationdelivery/wpo/2014/09/progressive-image-rendering-good-evil/
    The Psychology of Waiting Lines
    Don Norman – jnd.org/the-psychology-of-waiting-lines/
    Sources

    View full-size slide