A presentation at Angular Denver in in Denver, CO, USA by Christopher A DeMars
Hacking the Human Perception Chris DeMars ● @saltnburnem https://pixabay.com/en/brain-icon-human-background-idea-1710293/ Chris DeMars ● @saltnburnem 1 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars Front-End Developer Chris DeMars ● @saltnburnem 2 💚 #DeveloperCommunity 🏔#AngularDenver
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
Why Are We Here Chris? Chris DeMars ● @saltnburnem 4 💚 #DeveloperCommunity 🏔#AngularDenver
Let’s Talk! Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver
Let’s Talk! 1.) Auditing & Testing Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver
Let’s Talk! 1.) Auditing & Testing 2.) Time to First Paint Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver
Let’s Talk! 1.) Auditing & Testing 2.) Time to First Paint 3.) Time to First Byte Chris DeMars ● @saltnburnem 5 💚 #DeveloperCommunity 🏔#AngularDenver
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
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
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
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
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
Performance? Chris DeMars ● @saltnburnem 6 💚 #DeveloperCommunity 🏔#AngularDenver
Visibility of System Status https://www.nngroup.com/articles/ten-usability-heuristics/ Chris DeMars ● @saltnburnem 7 💚 #DeveloperCommunity 🏔#AngularDenver
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
Fast? Chris DeMars ● @saltnburnem 8 💚 #DeveloperCommunity 🏔#AngularDenver
Fast? Chris DeMars ● @saltnburnem ! Quick Desktop Load 8 💚 #DeveloperCommunity 🏔#AngularDenver
Fast? Chris DeMars ● @saltnburnem ! Quick Desktop Load ! Quick Mobile Load 8 💚 #DeveloperCommunity 🏔#AngularDenver
Fast? Chris DeMars ● @saltnburnem ! Quick Desktop Load ! Quick Mobile Load ! Time 8 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 9 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 9 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 10 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 10 💚 #DeveloperCommunity 🏔#AngularDenver
Minimal Requests? Chris DeMars ● @saltnburnem 11 💚 #DeveloperCommunity 🏔#AngularDenver
Minimal Requests? Chris DeMars ● @saltnburnem ! How many? 11 💚 #DeveloperCommunity 🏔#AngularDenver
Minimal Requests? Chris DeMars ● @saltnburnem ! How many? ! What does that mean? 11 💚 #DeveloperCommunity 🏔#AngularDenver
Load Time? Chris DeMars ● @saltnburnem 12 💚 #DeveloperCommunity 🏔#AngularDenver
Load Time? Chris DeMars ● @saltnburnem ! Desktop 12 💚 #DeveloperCommunity 🏔#AngularDenver
Load Time? Chris DeMars ● @saltnburnem ! Desktop ! 3G 12 💚 #DeveloperCommunity 🏔#AngularDenver
Load Time? Chris DeMars ● @saltnburnem ! Desktop ! 3G ! 4G 12 💚 #DeveloperCommunity 🏔#AngularDenver
Load Time? Chris DeMars ● @saltnburnem ! Desktop ! 3G ! 4G ! 2G 12 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 13 https://bit.ly/2Uc47xa 💚 #DeveloperCommunity 🏔#AngularDenver
Performance Chris DeMars ● @saltnburnem 14 💚 #DeveloperCommunity 🏔#AngularDenver
Performance on the front end # # Chris DeMars ● @saltnburnem 14 💚 #DeveloperCommunity 🏔#AngularDenver
Addy Osmani @addyosmani #PerfMatters Chris DeMars ● @saltnburnem 15 💚 #DeveloperCommunity 🏔#AngularDenver
User Centric Metrics Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver
User Centric Metrics 1.) Is it happening? Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver
User Centric Metrics 1.) Is it happening? 2.) Is it useful? Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver
User Centric Metrics 1.) Is it happening? 2.) Is it useful? 3.) Is it useable? Chris DeMars ● @saltnburnem 16 💚 #DeveloperCommunity 🏔#AngularDenver
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
Testing & Audits Chris DeMars ● @saltnburnem 17 💚 #DeveloperCommunity 🏔#AngularDenver
Lighthouse Chris DeMars ● @saltnburnem 18 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 19 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 19 💚 #DeveloperCommunity 🏔#AngularDenver
WebPageTest Chris DeMars ● @saltnburnem 20 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 21 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 21 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 22 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 23 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 24 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 25 💚 #DeveloperCommunity 🏔#AngularDenver
Chrome DevTools Chris DeMars ● @saltnburnem 26 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 27 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 27 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 28 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 28 💚 #DeveloperCommunity 🏔#AngularDenver
Time to First Paint Chris DeMars ● @saltnburnem 29 💚 #DeveloperCommunity 🏔#AngularDenver
Time to First Paint & Time to First Contentful Paint Chris DeMars ● @saltnburnem 30 💚 #DeveloperCommunity 🏔#AngularDenver
Time to First Paint Chris DeMars ● @saltnburnem 31 💚 #DeveloperCommunity 🏔#AngularDenver
Time to First Paint The point where the browser renders anything to the screen. Chris DeMars ● @saltnburnem 31 💚 #DeveloperCommunity 🏔#AngularDenver
Time to First Contentful Paint Chris DeMars ● @saltnburnem 32 💚 #DeveloperCommunity 🏔#AngularDenver
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
First Paint 1.4s First Contentful Paint 1.4s Chris DeMars ● @saltnburnem 33 💚 #DeveloperCommunity 🏔#AngularDenver
First Paint 1.4s First Contentful Paint 1.4s Chris DeMars ● @saltnburnem 33 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 34 💚 #DeveloperCommunity 🏔#AngularDenver
Time to First Meaningful Paint Chris DeMars ● @saltnburnem 35 💚 #DeveloperCommunity 🏔#AngularDenver
https://bit.ly/2HVcwvP Chris DeMars ● @saltnburnem 36 💚 #DeveloperCommunity 🏔#AngularDenver
Time to First Byte Chris DeMars ● @saltnburnem 37 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 38 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 38 💚 #DeveloperCommunity 🏔#AngularDenver
https://www.keycdn.com/support/what-is-ttfb/ Chris DeMars ● @saltnburnem 39 💚 #DeveloperCommunity 🏔#AngularDenver
TTFB 230ms Chris DeMars ● @saltnburnem 40 💚 #DeveloperCommunity 🏔#AngularDenver
Time to Interactive Chris DeMars ● @saltnburnem 41 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 42 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 42 💚 #DeveloperCommunity 🏔#AngularDenver
Why measure DOMContentLoaded? Chris DeMars ● @saltnburnem 43 💚 #DeveloperCommunity 🏔#AngularDenver
Critical Rendering Path Chris DeMars ● @saltnburnem 43 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 44 https://bit.ly/2JazYc6 💚 #DeveloperCommunity 🏔#AngularDenver
Perceived Performance Chris DeMars ● @saltnburnem 45 💚 #DeveloperCommunity 🏔#AngularDenver
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
Critical CSS Chris DeMars ● @saltnburnem 47 💚 #DeveloperCommunity 🏔#AngularDenver
https://www.smashingmagazine.com/2015/08/understanding-critical-css/ Chris DeMars ● @saltnburnem 48 💚 #DeveloperCommunity 🏔#AngularDenver
https://www.smashingmagazine.com/2015/08/understanding-critical-css/ Chris DeMars ● @saltnburnem 49 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 50 💚 #DeveloperCommunity 🏔#AngularDenver
🌟 Penthouse criticalCSS 🌟 Critical 🌟 Chris DeMars ● @saltnburnem 50 💚 #DeveloperCommunity 🏔#AngularDenver
Skeleton Screens Chris DeMars ● @saltnburnem 51 💚 #DeveloperCommunity 🏔#AngularDenver
“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
“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
Chris DeMars ● @saltnburnem 54 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 55 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 56 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 57 💚 #DeveloperCommunity 🏔#AngularDenver
“Design for operational transparency by providing progress-UX that’s robust and meaningful.” - Nick Babich Chris DeMars ● @saltnburnem 58 💚 #DeveloperCommunity 🏔#AngularDenver
Great Info! https://www.mobify.com/insights/ designing-appearance-speed/ Chris DeMars ● @saltnburnem 59 💚 #DeveloperCommunity 🏔#AngularDenver
Fun Distractions Chris DeMars ● @saltnburnem 60 💚 #DeveloperCommunity 🏔#AngularDenver
Offer distractions so users don’t get bored! Chris DeMars ● @saltnburnem 61 💚 #DeveloperCommunity 🏔#AngularDenver
Offer distractions so users don’t get bored! Chris DeMars ● @saltnburnem 61 💚 #DeveloperCommunity 🏔#AngularDenver
What did we learn? Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver
What did we learn? ✅ Performance matters Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver
What did we learn? ✅ Performance matters ✅ How to test performance on the front end Chris DeMars ● @saltnburnem 62 💚 #DeveloperCommunity 🏔#AngularDenver
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
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
Chris DeMars ● @saltnburnem 63 💚 #DeveloperCommunity 🏔#AngularDenver
Chris DeMars ● @saltnburnem 63 💚 #DeveloperCommunity 🏔#AngularDenver
Resources https://goo.gl/dqxsXi Chris DeMars ● @saltnburnem 64 💚 #DeveloperCommunity 🏔#AngularDenver
Jeremy Wagner @malchata Chris DeMars ● @saltnburnem 65 💚 #DeveloperCommunity 🏔#AngularDenver
Jeremy Wagner @malchata Chris DeMars ● @saltnburnem 65 💚 #DeveloperCommunity 🏔#AngularDenver
Responsible JavaScript: Part 1 https://bit.ly/2uwST7U Part 2 https://bit.ly/2K5zZO2 Chris DeMars ● @saltnburnem 66 💚 #DeveloperCommunity 🏔#AngularDenver
Thanks! Chris DeMars ● @saltnburnem Chris DeMars ● @saltnburnem 💚 #DeveloperCommunity 🏔#AngularDenver
for free. You
can too.