How quick users think your site is - measure and speed up perceived performance

Measure and speed up perceived performance
Radimir Bitsov @radibit
How quick users think
your website is?

View Slide

@radibit

View Slide

@radibit
Radimir
Bitsov
Front-end engineer who ❤
web performance, accessibility,
and interface animation.

View Slide

@radibit
@radibit
GitHub · Twi er · CodePen

View Slide

@radibit
⏳

View Slide

@radibit
Objective time

View Slide

@radibit
Humans Since 1982

View Slide

@radibit
⚗

View Slide

@radibit
Synthetic monitoring
Web performance under strict conditions
Gives answer to the following questions:

View Slide

@radibit
• Is our website up at the moment?

View Slide

@radibit
• How fast is our website right now?

View Slide

@radibit
• How cost eﬀective is our performance?

View Slide

@radibit
• If there is a process which is slowing down our website - where is it?

View Slide

@radibit
• If there is a process which is slowing down our website - where is it?
• How fast is our website in predeﬁned environments, connections, and locations?

View Slide

@radibit
Synthetic results as
a baseline
• Location Ireland
• Connectivity Cable
• Page Load Time ~ 1.8 s
• First Byte ~ 0.6 s
• Speed Index 744

View Slide

@radibit
We are focused too much
on improving the
objective time

View Slide

@radibit
Web performance
budgeting
Make sure web performance is in
check throughout a project by deﬁning
limits for important metrics like
milestone timings, resources size etc.
Performance Budget Metrics, Tim Kadlec

View Slide

@radibit
It’s a good starting point

View Slide

@radibit
It’s a good starting point
However, we can do better

View Slide

@radibit
⏳

View Slide

@radibit
Subjective time

View Slide

@radibit
“Alice: How long is forever?  
White Rabbit: Sometimes,
just one second.”
Lewis Carroll, Alice in Wonderland
Disney Enterprises, Inc

View Slide

@radibit
The kappa effect
Perceptual time duration
500km / 3h  
1000km / 3h
The kappa eﬀect, Wikipedia

View Slide

@radibit
Active vs.
Passive Time

View Slide

@radibit

View Slide

@radibit
From passive to active state
Streeetpong, Urban Invention

View Slide

@radibit
Also, how does it feel?
0 - 100 km/h in 2.4s

View Slide

@radibit
How people sense
time?

View Slide

@radibit
The internal clock model
Start

End
Other stimulus
Pacemaker
Accumulator
Decision taking
A ention, Perception, & Psychophysics, 2010

View Slide

@radibit
Our brains manipulate the perceived
duration all the time
Time
Point 1 Point 2
Point 2

View Slide

@radibit
Time
Point 1 Point 2
Blur in between Point 2

View Slide

@radibit
Time
Point 1 Point 2
Point 2
Point 2
Point 2

View Slide

@radibit
Rotating snakes, Akiyoshi Kitaoka

View Slide

@radibit
The stopped clock illusion
Chronostasis, Wikipedia

View Slide

@radibit
What we know about
response times?

View Slide

@radibit
Response times
Instant
Immediate
User Flow
A ention Span
0s 2s 4s 6s 8s
Human perception have been consistent for the last 50 years
Nielsen Norman Group

View Slide

@radibit
0.1s < < 1s < 3s < 8s+
Users’ expectation to get a feedback
from a given action

View Slide

@radibit
How can we apply this knowledge?

View Slide

@radibit
• Keep users in active mental state

View Slide

@radibit
• Speed up the perception of the passive phases

View Slide

@radibit
• Speed up the perception of the passive phases
• Pretend to work, even when you don’t

View Slide

@radibit
Just noticeable
difference
Weber–Fechner law, Wikipedia

View Slide

@radibit
The 20% rule
In order for users to see any diﬀerence, it has to be changed by a minimum of 20%
Designing and Engineering Time, Steven C. Seow

View Slide

@radibit
Aim for 30%, go beyond
the threshold ⚡

View Slide

@radibit
Speed up
perception

View Slide

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

View Slide

@radibit
Optimise what directly
affects people’s load
perception

View Slide

@radibit
Optimistic updates

View Slide

@radibit
Background
operations
Instagram starts uploading a
picture as soon as users choose the
one they want to share.

View Slide

@radibit
Background
operations
Register the like action, though the
feed is still loading. Same happens
when the connection is slow or
down.

View Slide

@radibit
Skeleton screens

View Slide

@radibit
Skeleton screen in
action
It feels that the application on
the le side loads the content
faster!
How to use Disney’s principles of animation
to improve UX

View Slide

@radibit
Progressive image
loading

View Slide

@radibit
JavaScript Start-up Performance, Medium

View Slide

@radibit
Progress indicators

View Slide

@radibit
12% increase on the perception for faster
completion
Faster progress bars: Manipulating perceived duration with visual augmentations

View Slide

@radibit
What about spinners
and loaders?

View Slide

@radibit
CSS Loaders, CodePen

View Slide

@radibit
Avoid them as a
single indicator
They draw a ention to the fact that
the user is waiting

View Slide

@radibit
Interface animation

View Slide

@radibit
Motion
Animation can help the eye
to follow easily the position
of newly appeared objects
on the screen.
UI Animation and UX: A Not-So-Secret Friendship, Val Head

View Slide

@radibit
Reduce cognitive load
Well implemented animations have a
direct eﬀect upon the perception of
time needed to complete certain action.
Leverage common design pa erns,
minimize choices.

View Slide

@radibit
Content
shifting UX
The associations of space,
time and placement can
help an interaction seem
more ﬂuid and intuitive.
The Importance of Context-Shifting in UX Patterns, Sarah Drasner

View Slide

@radibit
Attract users’
attention
The beneﬁt of drawing the users’
a ention is to guide their focus
to show hierarchy and
relationships between screens
and elements on the screen.
Animation for A ention and Comprehension, NNGroup

View Slide

@radibit
Attract users’
attention
⚠ Be careful, users do not
want to wait and watch
some lengthy, purposeless
animations.

View Slide

@radibit
Performance and functionality however
should always be the goal over anything else
Animation is a
powerful technique

View Slide

@radibit
Don’t forget to stay
:active

View Slide

@radibit
Active state
Give immediate visual
feedback.
Stay :active, CodePen

View Slide

@radibit
Active state with
transition ⛔
Avoid using transition with
the active state.

View Slide

@radibit
Measuring perceived
performance

View Slide

@radibit
Real user monitoring
Analyse the performance metrics that most aﬀect user experience.

View Slide

@radibit
• Did the navigation started successfully?

View Slide

@radibit
• Is there enough content rendered that people can engage with it?

View Slide

@radibit
• Is it possible to interact with the page, or it’s still busy loading?

View Slide

@radibit
• Is it possible to interact with the page, or it’s still busy loading?
• Are the interactions smooth and natural?

View Slide

@radibit
Human-centric performance metrics

View Slide

@radibit
• First Paint and First Contentful Paint

View Slide

@radibit
• First Meaningful Paint

View Slide

@radibit
• Time To Interactive

View Slide

@radibit
• Time To Interactive
• Custom resource and navigation metrics

View Slide

@radibit
Paint Timing
API
Allows you to capture
metrics on when a page
begins painting.

View Slide

@radibit
First paint / First contentful paint
Some of the key moments that aﬀects people’s perception of time

View Slide

@radibit
Metric timeline
Illustration of the diﬀerence between the user-centric metrics
User Navigates
First Paint
First Contentful Paint
0%
TTI
100%
First Meaningful Paint

View Slide

@radibit
Metric timeline
Illustration of the diﬀerence between the user-centric metrics
First Paint
First Contentful
Paint
First Meaningful Paint
Visually Ready
Time To Interactive

View Slide

@radibit
Long Tasks API
It refers to an event loop
tasks that exceeds 50ms.

View Slide

@radibit
Short vs. Long Tasks

View Slide

@radibit
User Timing API
Provides an API to deﬁne
custom metrics to our web
apps.
performance.mark records the
time (in milliseconds) since
navigationStart. 
performance.measure records
the delta between two marks.
h ps://w3c.github.io/user-timing/

View Slide

@radibit
Resource
Timing API
Collect complete timing
information on the user
experience of loading
document resources.
www.w3.org/TR/resource-timing-1

View Slide

@radibit
Navigation
Timing API
Store and retrieve high
resolution performance
metric data related to the
navigation of a document.
w3c.github.io/navigation-timing

View Slide

@radibit
Processing model
Timing a ributes deﬁned by the PerformanceNavigationTiming and
PerformanceResourceTiming interfaces

View Slide

@radibit
Tools ⚒

View Slide

@radibit
WebPagetest
Amazing open-source project
created by Pat Meenan,
supported by Google. The tool
provides both synthetic and
RUM monitoring, variety of
integration options, and
custom performance metrics.
h ps://www.webpagetest.org/

View Slide

@radibit
WebPagetest (not well known) features

View Slide

@radibit
• Simulating a single point of failure

View Slide

@radibit
• Create your own custom metrics

View Slide

@radibit
• Visually compare multiple tests from the history page

View Slide

@radibit
• Create your own personal WebPagetest instance

View Slide

@radibit
• Create your own personal WebPagetest instance
• Quick and easy sharing of perf results with h ps://www.webpagetest.org/easy

View Slide

@radibit
Lighthouse
Another great open-source
project, created and
maintained by the Google
team with special a ention
on the PWA monitoring.
Already part of the Chrome
dev tools.
Lighthouse, Google Developers

View Slide

@radibit
@radibit
Browser developer tools

View Slide

@radibit
pwmetrics
Created by Paul Irish,
this CLI tool can help
you collect human-
centric performance
metrics, se ing up a
budget, and conﬁgure it
as a part of your CI.
h ps://github.com/paulirish/pwmetrics

View Slide

@radibit
SiteSpeed
Collection of open-source tools that
can help you to get best practices on
how to optimise your website, collect
performance metrics, execute
regression tests, compare multiple
test results etc.
h ps://www.sitespeed.io/

View Slide

@radibit
SpeedCurve
Lead by Steve Souders and Mark
Zeman, SpeedCurve is a
comprehensive web performance
tool with a high-level of
customisation. Provides real user
monitoring abbreviated as LUX —
“Live User Experience”.
h ps://speedcurve.com

View Slide

@radibit
♠ Calibre
Great automated
performance monitoring
tool with focus on human-
centric metrics! Created
by Ben Schwarz.
h ps://calibreapp.com/

View Slide

@radibit
perf-tooling.today
Find even more web performance
related tools, books, articles,
videos on perf-tooling.today
www.perf-tooling.today

View Slide

@radibit
Be smart about perceived performance

View Slide

@radibit
Try to make your site feel fast
That’s what really ma ers in terms of delightful user experience

View Slide

@radibit
“The web is not only for the privileged. […]
people with perfect eyesight using modern
devices with high-resolution screens on fast
network connections constitute a small
fraction of internet users. Don’t forget
about the rest!”
Bram Stain,  
Developer and Product Manager, Adobe Typekit
h ps://abookapart.com/products/webfont-handbook

View Slide

@radibit
Care more about
your users

View Slide

@radibit
Thank you
@radibit
Slides: h p://bit.ly/human-centric-perf

View Slide

How quick users think your site is - measure and speed up perceived performance

How quick users think your site is - measure and speed up perceived performance

Radimir Bitsov

More Decks by Radimir Bitsov

Other Decks in Programming

Featured

Transcript