CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016

Understanding UX & Hacking Perceived Performance

NY Web Performance Meetup • May 2016

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016

@tamevertsperformancebeacon.com

WPOstats.com

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 3

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 4

Source: 1&1 Internet

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 5

The average web user believes they waste two days a year

waiting for pages to load.

Source: 1&1 Internet

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 6

Source: Akamai

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 7

Source: Stoyan Stefanov, The Psychology of Speed

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 8

Source: webperf.io

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 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

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 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

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 11

Source: Jakob Nielsen

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 12

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 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ölzleSenior Vice President of Technical

Infrastructure Google

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 14

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 15

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 16

fast

slow

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 17

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 18

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 19

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 20

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 21

“Time is measured objectively

but perceived subjectively, and experiences can

be engineered to improve perceived performance.”

Ilya GrigorikHigh Performance Browser Networking

Progress indicators

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 23

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 24

A progress indicator on a page that loads in <5 seconds will make that

page feel slower.

Best case: 10+ seconds

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 25

Progress bars that offer the illusion of a left-moving ripple can improve perceived wait time by up to 10%.

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 26

Progress bars that pulse, and that increase pulsation frequency as

the bar progresses, are perceived as being faster.

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 27

Progress bars that speed up are considered more satisfying by

users.*

*Think back to that colonoscopy research

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 28

But…Use them sparingly.

Images

30

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 31

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 32

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 33

When do users start to interact with a page?

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 34

Source: Radware, Progressive JPEGs: Good or Evil?

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 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 LewisChair, Mindlab International

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 36

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 37

http://www.oreilly.com/pub/e/3425

Defer

39

Third-party contentcan make up >50%

of page requests

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 40

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 41

Exposes you to data leakageGenerates content security warnings that alarm your visitors and kill your conversionsHurts your Google search rankings (SEO)Makes your site vulnerable to man-in-the-middle security attacks

Potential impact of fourth-party calls

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 42

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 43

Original: 3.5s

SPOF: 22.7s

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 44

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 45

Popup best practices• Optimize script• Ensure cross-browser

functionality• Delay for at least 10

seconds• A/B test for effectiveness

Measure the right stuff

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 47

First Paint is not equal to Start Render!

Chrome – “First Paint”

True Start Render

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 48

User Timing InterfaceAllows developers to measure performance of their applications through high-precision timestamps

Consists of “marks” and “measures” PerformanceMark: Timestamp PerformanceMeasure: Duration between

two given marks

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 49

How long does it take to display

the main product image on my

site?

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 50

Record when an image loads<img src=“image1.gif” onload=“performance.mark(‘image1’)”>

For more interesting examples:

Measure hero image delayhttp

://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

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 51

http://soasta.io/perftimings

Be useful

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 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.

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 54

Source: Jakob Nielsen

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 55

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016 56

Make the perceived value

of your content worth the wait.

Thanks!

CONFID EN TIA L – No t f o r D i s t r i bu t i o n | ©20 16 S OA STA, A l l r i gh t s re se rv ed . | Oc to ber 3 , 2016

@tamevertsperformancebeacon.com

WPOstats.com