Understanding UX & Hacking Perceived Performance

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

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

Source: 1&1 Internet

The average web user
believes they waste
two days a year
waiting for pages to load.
Source: 1&1 Internet

Source: Akamai

Source: Stoyan Stefanov, The Psychology of Speed

Source: webperf.io

“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

“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

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ölzle
Senior Vice President of Technical Infrastructure
Google

fast
slow

“Time is measured objectively
but perceived subjectively,
and experiences can
be engineered to improve
perceived performance.”
Ilya Grigorik
High Performance Browser Networking

A progress indicator on a page that
loads in <5 seconds will make that
page feel slower.
Best case: 10+ seconds

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

Progress bars that pulse, and that
increase pulsation frequency as the bar
progresses, are perceived as being
faster.

Progress bars that speed up are
considered more satisfying by users.*
*Think back to that colonoscopy research

But…
Use them sparingly.

When do users start to interact with a page?

Source: Radware, Progressive JPEGs: Good or Evil?

“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

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

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

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

Original: 3.5s
SPOF: 22.7s

Popup best practices
• Optimize script
• Ensure cross-browser
functionality
• Delay for at least 10 seconds
• A/B test for effectiveness

First Paint is not equal to Start Render!
Chrome – “First Paint” True Start Render

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

How long does it
take to display the
main product
image on my site?

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

http://soasta.io/perftimings

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.

Source: Jakob Nielsen

Make the perceived value
of your content
worth the wait.

Understanding UX & Hacking Perceived Performance

Recommandé

Recommandé

Contenu connexe

Plus de Tammy Everts

Plus de Tammy Everts (17)

Dernier

Dernier (11)

Understanding UX & Hacking Perceived Performance