View
1.367
Download
1
Category
Preview:
Citation preview
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
Recommended