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

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.

2ac0603f272f18d3eef87e65f5ecdc90?s=128

Radimir Bitsov

October 17, 2017
Tweet

Transcript

  1. Measure and speed up perceived performance Radimir Bitsov @radibit How

    quick users think your website is?
  2. @radibit

  3. @radibit Radimir Bitsov Front-end engineer who ❤ web performance, accessibility,

    and interface animation.
  4. @radibit @radibit GitHub · Twi er · CodePen

  5. @radibit ⏳

  6. @radibit Objective time

  7. @radibit Humans Since 1982

  8. @radibit ⚗

  9. @radibit Synthetic monitoring Web performance under strict conditions Gives answer

    to the following questions:
  10. @radibit • Is our website up at the moment? Synthetic

    monitoring Web performance under strict conditions Gives answer to the following questions:
  11. @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:
  12. @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:
  13. @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:
  14. @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:
  15. @radibit Synthetic results as a baseline • Location Ireland •

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

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

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

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

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

    Connectivity Cable • Page Load Time ~ 1.8 s • First Byte ~ 0.6 s • Speed Index 744
  21. @radibit We are focused too much on improving the objective

    time
  22. @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
  23. @radibit It’s a good starting point

  24. @radibit It’s a good starting point However, we can do

    better
  25. @radibit It’s a good starting point However, we can do

    better
  26. @radibit ⏳

  27. @radibit Subjective time

  28. @radibit “Alice: How long is forever? 
 White Rabbit: Sometimes,

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

    
 1000km / 3h The kappa effect, Wikipedia
  30. @radibit Active vs. Passive Time

  31. @radibit

  32. @radibit

  33. @radibit

  34. @radibit

  35. @radibit From passive to active state Streeetpong, Urban Invention

  36. @radibit Also, how does it feel? 0 - 100 km/h

    in 2.4s
  37. @radibit Also, how does it feel? 0 - 100 km/h

    in 2.4s
  38. @radibit Also, how does it feel? 0 - 100 km/h

    in 2.4s
  39. @radibit How people sense time?

  40. @radibit The internal clock model Start End Other stimulus Pacemaker

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

    Time Point 1 Point 2 Point 2
  42. @radibit Our brains manipulate the perceived duration all the time

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

    Time Point 1 Point 2 Point 2 Point 2 Point 2
  44. @radibit Rotating snakes, Akiyoshi Kitaoka

  45. @radibit The stopped clock illusion Chronostasis, Wikipedia

  46. @radibit What we know about response times?

  47. @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
  48. @radibit 0.1s < < 1s < 3s < 8s+ Users’

    expectation to get a feedback from a given action
  49. @radibit How can we apply this knowledge?

  50. @radibit How can we apply this knowledge? • Keep users

    in active mental state
  51. @radibit How can we apply this knowledge? • Keep users

    in active mental state • Speed up the perception of the passive phases
  52. @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
  53. @radibit Just noticeable difference Weber–Fechner law, Wikipedia

  54. @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
  55. @radibit Aim for 30%, go beyond the threshold ⚡

  56. @radibit Speed up perception

  57. @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
  58. @radibit Optimise what directly affects people’s load perception

  59. @radibit Optimistic updates

  60. @radibit Background operations Instagram starts uploading a picture as soon

    as users choose the one they want to share.
  61. @radibit Background operations Register the like action, though the feed

    is still loading. Same happens when the connection is slow or down.
  62. @radibit Skeleton screens

  63. @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
  64. @radibit Progressive image loading

  65. @radibit JavaScript Start-up Performance, Medium

  66. @radibit Progress indicators

  67. @radibit 12% increase on the perception for faster completion Faster

    progress bars: Manipulating perceived duration with visual augmentations
  68. @radibit What about spinners and loaders?

  69. @radibit CSS Loaders, CodePen

  70. @radibit Avoid them as a single indicator They draw a

    ention to the fact that the user is waiting
  71. @radibit Interface animation

  72. @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
  73. @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.
  74. @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
  75. @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
  76. @radibit Attract users’ attention ⚠ Be careful, users do not

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

    over anything else Animation is a powerful technique
  78. @radibit Don’t forget to stay :active

  79. @radibit Active state Give immediate visual feedback. Stay :active, CodePen

  80. @radibit Active state with transition ⛔ Avoid using transition with

    the active state.
  81. @radibit Measuring perceived performance

  82. @radibit Real user monitoring Analyse the performance metrics that most

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

    affect user experience. Gives answer to the following questions: • Did the navigation started successfully?
  84. @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?
  85. @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?
  86. @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?
  87. @radibit Human-centric performance metrics

  88. @radibit Human-centric performance metrics • First Paint and First Contentful

    Paint
  89. @radibit Human-centric performance metrics • First Paint and First Contentful

    Paint • First Meaningful Paint
  90. @radibit Human-centric performance metrics • First Paint and First Contentful

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

    Paint • First Meaningful Paint • Time To Interactive • Custom resource and navigation metrics
  92. @radibit Paint Timing API Allows you to capture metrics on

    when a page begins painting.
  93. @radibit First paint / First contentful paint Some of the

    key moments that affects people’s perception of time
  94. @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
  95. @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
  96. @radibit Long Tasks API It refers to an event loop

    tasks that exceeds 50ms.
  97. @radibit Short vs. Long Tasks

  98. @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/
  99. @radibit Resource Timing API Collect complete timing information on the

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

    metric data related to the navigation of a document. w3c.github.io/navigation-timing
  101. @radibit Processing model Timing a ributes defined by the PerformanceNavigationTiming

    and PerformanceResourceTiming interfaces
  102. @radibit Tools ⚒

  103. @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/
  104. @radibit WebPagetest (not well known) features

  105. @radibit • Simulating a single point of failure WebPagetest (not

    well known) features
  106. @radibit • Simulating a single point of failure • Create

    your own custom metrics WebPagetest (not well known) features
  107. @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
  108. @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
  109. @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
  110. @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
  111. @radibit @radibit Browser developer tools

  112. @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
  113. @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/
  114. @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
  115. @radibit ♠ Calibre Great automated performance monitoring tool with focus

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

    articles, videos on perf-tooling.today www.perf-tooling.today
  117. @radibit Be smart about perceived performance

  118. @radibit Try to make your site feel fast That’s what

    really ma ers in terms of delightful user experience
  119. @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
  120. @radibit Care more about your users

  121. @radibit Thank you @radibit Slides: h p://bit.ly/human-centric-perf