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

Time to Interactive – focusing on the human-centric metrics

Time to Interactive – focusing on the human-centric metrics

Web performance is the way how people perceive the speed at which actions on the web pages return a meaningful response. A key aspect of the web performance is the way how we can measure it. And, we as a community created a lot of metrics with a goal to give a precise answer to this questions. With this talk, I’d like to explain in details a set of relatively new performance metrics focused on the interactivity of our web pages. I’ll also share the reasons why a page might not be interactive and how this affects people’s experience on the web.

Radimir Bitsov

October 12, 2018
Tweet

More Decks by Radimir Bitsov

Other Decks in Technology

Transcript

  1. Radimir Bitsov @radibit
    Focusing on the human-centric metrics
    Time to Interactive

    View full-size slide

  2. @radibit
    Radimir Bitsov
    @radibit
    Frontend engineer who ❤ web
    performance, accessibility, and
    interactive design.

    View full-size slide

  3. @radibit
    1.
    How quick people think
    your web app is?

    View full-size slide

  4. @radibit
    Time

    View full-size slide

  5. @radibit
    We don't perceive time the
    way clocks portray it

    View full-size slide

  6. @radibit
    Awareness of time can be a funny thing
    1987 2011

    View full-size slide

  7. @radibit
    Perception
    of time
    Web performance is about
    perception of time

    View full-size slide

  8. @radibit
    Perception
    of time
    Web performance is about
    perception of time
    Time is perceived subjectively by
    all of us

    View full-size slide

  9. @radibit
    Perception
    of time
    Web performance is about
    perception of time
    Time is perceived subjectively by
    all of us
    It varies according many factors –
    age, location, emotions

    View full-size slide

  10. @radibit
    Perception
    of time
    Web performance is about
    perception of time
    Time is perceived subjectively by
    all of us
    It varies according many factors –
    age, location, emotions
    More o en we optimize for the
    objective time

    View full-size slide

  11. @radibit
    Perception
    of time
    Web performance is about
    perception of time
    Time is perceived subjectively by
    all of us
    It varies according many factors –
    age, location, emotions
    More o en we optimize for the
    objective time

    View full-size slide

  12. @radibit
    Why perceived performance
    matters?

    View full-size slide

  13. @radibit
    People tend to lose focus after 1 second
    h ps://www.nngroup.com/articles/response-times-3-important-limits/
    0.1s 1s
    1s 3s
    3s 8s+

    View full-size slide

  14. @radibit
    What happens when people encounter slow or
    interrupted processes?
    IBM, Mobile Customer Experience
    23 percent cursed at their phones

    View full-size slide

  15. @radibit
    What happens when people encounter slow or
    interrupted processes?
    IBM, Mobile Customer Experience
    23 percent cursed at their phones
    ❌ 21 percent deleted the poorly functioning app

    View full-size slide

  16. @radibit
    What happens when people encounter slow or
    interrupted processes?
    IBM, Mobile Customer Experience
    23 percent cursed at their phones
    ❌ 21 percent deleted the poorly functioning app
    11 percent screamed at their mobile device

    View full-size slide

  17. @radibit
    What happens when people encounter slow or
    interrupted processes?
    IBM, Mobile Customer Experience
    23 percent cursed at their phones
    ❌ 21 percent deleted the poorly functioning app
    11 percent screamed at their mobile device
    4 percent threw their mobile device

    View full-size slide

  18. 1s delay, 16% lower
    satisfaction
    The Aberdeen Group discovered a 1-
    second delay resulted in 11% fewer page
    views, a 16% decrease in customer
    satisfaction, and 7% loss in conversions.
    h ps://wpostats.com/2015/10/29/aberdeen-1-percent.html

    View full-size slide

  19. @radibit
    2.
    The problem with web
    performance metrics

    View full-size slide

  20. @radibit
    Objective performance

    View full-size slide

  21. @radibit
    Page Load Time
    Speed Index

    View full-size slide

  22. @radibit
    Page Load Time, Speed Index
    Aside from giving insights on the moment when
    the page had fully loaded they do not describe
    the user experience.

    View full-size slide

  23. @radibit
    Page Load Time, Speed Index

    View full-size slide

  24. @radibit
    Page Load Time, Speed Index

    View full-size slide

  25. @radibit
    Page Load Time, Speed Index
    Should we stop here?

    View full-size slide

  26. @radibit
    Page Load Time, Speed Index

    View full-size slide

  27. @radibit
    Paint based metrics

    View full-size slide

  28. @radibit
    Paint based metrics
    Navigation begins

    View full-size slide

  29. @radibit
    Paint based metrics
    Navigation begins
    First Paint

    View full-size slide

  30. @radibit
    Paint based metrics
    Navigation begins
    First Paint
    First Contentful Paint

    View full-size slide

  31. @radibit
    Paint based metrics
    Navigation begins
    First Paint
    First Contentful Paint
    First Meaningful Paint

    View full-size slide

  32. @radibit
    Paint based metrics
    Navigation begins
    First Paint
    First Contentful Paint
    First Meaningful Paint
    Visually complete

    View full-size slide

  33. @radibit
    Paint based metrics
    Good metrics that give us information on key
    moments of our content rendering.

    View full-size slide

  34. @radibit
    Paint based metrics
    Do they tell us enough?

    View full-size slide

  35. @radibit
    Paint based metrics

    View full-size slide

  36. @radibit
    Optimize what directly
    affects people’s perception
    of loading time.

    View full-size slide

  37. @radibit
    Prioritize the user
    experience.

    View full-size slide

  38. @radibit
    3.
    Time to Interactive

    View full-size slide

  39. @radibit
    Human centric
    performance

    View full-size slide

  40. @radibit
    Time to
    Interactive
    explainer
    Highlights the moment when a
    website or app is capable of
    responding quickly to user input

    View full-size slide

  41. @radibit
    Time to
    Interactive
    explainer
    Highlights the moment when a
    website or app is capable of
    responding quickly to user input
    The goal is to measure how
    efficient a website or app is when
    interacted with

    View full-size slide

  42. @radibit
    Time to
    Interactive
    explainer
    Highlights the moment when a
    website or app is capable of
    responding quickly to user input
    The goal is to measure how
    efficient a website or app is when
    interacted with

    View full-size slide

  43. @radibit
    How is Time to Interactive
    calculated

    View full-size slide

  44. @radibit
    First Idle (First Interactive)
    The first early sign of time where the main
    thread has come at rest and the browser
    has completed a First Meaningful Paint.

    View full-size slide

  45. @radibit
    Time to Interactive (Consistently Interactive)
    A er the First Meaningful Paint, when the
    main thread has been at rest for at least 5
    seconds and there are no long tasks that will
    prevent immediate response to user input.

    View full-size slide

  46. @radibit
    Navigation begins
    First Paint First Meaningful Paint
    First Idle
    5 seconds without long tasks
    First Idle and Time to Interactive
    Loading time
    First Interactive and Consistently Interactive
    Short task
    Long task (longer than 50ms)

    View full-size slide

  47. @radibit
    4.
    JavaScript main thread

    View full-size slide

  48. @radibit
    Main thread pipeline
    JS
    Fetched
    JS
    Parsed
    JS
    Compiled

    View full-size slide

  49. @radibit
    Main thread pipeline
    JS
    Fetched
    JS
    Compiled
    JS
    Parsed
    Style
    Calculations
    Layout

    View full-size slide

  50. @radibit
    Main thread pipeline
    JS
    Fetched
    JS
    Compiled
    JS
    Parsed
    Style
    Calculations
    Layout Render

    View full-size slide

  51. @radibit
    Locking the main
    thread

    View full-size slide

  52. @radibit
    Why the main thread can be blocked?
    JS
    Fetched
    JS
    Compiled
    JS
    Parsed
    Style
    Calculations
    Layout Render
    Evaluate Script (main.js)
    Loading time
    0 ms 100 ms 200 ms 300 ms

    View full-size slide

  53. @radibit
    Why the main thread can be blocked?
    JS
    Fetched
    JS
    Compiled
    JS
    Parsed
    Style
    Calculations
    Layout Render
    Evaluate Script (main.js)
    Loading time
    0 ms 100 ms 200 ms 300 ms
    Single long-running operation
    which takes more than 50 ms

    View full-size slide

  54. @radibit
    Why the main thread can be blocked?
    JS
    Fetched
    JS
    Compiled
    JS
    Parsed
    Style
    Calculations
    Layout Render
    Evaluate Script (main.js)
    Loading time
    0 ms 100 ms 200 ms 300 ms

    Single long-running operation
    which takes more than 50 ms

    View full-size slide

  55. @radibit
    Blocking
    the main
    thread
    Users won’t be able to receive any
    immediate feedback from their
    actions

    View full-size slide

  56. @radibit
    Blocking
    the main
    thread
    Users won’t be able to receive any
    immediate feedback from their
    actions
    Frustrating situations,
    unexpected updates

    View full-size slide

  57. @radibit
    Blocking
    the main
    thread
    Users won’t be able to receive any
    immediate feedback from their
    actions
    Frustrating situations,
    unexpected updates
    Far more destructive result on
    mobile devices – ba ery drain,
    poor animations, junky scrolling

    View full-size slide

  58. @radibit
    Blocking
    the main
    thread
    Users won’t be able to receive any
    immediate feedback from their
    actions
    Frustrating situations,
    unexpected updates
    Far more destructive result on
    mobile devices – ba ery drain,
    poor animations, junky scrolling

    View full-size slide

  59. @radibit
    State of JavaScript

    View full-size slide

  60. @radibit
    The median mobile webpage
    370KB
    HTTP Archive State of JavaScript report (Sep 2018)
    9s
    JavaScript Until Interactive

    View full-size slide

  61. @radibit
    Can you afford this much
    JavaScript?

    View full-size slide

  62. Sites with this much script are
    simply inaccessible to a broad swath of the
    world’s users; statistically, users do not (and
    will not) wait for these experiences to load.
     Alex Russell, 

    So ware Engineer,
    Google Chrome Team

    View full-size slide

  63. @radibit
    5.
    Why does Time to Interactive
    matter?

    View full-size slide

  64. @radibit
    Interactivity should be essential

    View full-size slide

  65. @radibit
    Engaging and meaningful
    user experience

    View full-size slide

  66. TTI case study
    The Pinterest’s engineering team
    observed 60% higher user engagement
    a er reducing Time to Interactive from
    23s to 5.6s, and to 3.9s on repeat visits!
    Pinterest performance case study

    View full-size slide

  67. @radibit
    6.
    Measuring Time to
    Interactive

    View full-size slide

  68. @radibit
    Often we take fast networks,
    powerful CPUs, and high-end
    phones for granted

    View full-size slide

  69. @radibit
    Step outside the bubble – test
    using ‘real world’ conditions.

    View full-size slide

  70. @radibit
    mobile connections
    are either 3G or 2G
    h ps://www.gsma.com/mobileeconomy/
    75%

    View full-size slide

  71. @radibit
    Aim for Time to Interactive
    under 5 seconds
    On all devices
    h ps://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

    View full-size slide

  72. Just because you are grabbing all
    the low-hanging fruit doesn’t mean
    you are making a good fruit salad.
    Jen Simmons, 

    Designer Advocate, 

    Mozilla

    View full-size slide

  73. @radibit
    Real User Monitoring

    View full-size slide

  74. @radibit
    Performance Observer, requestIdleCallback()

    View full-size slide

  75. @radibit
    Performance Observer, requestIdleCallback()

    View full-size slide

  76. @radibit
    Performance Observer, requestIdleCallback()

    View full-size slide

  77. @radibit
    Performance Observer, requestIdleCallback()

    View full-size slide

  78. @radibit
    Performance Observer, requestIdleCallback()

    View full-size slide

  79. @radibit
    Tooling for performance
    budgets

    View full-size slide

  80. WebPageTest
    Quick way to run comprehensive
    web performance reports with
    scripting capability that lets you
    automate multi-step test. Private
    instance option for CI or commit-
    queue system.
    h ps://www.webpagetest.org/easy

    View full-size slide

  81. Lighthouse
    Web performance audits as part of
    Chrome Dev Tools. Travis CI
    implementation for pull requests.
    h ps://github.com/ebidel/lighthouse-ci
    h ps://googlechrome.github.io/lighthouse/viewer/

    View full-size slide

  82. Bundlesize,
    Webpack Performance
    Keep your bundle size in check with
    Bundlesize and define your
    performance budget using Webpack.
    h ps://github.com/siddharthkp/bundlesize
    h ps://webpack.js.org/configuration/performance/

    View full-size slide

  83. ♠ Calibre
    You can keep track of and analyze
    First Idle and Time to Interactive
    using Calibre’s automated web
    performance tests.
    h ps://calibreapp.com/

    View full-size slide

  84. Perf Tooling
    Find more web performance related
    tools, books, articles, videos 8 9
    h p://www.perf-tooling.today

    View full-size slide

  85. @radibit
    Make people feel good and
    help them achieve their
    goals faster.

    View full-size slide

  86. @radibit
    Headline Text
    Subtitle
    Thank you
    @radibit
    Slides: h p://bit.ly/ i-perf
    #perfma ers ❤

    View full-size slide