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?

@radibit

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

@radibit @radibit GitHub · Twi er · CodePen

@radibit ⏳

@radibit Objective time

@radibit Humans Since 1982

@radibit ⚗

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

@radibit • Is our website up at the moment? Synthetic
monitoring Web performance under strict conditions Gives answer to the following questions:

@radibit • Is our website up at the moment? •
How fast is our website right now? Synthetic monitoring Web performance under strict conditions Gives answer to the following questions:

How fast is our website right now? • How cost eﬀective is our performance? Synthetic monitoring Web performance under strict conditions Gives answer to the following questions:

How fast is our website right now? • How cost eﬀective is our performance? • If there is a process which is slowing down our website - where is it? Synthetic monitoring Web performance under strict conditions Gives answer to the following questions:

How fast is our website right now? • How cost eﬀective is our performance? • 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? Synthetic monitoring Web performance under strict conditions Gives answer to the following questions:

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

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

@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

@radibit It’s a good starting point

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

@radibit ⏳

@radibit Subjective time

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

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

@radibit Active vs. Passive Time

@radibit

@radibit From passive to active state Streeetpong, Urban Invention

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

@radibit How people sense time?

@radibit The internal clock model Start End Other stimulus Pacemaker
Accumulator Decision taking A ention, Perception, & Psychophysics, 2010

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

Time Point 1 Point 2 Blur in between Point 2

Time Point 1 Point 2 Point 2 Point 2 Point 2

@radibit Rotating snakes, Akiyoshi Kitaoka

@radibit The stopped clock illusion Chronostasis, Wikipedia

@radibit What we know about response times?

@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

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

@radibit How can we apply this knowledge?

@radibit How can we apply this knowledge? • Keep users
in active mental state

in active mental state • Speed up the perception of the passive phases

in active mental state • Speed up the perception of the passive phases • Pretend to work, even when you don’t

@radibit Just noticeable difference Weber–Fechner law, Wikipedia

@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

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

@radibit Speed up perception

@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

@radibit Optimise what directly affects people’s load perception

@radibit Optimistic updates

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

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

@radibit Skeleton screens

@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

@radibit Progressive image loading

@radibit JavaScript Start-up Performance, Medium

@radibit Progress indicators

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

@radibit What about spinners and loaders?

@radibit CSS Loaders, CodePen

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

@radibit Interface animation

@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

@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.

@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

@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

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

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

@radibit Don’t forget to stay :active

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

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

@radibit Measuring perceived performance

@radibit Real user monitoring Analyse the performance metrics that most
aﬀect user experience. Gives answer to the following questions:

aﬀect user experience. Gives answer to the following questions: • Did the navigation started successfully?

aﬀect user experience. Gives answer to the following questions: • Did the navigation started successfully? • Is there enough content rendered that people can engage with it?

aﬀect user experience. Gives answer to the following questions: • Did the navigation started successfully? • Is there enough content rendered that people can engage with it? • Is it possible to interact with the page, or it’s still busy loading?

aﬀect user experience. Gives answer to the following questions: • Did the navigation started successfully? • Is there enough content rendered that people can engage with it? • Is it possible to interact with the page, or it’s still busy loading? • Are the interactions smooth and natural?

@radibit Human-centric performance metrics

@radibit Human-centric performance metrics • First Paint and First Contentful
Paint

Paint • First Meaningful Paint

Paint • First Meaningful Paint • Time To Interactive

Paint • First Meaningful Paint • Time To Interactive • Custom resource and navigation metrics

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

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

@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

@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

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

@radibit Short vs. Long Tasks

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

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

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

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

@radibit Tools ⚒

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

@radibit WebPagetest (not well known) features

@radibit • Simulating a single point of failure WebPagetest (not
well known) features

@radibit • Simulating a single point of failure • Create
your own custom metrics WebPagetest (not well known) features

your own custom metrics • Visually compare multiple tests from the history page WebPagetest (not well known) features

@radibit WebPagetest (not well known) features • Simulating a single
point of failure • Create your own custom metrics • Visually compare multiple tests from the history page • Create your own personal WebPagetest instance

your own custom metrics • Visually compare multiple tests from the history page • Create your own personal WebPagetest instance • Quick and easy sharing of perf results with h ps://www.webpagetest.org/easy WebPagetest (not well known) features

@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

@radibit @radibit Browser developer tools

@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

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

@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

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

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

@radibit Be smart about perceived performance

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

@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

@radibit Care more about your users

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

How quick users think your site is - measure an...

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

More Decks by Radimir Bitsov

Other Decks in Programming

Featured

Transcript