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?

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
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
3. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 3
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
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
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
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
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
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
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
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
12. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 12
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
14. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 14
15. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 15
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
17. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 17
18. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 18
19. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 19
20. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 20
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
22. Progress indicators
23. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 23
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
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%.
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.
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
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.
29. Images
31. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 31
32. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 32
33. 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?
34. 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?
35. 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
36. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 36
37. 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
38. Defer
39. 39 Third-party content can make up >50% of page requests
40. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 40
41. 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
42. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 42
43. 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
44. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 44
45. 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
46. Measure the right stuff
47. 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
48. 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
49. 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?
50. 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 <img src=“image1.gif” onload=“performance.mark(‘image1’)”> 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
51. 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
52. Be useful
53. 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.
54. 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
55. CO NFI DENTI AL – Not f or Dist ribut ion | ©2016 SO ASTA, All right s reserved. | O ct ober 3, 2016 55
56. 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.
57. Thanks!
58. 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