Hacking the Human Perception

A presentation at Angular Denver in August 2019 in Denver, CO, USA by Christopher A DeMars

Slide 1

Hacking the Human Perception Chris DeMars ● @saltnburnem https://pixabay.com/en/brain-icon-human-background-idea-1710293/ Chris DeMars ● @saltnburnem 1 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 2

Chris DeMars Front-End Developer Chris DeMars ● @saltnburnem 2 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 3

That’s me! Google Developer Expert Microsoft MVP Oracle Groundbreaker Ambassador Internatonal Speaker Founder of Vuetroit Host of Tales From the Script 💚 Tattoos & Horror Chris DeMars ● @saltnburnem 3 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 4

Why Are We Here Chris? Chris DeMars ● @saltnburnem 4 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 5

Let’s Talk! Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 6

Let’s Talk! 1.) Auditing & Testing Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 7

Let’s Talk! 1.) Auditing & Testing 2.) Time to First Paint Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 8

Let’s Talk! 1.) Auditing & Testing 2.) Time to First Paint 3.) Time to First Byte Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 9

Let’s Talk! 1.) 2.) 3.) 4.) Auditing & Testing Time to First Paint Time to First Byte Time to First Interactive Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 10

Let’s Talk! 1.) 2.) 3.) 4.) 5.) Auditing & Testing Time to First Paint Time to First Byte Time to First Interactive Perceived Performance Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 11

Let’s Talk! 1.) Auditing & Testing 2.) Time to First Paint 3.) Time to First Byte 4.) Time to First Interactive 5.) Perceived Performance a.) Critical CSS Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 12

Let’s Talk! 1.) Auditing & Testing 2.) Time to First Paint 3.) Time to First Byte 4.) Time to First Interactive 5.) Perceived Performance a.) Critical CSS b.) Skeleton Screens Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 13

Let’s Talk! 1.) Auditing & Testing 2.) Time to First Paint 3.) Time to First Byte 4.) Time to First Interactive 5.) Perceived Performance a.) Critical CSS b.) Skeleton Screens c.) Fun Distractions Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 14

Performance? Chris DeMars ● @saltnburnem 6 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 15

Visibility of System Status https://www.nngroup.com/articles/ten-usability-heuristics/ Chris DeMars ● @saltnburnem 7 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 16

Visibility of System Status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. https://www.nngroup.com/articles/ten-usability-heuristics/ Chris DeMars ● @saltnburnem 7 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 17

Fast? Chris DeMars ● @saltnburnem 8 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 18

Fast? Chris DeMars ● @saltnburnem ! Quick Desktop Load 8 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 19

Fast? Chris DeMars ● @saltnburnem ! Quick Desktop Load ! Quick Mobile Load 8 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 20

Fast? Chris DeMars ● @saltnburnem ! Quick Desktop Load ! Quick Mobile Load ! Time 8 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 21

Chris DeMars ● @saltnburnem 9 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 22

Chris DeMars ● @saltnburnem 9 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 23

Chris DeMars ● @saltnburnem 10 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 24

Chris DeMars ● @saltnburnem 10 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 25

Minimal Requests? Chris DeMars ● @saltnburnem 11 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 26

Minimal Requests? Chris DeMars ● @saltnburnem ! How many? 11 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 27

Minimal Requests? Chris DeMars ● @saltnburnem ! How many? ! What does that mean? 11 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 28

Load Time? Chris DeMars ● @saltnburnem 12 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 29

Load Time? Chris DeMars ● @saltnburnem ! Desktop 12 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 30

Load Time? Chris DeMars ● @saltnburnem ! Desktop ! 3G 12 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 31

Load Time? Chris DeMars ● @saltnburnem ! Desktop ! 3G ! 4G 12 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 32

Load Time? Chris DeMars ● @saltnburnem ! Desktop ! 3G ! 4G ! 2G 12 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 33

Chris DeMars ● @saltnburnem 13 https://bit.ly/2Uc47xa 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 34

Performance Chris DeMars ● @saltnburnem 14 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 35

Performance on the front end # # Chris DeMars ● @saltnburnem 14 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 36

Addy Osmani @addyosmani #PerfMatters Chris DeMars ● @saltnburnem 15 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 37

User Centric Metrics Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 38

User Centric Metrics 1.) Is it happening? Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 39

User Centric Metrics 1.) Is it happening? 2.) Is it useful? Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 40

User Centric Metrics 1.) Is it happening? 2.) Is it useful? 3.) Is it useable? Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 41

User Centric Metrics 1.) Is it happening? 2.) Is it useful? 3.) Is it useable? 4.) Is it delightful? Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 42

Testing & Audits Chris DeMars ● @saltnburnem 17 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 43

Lighthouse Chris DeMars ● @saltnburnem 18 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 44

Chris DeMars ● @saltnburnem 19 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 45

Chris DeMars ● @saltnburnem 19 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 46

WebPageTest Chris DeMars ● @saltnburnem 20 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 47

Chris DeMars ● @saltnburnem 21 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 48

Chris DeMars ● @saltnburnem 21 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 49

Chris DeMars ● @saltnburnem 22 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 50

Chris DeMars ● @saltnburnem 23 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 51

Chris DeMars ● @saltnburnem 24 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 52

Chris DeMars ● @saltnburnem 25 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 53

Chrome DevTools Chris DeMars ● @saltnburnem 26 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 54

Chris DeMars ● @saltnburnem 27 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 55

Chris DeMars ● @saltnburnem 27 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 56

Chris DeMars ● @saltnburnem 28 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 57

Chris DeMars ● @saltnburnem 28 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 58

Time to First Paint Chris DeMars ● @saltnburnem 29 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 59

Time to First Paint & Time to First Contentful Paint Chris DeMars ● @saltnburnem 30 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 60

Time to First Paint Chris DeMars ● @saltnburnem 31 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 61

Time to First Paint The point where the browser renders anything to the screen. Chris DeMars ● @saltnburnem 31 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 62

Time to First Contentful Paint Chris DeMars ● @saltnburnem 32 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 63

Time to First Contentful Paint The point where the browser renders the first bit of content from the DOM. Chris DeMars ● @saltnburnem 32 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 64

First Paint 1.4s First Contentful Paint 1.4s Chris DeMars ● @saltnburnem 33 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 65

First Paint 1.4s First Contentful Paint 1.4s Chris DeMars ● @saltnburnem 33 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 66

Chris DeMars ● @saltnburnem 34 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 67

Time to First Meaningful Paint Chris DeMars ● @saltnburnem 35 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 68

https://bit.ly/2HVcwvP Chris DeMars ● @saltnburnem 36 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 69

Time to First Byte Chris DeMars ● @saltnburnem 37 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 70

Chris DeMars ● @saltnburnem 38 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 71

Chris DeMars ● @saltnburnem 38 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 72

https://www.keycdn.com/support/what-is-ttfb/ Chris DeMars ● @saltnburnem 39 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 73

TTFB 230ms Chris DeMars ● @saltnburnem 40 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 74

Time to Interactive Chris DeMars ● @saltnburnem 41 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 75

Chris DeMars ● @saltnburnem 42 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 76

Chris DeMars ● @saltnburnem 42 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 77

Why measure DOMContentLoaded? Chris DeMars ● @saltnburnem 43 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 78

Critical Rendering Path Chris DeMars ● @saltnburnem 43 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 79

Chris DeMars ● @saltnburnem 44 https://bit.ly/2JazYc6 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 80

Perceived Performance Chris DeMars ● @saltnburnem 45 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 81

Perceived performance is a measure of how quick a user thinks your site is, and that’s often more important than its true speed. - Matt West Chris DeMars ● @saltnburnem 46 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 82

Critical CSS Chris DeMars ● @saltnburnem 47 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 83

https://www.smashingmagazine.com/2015/08/understanding-critical-css/ Chris DeMars ● @saltnburnem 48 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 84

https://www.smashingmagazine.com/2015/08/understanding-critical-css/ Chris DeMars ● @saltnburnem 49 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 85

Chris DeMars ● @saltnburnem 50 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 86

🌟 Penthouse criticalCSS 🌟 Critical 🌟 Chris DeMars ● @saltnburnem 50 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 87

Skeleton Screens Chris DeMars ● @saltnburnem 51 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 88

“A skeleton screen is essentially a blank version of a page into which information is gradually loaded.” - Luke Wroblewski Chris DeMars ● @saltnburnem 52 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 89

“Users don’t care about performance stats in terminal, they do care about what they see in front of them.” - Callum Hart Chris DeMars ● @saltnburnem 53 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 90

Chris DeMars ● @saltnburnem 54 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 91

Chris DeMars ● @saltnburnem 55 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 92

Chris DeMars ● @saltnburnem 56 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 93

Chris DeMars ● @saltnburnem 57 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 94

“Design for operational transparency by providing progress-UX that’s robust and meaningful.” - Nick Babich Chris DeMars ● @saltnburnem 58 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 95

Great Info! https://www.mobify.com/insights/ designing-appearance-speed/ Chris DeMars ● @saltnburnem 59 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 96

Fun Distractions Chris DeMars ● @saltnburnem 60 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 97

Offer distractions so users don’t get bored! Chris DeMars ● @saltnburnem 61 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 98

Offer distractions so users don’t get bored! Chris DeMars ● @saltnburnem 61 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 99

What did we learn? Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 100

What did we learn? ✅ Performance matters Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 101

What did we learn? ✅ Performance matters ✅ How to test performance on the front end Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 102

What did we learn? ✅ Performance matters ✅ How to test performance on the front end ✅ Different metrics we can measure Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 103

What did we learn? ✅ Performance matters ✅ How to test performance on the front end ✅ Different metrics we can measure ✅ Perceived performance Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 104

Chris DeMars ● @saltnburnem 63 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 105

Chris DeMars ● @saltnburnem 63 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 106

Resources https://goo.gl/dqxsXi Chris DeMars ● @saltnburnem 64 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 107

Jeremy Wagner @malchata Chris DeMars ● @saltnburnem 65 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 108

Jeremy Wagner @malchata Chris DeMars ● @saltnburnem 65 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 109

Responsible JavaScript: Part 1 https://bit.ly/2uwST7U Part 2 https://bit.ly/2K5zZO2 Chris DeMars ● @saltnburnem 66 💚 #DeveloperCommunity 🏔#AngularDenver

Slide 110

Thanks! Chris DeMars ● @saltnburnem Chris DeMars ● @saltnburnem 💚 #DeveloperCommunity 🏔#AngularDenver