Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@radibit

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@radibit @radibit GitHub · Twi er · CodePen

Slide 5

Slide 5 text

@radibit ⏳

Slide 6

Slide 6 text

@radibit Objective time

Slide 7

Slide 7 text

@radibit Humans Since 1982

Slide 8

Slide 8 text

@radibit ⚗

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@radibit • Is our website up at the moment? • How fast is our website right now? • How cost effective 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:

Slide 14

Slide 14 text

@radibit • Is our website up at the moment? • How fast is our website right now? • How cost effective is our performance? • If there is a process which is slowing down our website - where is it? • How fast is our website in predefined environments, connections, and locations? Synthetic monitoring Web performance under strict conditions Gives answer to the following questions:

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@radibit It’s a good starting point

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@radibit ⏳

Slide 27

Slide 27 text

@radibit Subjective time

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@radibit Active vs. Passive Time

Slide 31

Slide 31 text

@radibit

Slide 32

Slide 32 text

@radibit

Slide 33

Slide 33 text

@radibit

Slide 34

Slide 34 text

@radibit

Slide 35

Slide 35 text

@radibit From passive to active state Streeetpong, Urban Invention

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

@radibit How people sense time?

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@radibit Rotating snakes, Akiyoshi Kitaoka

Slide 45

Slide 45 text

@radibit The stopped clock illusion Chronostasis, Wikipedia

Slide 46

Slide 46 text

@radibit What we know about response times?

Slide 47

Slide 47 text

@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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

@radibit How can we apply this knowledge?

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

@radibit How can we apply this knowledge? • Keep users in active mental state • Speed up the perception of the passive phases

Slide 52

Slide 52 text

@radibit How can we apply this knowledge? • Keep users in active mental state • Speed up the perception of the passive phases • Pretend to work, even when you don’t

Slide 53

Slide 53 text

@radibit Just noticeable difference Weber–Fechner law, Wikipedia

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@radibit Speed up perception

Slide 57

Slide 57 text

@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

Slide 58

Slide 58 text

@radibit Optimise what directly affects people’s load perception

Slide 59

Slide 59 text

@radibit Optimistic updates

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

@radibit Skeleton screens

Slide 63

Slide 63 text

@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

Slide 64

Slide 64 text

@radibit Progressive image loading

Slide 65

Slide 65 text

@radibit JavaScript Start-up Performance, Medium

Slide 66

Slide 66 text

@radibit Progress indicators

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

@radibit What about spinners and loaders?

Slide 69

Slide 69 text

@radibit CSS Loaders, CodePen

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

@radibit Interface animation

Slide 72

Slide 72 text

@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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

@radibit Attract users’ attention The benefit 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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

@radibit Don’t forget to stay :active

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

@radibit Measuring perceived performance

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

@radibit Real user monitoring Analyse the performance metrics that most affect user experience. Gives answer to the following questions: • Did the navigation started successfully?

Slide 84

Slide 84 text

@radibit Real user monitoring Analyse the performance metrics that most affect user experience. Gives answer to the following questions: • Did the navigation started successfully? • Is there enough content rendered that people can engage with it?

Slide 85

Slide 85 text

@radibit Real user monitoring Analyse the performance metrics that most affect 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?

Slide 86

Slide 86 text

@radibit Real user monitoring Analyse the performance metrics that most affect 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?

Slide 87

Slide 87 text

@radibit Human-centric performance metrics

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

@radibit Human-centric performance metrics • First Paint and First Contentful Paint • First Meaningful Paint • Time To Interactive

Slide 91

Slide 91 text

@radibit Human-centric performance metrics • First Paint and First Contentful Paint • First Meaningful Paint • Time To Interactive • Custom resource and navigation metrics

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

@radibit Short vs. Long Tasks

Slide 98

Slide 98 text

@radibit User Timing API Provides an API to define 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/

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

@radibit Processing model Timing a ributes defined by the PerformanceNavigationTiming and PerformanceResourceTiming interfaces

Slide 102

Slide 102 text

@radibit Tools ⚒

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

@radibit WebPagetest (not well known) features

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

@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

Slide 109

Slide 109 text

@radibit • 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 • Quick and easy sharing of perf results with h ps://www.webpagetest.org/easy WebPagetest (not well known) features

Slide 110

Slide 110 text

@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

Slide 111

Slide 111 text

@radibit @radibit Browser developer tools

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

@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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

@radibit Be smart about perceived performance

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

@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

Slide 120

Slide 120 text

@radibit Care more about your users

Slide 121

Slide 121 text

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