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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Progress indicators

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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%.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Images

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Defer

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Measure the right stuff

Slide 47

Slide 47 text

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Be useful

Slide 53

Slide 53 text

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.