Post on 19-Mar-2017
A #UX tale:DevOps guide to empathy
Tammy EvertsToronto Web Performance MeetupMarch 2017
@tamevertsperformancebeacon.com
WPOstats.com
soasta.io/timeismoneybook
“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
Perception vs. reality
The average web user believes they waste
two days a year waiting for pages to load.
Source: Stoyan Stefanov, The Psychology of Speed
“Phone rage”: How people react to slow mobile sites
Tealeaf/Harris Interactive, 2011
http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain-how-our-memory-works-and-how-this-relates-to-web-performance/
“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, SpeedCurve
Why are we so impatient?
Source: Jakob Nielsen
“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
How do we measure frustration and engagement?
https://www.slideshare.net/nicjansma/measuring-continuity
“Web stress”When apps or sites are slow,
we have to concentrate up to 50% harder to stay on
task.
CA Technologies, 2011
Radware, 2013
Radware, 2013
fast
slow
Radware, 2013
Are we measuring the right stuff?
https://www.slideshare.net/nicjansma/measuring-continuity
https://www.slideshare.net/nicjansma/measuring-continuity
26
First Paint is not equal to Start Render!
Chrome – “First Paint”
True Start Render
27
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
28
How long does it take to display
the main product image on my
site?
29
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
Cheating perception
“Time is measured objectively but perceived subjectively,
and experiences can be engineered to improve
perceived performance.”
Ilya GrigorikHigh Performance Browser Networking
Progress indicators
34
35
A progress indicator on a page that loads in <5 seconds will make that
page feel slower.
Best case: 10+ seconds
36
Progress bars that offer the illusion of a left-moving ripple can improve
perceived wait time by up to 10%.
37
Progress bars that pulse, and that increase pulsation frequency
as the bar progresses, are perceived as being faster.
38
Progress bars that speed up are considered more satisfying by
users.*
*Think back to that colonoscopy research
39
But…use them sparingly
Image rendering
42
43HTTP Archive, February 2017
44
When do we start to interact with a page?
Radware, Progressive JPEGs: Good or Evil?
45Radware, Progressive JPEGs: Good or Evil?
46
“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
47
48
http://www.oreilly.com/pub/e/3425
Make the perceived value of your content worth the wait
http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain-how-our-memory-works-and-how-this-relates-to-web-performance/
One last thought
65% of seniors use the internet.
Users aged 65 and older are 43% slower at using
websites than users aged 21-55.
https://www.nngroup.com/articles/usability-for-senior-citizens/
Between the ages of 25 and 60, our ability to use the web
declines by 0.8% a year.
https://www.nngroup.com/articles/usability-for-senior-citizens/
VisionDexterityWorking memory
Thanks!@tameverts
performancebeacon.comWPOstats.com