Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hacking the Human Perception

Hacking the Human Perception

Hacking you say? Yes, I do, but this type of hacking has nothing to do with hooking in Matrix style or surfing through The Gibson at Ellingson Mineral Company. Nope, this type of hacking involves how we as developers, create the illusion of fast load times for our Web applications. Performance is gaining much visibility in the industry and catering to the needs of the user, there are many things we can do to facilitate that need. This talk will focus on ways we can make things appear to be faster than they are and ways to avoid having to play Houdini entirely.

Chris DeMars

March 30, 2019
Tweet

More Decks by Chris DeMars

Other Decks in Technology

Transcript

  1. 1 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Hacking the Human

    Perception Chris DeMars • @saltnburnem https://pixabay.com/en/brain-icon-human-background-idea-1710293/
  2. 3 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Google Developer Expert

    Microsoft MVP International Speaker Founder of Vuetroit Co-organizer of the Ann Arbor A11y Group Host of Tales From the Script Tattoos & Horror That’s me!
  3. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint
  4. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive
  5. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded
  6. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance
  7. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS
  8. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens
  9. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens c.) Spinners & Percent loaders
  10. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens c.) Spinners & Percent loaders d.) Background Color/Image Replacement
  11. 6 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1.) Auditing &

    Testing Let’s Talk! 2.) Time to First Byte 3.) Time to First Paint 4.) Time to First Interactive 5.) Load & DOMContentLoaded 6.) Perceived Performance a.) Critical CSS b.) Skeleton Screens c.) Spinners & Percent loaders d.) Background Color/Image Replacement e.) Fun Distractions
  12. 11 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Visibility of System

    Status https://www.nngroup.com/articles/ten-usability-heuristics/
  13. 11 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 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/
  14. User Centric Metrics 20 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC

    1.) Is it happening? 2.) Is it useful? 3.) Is it useable?
  15. User Centric Metrics 20 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC

    1.) Is it happening? 2.) Is it useful? 3.) Is it useable? 4.) Is it delightful?
  16. The point where the browser renders anything to the screen.

    36 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC Time to First Paint
  17. Time to First Contentful Paint The point where the browser

    renders the first bit of content from the DOM. 37 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
  18. Load All resources have loaded. 49 Chris DeMars • @saltnburnem

    #DeveloperCommunity #OrlandoCC (images, CSS, JS, etc.)
  19. The HTML is fully loaded as well as the DOM

    tree, external resources like images and CSS may not be loaded yet. DOMContent Loaded 50 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC
  20. 51 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC • This event

    typically marks when both the DOM and CSSOM are ready. • The render tree can be built. • If no blocking JS than it will fire immediately after DOMInteractive.
  21. 55 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 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
  22. 61 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC "A skeleton screen

    is essentially a blank version of a page into which information is gradually loaded." - Luke Wroblewski
  23. 62 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC "Users don't care

    about performance stats in terminal, they do care about what they see in front of them.” - Callum Hart
  24. 69 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC “Design for operational

    transparency by providing progress-UX that’s robust and meaningful.” - Nick Babich
  25. 76 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC 1. Open image

    in Photoshop 2. Filter >> Blur >> Average 3. Use eyedropper to sample block of color 4. Apply color as background color https://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images/
  26. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we

    learn? Performance matters ✅ How to test performance on the front end ✅
  27. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we

    learn? Performance matters ✅ How to test performance on the front end ✅ Different metrics we can measure ✅
  28. 80 Chris DeMars • @saltnburnem #DeveloperCommunity #OrlandoCC What did we

    learn? Performance matters ✅ How to test performance on the front end ✅ Different metrics we can measure ✅ Perceived performance ✅