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

Understanding UX & Hacking Perceived Performance [NY Web Performance Meetup]

Tammy Everts
May 11, 2016
20

Understanding UX & Hacking Perceived Performance [NY Web Performance Meetup]

We all care about making pages faster, but *why* do we care? And how fast is fast enough? In this talk at the NY Web Performance Meetup, I shared findings — from user surveys, eyetracking studies, and neuroscientific research — that answer these questions. I also shared some tips for creating the illusion of faster pages.

Some of the questions covered during this session:

• Why do we, as internet users, crave fast online experiences?
• There are a ton of performance metrics, but which one(s) are the best for measuring perceived UX?
• Are users more sensitive to performance issues in some contexts than in others? What are those contexts?
• Do people perceive performance differently on their desktop and mobile devices?
• What are the page-level issues that hurt UX the most?
• What are some tricks you can use to make pages *appear* to render faster?

Tammy Everts

May 11, 2016
Tweet

Transcript

  1. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016
    Understanding UX
    & Hacking Perceived Performance
    NY Web Performance Meetup • May 2016

    View full-size slide

  2. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016
    @tameverts
    performancebeacon.com
    WPOstats.com

    View full-size slide

  3. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 3

    View full-size slide

  4. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 4
    Source: 1&1 Internet

    View full-size slide

  5. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 5
    The average web user
    believes they waste
    two days a year
    waiting for pages to load.
    Source: 1&1 Internet

    View full-size slide

  6. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 6
    Source: Akamai

    View full-size slide

  7. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 7
    Source: Stoyan Stefanov, The Psychology of Speed

    View full-size slide

  8. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 8
    Source: webperf.io

    View full-size slide

  9. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 9
    “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

    View full-size slide

  10. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 10
    “Oh… pity the hyper-impatient web
    generation. Such busy lives with so
    many important things to do — like
    post the latest drivel onto their
    Facebook pages or download
    the YouTube viral video of the day.
    Oops, sorry — of the minute.”
    Reader comment
    “For Impatient Web Users, An Eye Blink Is Too Long to Wait”
    The New York Times

    View full-size slide

  11. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 11
    Source: Jakob Nielsen

    View full-size slide

  12. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 12

    View full-size slide

  13. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 13
    “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
    Senior Vice President of Technical Infrastructure
    Google

    View full-size slide

  14. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 14

    View full-size slide

  15. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 15

    View full-size slide

  16. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 16
    fast
    slow

    View full-size slide

  17. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 17

    View full-size slide

  18. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 18

    View full-size slide

  19. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 19

    View full-size slide

  20. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 20

    View full-size slide

  21. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 21
    “Time is measured objectively
    but perceived subjectively,
    and experiences can
    be engineered to improve
    perceived performance.”
    Ilya Grigorik
    High Performance Browser Networking

    View full-size slide

  22. Progress indicators

    View full-size slide

  23. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 23

    View full-size slide

  24. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 24
    A progress indicator on a page that
    loads in <5 seconds will make that
    page feel slower.
    Best case: 10+ seconds

    View full-size slide

  25. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 25
    Progress bars that offer the illusion of
    a left-moving ripple can improve
    perceived wait time by up to 10%.

    View full-size slide

  26. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 26
    Progress bars that pulse, and that
    increase pulsation frequency as the
    bar progresses, are perceived as being
    faster.

    View full-size slide

  27. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 27
    Progress bars that speed up are
    considered more satisfying by users.*
    *Think back to that colonoscopy research

    View full-size slide

  28. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 28
    But…
    Use them sparingly.

    View full-size slide

  29. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 31

    View full-size slide

  30. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 32

    View full-size slide

  31. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 33
    When do users start to interact with a page?

    View full-size slide

  32. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 34
    Source: Radware, Progressive JPEGs: Good or Evil?

    View full-size slide

  33. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 35
    “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

  34. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 36

    View full-size slide

  35. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 37
    http://www.oreilly.com/pub/e/3425

    View full-size slide

  36. 39
    Third-party content
    can make up >50%
    of page requests

    View full-size slide

  37. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 40

    View full-size slide

  38. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 41
    Exposes you to data leakage
    Generates content security warnings that alarm
    your visitors and kill your conversions
    Hurts your Google search rankings (SEO)
    Makes your site vulnerable to man-in-the-middle
    security attacks
    Potential impact of fourth-party calls

    View full-size slide

  39. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 42

    View full-size slide

  40. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 43
    Original: 3.5s
    SPOF: 22.7s

    View full-size slide

  41. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 44

    View full-size slide

  42. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 45
    Popup best practices
    • Optimize script
    • Ensure cross-browser
    functionality
    • Delay for at least 10 seconds
    • A/B test for effectiveness

    View full-size slide

  43. Measure the
    right stuff

    View full-size slide

  44. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 47
    First Paint is not equal to Start Render!
    Chrome – “First Paint” True Start Render

    View full-size slide

  45. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 48
    User Timing Interface
    Allows developers to measure performance
    of their applications through high-precision
    timestamps
    Consists of “marks” and “measures”
    § PerformanceMark: Timestamp
    § PerformanceMeasure: Duration between two
    given marks

    View full-size slide

  46. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 49
    How long does it
    take to display the
    main product
    image on my site?

    View full-size slide

  47. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 50
    Record when an image loads

    For more interesting examples:
    Measure hero image delay
    http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-
    metrics/
    Measure aggregate times to get
    an “above fold time”
    http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-
    experience.html

    View full-size slide

  48. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 51
    http://soasta.io/perftimings

    View full-size slide

  49. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 53
    A user who was served feature content
    within the first second of page load
    spent 20% of his or her time
    within the feature area.
    A user who was subjected to an
    8-second delay of a page’s feature content
    spent only 1% of his or her time visually
    engaging with that area of the page.

    View full-size slide

  50. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 54
    Source: Jakob Nielsen

    View full-size slide

  51. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 55

    View full-size slide

  52. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 56
    Make the perceived value
    of your content
    worth the wait.

    View full-size slide

  53. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016
    @tameverts
    performancebeacon.com
    WPOstats.com

    View full-size slide