Tweet
Tweet

Slide 1

Slide 1 text

Radimir Bitsov @radibit Focusing on the human-centric metrics Time to Interactive

Slide 2

Slide 2 text

@radibit

Slide 3

Slide 3 text

@radibit Radimir Bitsov @radibit Frontend engineer who ❤ web performance, accessibility, and interactive design.

Slide 4

Slide 4 text

@radibit 1. How quick people think your web app is?

Slide 5

Slide 5 text

@radibit Time

Slide 6

Slide 6 text

@radibit We don't perceive time the way clocks portray it

Slide 7

Slide 7 text

@radibit Awareness of time can be a funny thing 1987 2011

Slide 8

Slide 8 text

@radibit Perception of time Web performance is about perception of time

Slide 9

Slide 9 text

@radibit Perception of time Web performance is about perception of time Time is perceived subjectively by all of us

Slide 10

Slide 10 text

@radibit Perception of time Web performance is about perception of time Time is perceived subjectively by all of us It varies according many factors – age, location, emotions

Slide 11

Slide 11 text

@radibit Perception of time Web performance is about perception of time Time is perceived subjectively by all of us It varies according many factors – age, location, emotions More o en we optimize for the objective time

Slide 12

Slide 12 text

@radibit Perception of time Web performance is about perception of time Time is perceived subjectively by all of us It varies according many factors – age, location, emotions More o en we optimize for the objective time

Slide 13

Slide 13 text

@radibit Why perceived performance matters?

Slide 14

Slide 14 text

@radibit People tend to lose focus after 1 second h ps://www.nngroup.com/articles/response-times-3-important-limits/ 0.1s 1s 1s 3s 3s 8s+

Slide 15

Slide 15 text

@radibit What happens when people encounter slow or interrupted processes? IBM, Mobile Customer Experience 23 percent cursed at their phones

Slide 16

Slide 16 text

@radibit What happens when people encounter slow or interrupted processes? IBM, Mobile Customer Experience 23 percent cursed at their phones ❌ 21 percent deleted the poorly functioning app

Slide 17

Slide 17 text

@radibit What happens when people encounter slow or interrupted processes? IBM, Mobile Customer Experience 23 percent cursed at their phones ❌ 21 percent deleted the poorly functioning app 11 percent screamed at their mobile device

Slide 18

Slide 18 text

@radibit What happens when people encounter slow or interrupted processes? IBM, Mobile Customer Experience 23 percent cursed at their phones ❌ 21 percent deleted the poorly functioning app 11 percent screamed at their mobile device 4 percent threw their mobile device

Slide 19

Slide 19 text

1s delay, 16% lower satisfaction The Aberdeen Group discovered a 1- second delay resulted in 11% fewer page views, a 16% decrease in customer satisfaction, and 7% loss in conversions. h ps://wpostats.com/2015/10/29/aberdeen-1-percent.html

Slide 20

Slide 20 text

@radibit 2. The problem with web performance metrics

Slide 21

Slide 21 text

@radibit Objective performance

Slide 22

Slide 22 text

@radibit Page Load Time Speed Index

Slide 23

Slide 23 text

@radibit Page Load Time, Speed Index Aside from giving insights on the moment when the page had fully loaded they do not describe the user experience.

Slide 24

Slide 24 text

@radibit Page Load Time, Speed Index

Slide 25

Slide 25 text

@radibit Page Load Time, Speed Index

Slide 26

Slide 26 text

@radibit Page Load Time, Speed Index Should we stop here?

Slide 27

Slide 27 text

@radibit Page Load Time, Speed Index

Slide 28

Slide 28 text

@radibit Paint based metrics

Slide 29

Slide 29 text

@radibit Paint based metrics Navigation begins

Slide 30

Slide 30 text

@radibit Paint based metrics Navigation begins First Paint

Slide 31

Slide 31 text

@radibit Paint based metrics Navigation begins First Paint First Contentful Paint

Slide 32

Slide 32 text

@radibit Paint based metrics Navigation begins First Paint First Contentful Paint First Meaningful Paint

Slide 33

Slide 33 text

@radibit Paint based metrics Navigation begins First Paint First Contentful Paint First Meaningful Paint Visually complete

Slide 34

Slide 34 text

@radibit Paint based metrics Good metrics that give us information on key moments of our content rendering.

Slide 35

Slide 35 text

@radibit Paint based metrics Do they tell us enough?

Slide 36

Slide 36 text

@radibit Paint based metrics

Slide 37

Slide 37 text

@radibit Optimize what directly affects people’s perception of loading time.

Slide 38

Slide 38 text

@radibit Prioritize the user experience.

Slide 39

Slide 39 text

@radibit 3. Time to Interactive

Slide 40

Slide 40 text

@radibit Human centric performance

Slide 41

Slide 41 text

@radibit Time to Interactive explainer Highlights the moment when a website or app is capable of responding quickly to user input

Slide 42

Slide 42 text

@radibit Time to Interactive explainer Highlights the moment when a website or app is capable of responding quickly to user input The goal is to measure how efficient a website or app is when interacted with

Slide 43

Slide 43 text

@radibit Time to Interactive explainer Highlights the moment when a website or app is capable of responding quickly to user input The goal is to measure how efficient a website or app is when interacted with

Slide 44

Slide 44 text

@radibit How is Time to Interactive calculated

Slide 45

Slide 45 text

@radibit First Idle (First Interactive) The first early sign of time where the main thread has come at rest and the browser has completed a First Meaningful Paint.

Slide 46

Slide 46 text

@radibit Time to Interactive (Consistently Interactive) A er the First Meaningful Paint, when the main thread has been at rest for at least 5 seconds and there are no long tasks that will prevent immediate response to user input.

Slide 47

Slide 47 text

@radibit Navigation begins First Paint First Meaningful Paint First Idle 5 seconds without long tasks First Idle and Time to Interactive Loading time First Interactive and Consistently Interactive Short task Long task (longer than 50ms)

Slide 48

Slide 48 text

@radibit 4. JavaScript main thread

Slide 49

Slide 49 text

@radibit Main thread pipeline JS Fetched JS Parsed JS Compiled

Slide 50

Slide 50 text

@radibit Main thread pipeline JS Fetched JS Compiled JS Parsed Style Calculations Layout

Slide 51

Slide 51 text

@radibit Main thread pipeline JS Fetched JS Compiled JS Parsed Style Calculations Layout Render

Slide 52

Slide 52 text

@radibit Locking the main thread

Slide 53

Slide 53 text

@radibit Why the main thread can be blocked? JS Fetched JS Compiled JS Parsed Style Calculations Layout Render Evaluate Script (main.js) Loading time 0 ms 100 ms 200 ms 300 ms

Slide 54

Slide 54 text

@radibit Why the main thread can be blocked? JS Fetched JS Compiled JS Parsed Style Calculations Layout Render Evaluate Script (main.js) Loading time 0 ms 100 ms 200 ms 300 ms Single long-running operation which takes more than 50 ms

Slide 55

Slide 55 text

@radibit Why the main thread can be blocked? JS Fetched JS Compiled JS Parsed Style Calculations Layout Render Evaluate Script (main.js) Loading time 0 ms 100 ms 200 ms 300 ms Single long-running operation which takes more than 50 ms

Slide 56

Slide 56 text

@radibit Blocking the main thread Users won’t be able to receive any immediate feedback from their actions

Slide 57

Slide 57 text

@radibit Blocking the main thread Users won’t be able to receive any immediate feedback from their actions Frustrating situations, unexpected updates

Slide 58

Slide 58 text

@radibit Blocking the main thread Users won’t be able to receive any immediate feedback from their actions Frustrating situations, unexpected updates Far more destructive result on mobile devices – ba ery drain, poor animations, junky scrolling

Slide 59

Slide 59 text

@radibit Blocking the main thread Users won’t be able to receive any immediate feedback from their actions Frustrating situations, unexpected updates Far more destructive result on mobile devices – ba ery drain, poor animations, junky scrolling

Slide 60

Slide 60 text

@radibit State of JavaScript

Slide 61

Slide 61 text

@radibit The median mobile webpage 370KB HTTP Archive State of JavaScript report (Sep 2018) 9s JavaScript Until Interactive

Slide 62

Slide 62 text

@radibit Can you afford this much JavaScript?

Slide 63

Slide 63 text

Sites with this much script are simply inaccessible to a broad swath of the world’s users; statistically, users do not (and will not) wait for these experiences to load.  Alex Russell, 
 So ware Engineer, Google Chrome Team “

Slide 64

Slide 64 text

@radibit 5. Why does Time to Interactive matter?

Slide 65

Slide 65 text

@radibit Interactivity should be essential

Slide 66

Slide 66 text

@radibit Engaging and meaningful user experience

Slide 67

Slide 67 text

TTI case study The Pinterest’s engineering team observed 60% higher user engagement a er reducing Time to Interactive from 23s to 5.6s, and to 3.9s on repeat visits! Pinterest performance case study

Slide 68

Slide 68 text

@radibit 6. Measuring Time to Interactive

Slide 69

Slide 69 text

@radibit Often we take fast networks, powerful CPUs, and high-end phones for granted

Slide 70

Slide 70 text

@radibit Step outside the bubble – test using ‘real world’ conditions.

Slide 71

Slide 71 text

@radibit mobile connections are either 3G or 2G h ps://www.gsma.com/mobileeconomy/ 75%

Slide 72

Slide 72 text

@radibit Aim for Time to Interactive under 5 seconds On all devices h ps://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

Slide 73

Slide 73 text

Just because you are grabbing all the low-hanging fruit doesn’t mean you are making a good fruit salad. Jen Simmons, 
 Designer Advocate, 
 Mozilla “

Slide 74

Slide 74 text

@radibit Real User Monitoring

Slide 75

Slide 75 text

@radibit Performance Observer, requestIdleCallback()

Slide 76

Slide 76 text

@radibit Performance Observer, requestIdleCallback()

Slide 77

Slide 77 text

@radibit Performance Observer, requestIdleCallback()

Slide 78

Slide 78 text

@radibit Performance Observer, requestIdleCallback()

Slide 79

Slide 79 text

@radibit Performance Observer, requestIdleCallback()

Slide 80

Slide 80 text

@radibit Tooling for performance budgets

Slide 81

Slide 81 text

WebPageTest Quick way to run comprehensive web performance reports with scripting capability that lets you automate multi-step test. Private instance option for CI or commit- queue system. h ps://www.webpagetest.org/easy

Slide 82

Slide 82 text

Lighthouse Web performance audits as part of Chrome Dev Tools. Travis CI implementation for pull requests. h ps://github.com/ebidel/lighthouse-ci h ps://googlechrome.github.io/lighthouse/viewer/

Slide 83

Slide 83 text

Bundlesize, Webpack Performance Keep your bundle size in check with Bundlesize and define your performance budget using Webpack. h ps://github.com/siddharthkp/bundlesize h ps://webpack.js.org/configuration/performance/

Slide 84

Slide 84 text

♠ Calibre You can keep track of and analyze First Idle and Time to Interactive using Calibre’s automated web performance tests. h ps://calibreapp.com/

Slide 85

Slide 85 text

Perf Tooling Find more web performance related tools, books, articles, videos 8 9 h p://www.perf-tooling.today

Slide 86

Slide 86 text

@radibit Make people feel good and help them achieve their goals faster.

Slide 87

Slide 87 text

@radibit Headline Text Subtitle Thank you @radibit Slides: h p://bit.ly/ i-perf #perfma ers ❤