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

How quick users think your site is - measure an...

How quick users think your site is - measure and speed up perceived performance

In this talk, I would like to demonstrate ways to speed up perceived performance and how we can measure it using the latest human-centric metrics. The specific topics covered in this presentation will be how people sense time, techniques to achieve better performance perception in comparison to the actual expectation, synthetic monitoring vs. RUM, First Paint / First Contentful Paint (FP / FCP) using the Paint Timing API and Time To Interactive (TTI) via PerformanceObserver.

Radimir Bitsov

October 17, 2017
Tweet

More Decks by Radimir Bitsov

Other Decks in Programming

Transcript

  1. @radibit • Is our website up at the moment? Synthetic

    monitoring Web performance under strict conditions Gives answer to the following questions:
  2. @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:
  3. @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:
  4. @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:
  5. @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:
  6. @radibit Synthetic results as a baseline • Location Ireland •

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

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

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

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

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

    Connectivity Cable • Page Load Time ~ 1.8 s • First Byte ~ 0.6 s • Speed Index 744
  12. @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
  13. @radibit “Alice: How long is forever? 
 White Rabbit: Sometimes,

    just one second.” Lewis Carroll, Alice in Wonderland Disney Enterprises, Inc
  14. @radibit The kappa effect Perceptual time duration 500km / 3h

    
 1000km / 3h The kappa effect, Wikipedia
  15. @radibit The internal clock model Start End Other stimulus Pacemaker

    Accumulator Decision taking A ention, Perception, & Psychophysics, 2010
  16. @radibit Our brains manipulate the perceived duration all the time

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

    Time Point 1 Point 2 Point 2 Point 2 Point 2
  18. @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
  19. @radibit 0.1s < < 1s < 3s < 8s+ Users’

    expectation to get a feedback from a given action
  20. @radibit How can we apply this knowledge? • Keep users

    in active mental state • Speed up the perception of the passive phases
  21. @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
  22. @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
  23. @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
  24. @radibit Background operations Register the like action, though the feed

    is still loading. Same happens when the connection is slow or down.
  25. @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
  26. @radibit 12% increase on the perception for faster completion Faster

    progress bars: Manipulating perceived duration with visual augmentations
  27. @radibit Avoid them as a single indicator They draw a

    ention to the fact that the user is waiting
  28. @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
  29. @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.
  30. @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
  31. @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
  32. @radibit Attract users’ attention ⚠ Be careful, users do not

    want to wait and watch some lengthy, purposeless animations.
  33. @radibit Performance and functionality however should always be the goal

    over anything else Animation is a powerful technique
  34. @radibit Real user monitoring Analyse the performance metrics that most

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

    affect user experience. Gives answer to the following questions: • Did the navigation started successfully?
  36. @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?
  37. @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?
  38. @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?
  39. @radibit Human-centric performance metrics • First Paint and First Contentful

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

    Paint • First Meaningful Paint • Time To Interactive • Custom resource and navigation metrics
  41. @radibit First paint / First contentful paint Some of the

    key moments that affects people’s perception of time
  42. @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
  43. @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
  44. @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/
  45. @radibit Resource Timing API Collect complete timing information on the

    user experience of loading document resources. www.w3.org/TR/resource-timing-1
  46. @radibit Navigation Timing API Store and retrieve high resolution performance

    metric data related to the navigation of a document. w3c.github.io/navigation-timing
  47. @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/
  48. @radibit • Simulating a single point of failure • Create

    your own custom metrics WebPagetest (not well known) features
  49. @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
  50. @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
  51. @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
  52. @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
  53. @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
  54. @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/
  55. @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
  56. @radibit ♠ Calibre Great automated performance monitoring tool with focus

    on human- centric metrics! Created by Ben Schwarz. h ps://calibreapp.com/
  57. @radibit perf-tooling.today Find even more web performance related tools, books,

    articles, videos on perf-tooling.today www.perf-tooling.today
  58. @radibit Try to make your site feel fast That’s what

    really ma ers in terms of delightful user experience
  59. @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