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?

1. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016
Understanding UX
& Hacking Perceived Performance
NY Web Performance Meetup • May 2016

2. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016
@tameverts
performancebeacon.com
WPOstats.com

3. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 3

4. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 4
Source: 1&1 Internet

5. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 5
The average web user
believes they waste
two days a year
waiting for pages to load.
Source: 1&1 Internet

6. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 6
Source: Akamai

7. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 7
Source: Stoyan Stefanov, The Psychology of Speed

8. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 8
Source: webperf.io

9. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 11
Source: Jakob Nielsen

12. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 12

13. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 14

15. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 15

16. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 16
fast
slow

17. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 17

18. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 18

19. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 19

20. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 20

21. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 23

24. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 25
Progress bars that offer the illusion of a
left-moving ripple can improve
perceived wait time by up to 10%.

26. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 26
Progress bars that pulse, and that
increase pulsation frequency as the bar
progresses, are perceived as being
faster.

27. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 27
Progress bars that speed up are
considered more satisfying by users.*
*Think back to that colonoscopy research

28. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 28
But…
Use them sparingly.

29. Images

30. 30

31. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 31

32. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 32

33. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 33
When do users start to interact with a page?

34. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 34
Source: Radware, Progressive JPEGs: Good or Evil?

35. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 36

37. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 40

41. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 42

43. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 43
Original: 3.5s
SPOF: 22.7s

44. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 44

45. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 47
First Paint is not equal to Start Render!
Chrome – “First Paint” True Start Render

48. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 49
How long does it
take to display the
main product
image on my site?

50. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 51
http://soasta.io/perftimings

52. Be useful

53. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 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. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 54
Source: Jakob Nielsen

55. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 55

56. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016 56
Make the perceived value
of your content
worth the wait.

57. Thanks!

58. CONFIDENT IAL – Not for Distribution | ©2016 SOASTA, All rights reserved. | October 3, 2016
@tameverts
performancebeacon.com
WPOstats.com