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.

2ac0603f272f18d3eef87e65f5ecdc90?s=128

Radimir Bitsov

October 12, 2018
Tweet

Transcript

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

    Interactive
  2. @radibit

  3. @radibit Radimir Bitsov @radibit Frontend engineer who ❤ web performance,

    accessibility, and interactive design.
  4. @radibit 1. How quick people think your web app is?

  5. @radibit Time

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

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

    2011
  8. @radibit Perception of time Web performance is about perception of

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

    time Time is perceived subjectively by all of us
  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
  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
  12. @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
  13. @radibit Why perceived performance matters?

  14. @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+
  15. @radibit What happens when people encounter slow or interrupted processes?

    IBM, Mobile Customer Experience 23 percent cursed at their phones
  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
  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
  18. @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
  19. 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
  20. @radibit 2. The problem with web performance metrics

  21. @radibit Objective performance

  22. @radibit Page Load Time Speed Index

  23. @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.
  24. @radibit Page Load Time, Speed Index

  25. @radibit Page Load Time, Speed Index

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

  27. @radibit Page Load Time, Speed Index

  28. @radibit Paint based metrics

  29. @radibit Paint based metrics Navigation begins

  30. @radibit Paint based metrics Navigation begins First Paint

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

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

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

    Paint First Meaningful Paint Visually complete
  34. @radibit Paint based metrics Good metrics that give us information

    on key moments of our content rendering.
  35. @radibit Paint based metrics Do they tell us enough?

  36. @radibit Paint based metrics

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

  38. @radibit Prioritize the user experience.

  39. @radibit 3. Time to Interactive

  40. @radibit Human centric performance

  41. @radibit Time to Interactive explainer Highlights the moment when a

    website or app is capable of responding quickly to user input
  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
  43. @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
  44. @radibit How is Time to Interactive calculated

  45. @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.
  46. @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.
  47. @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)
  48. @radibit 4. JavaScript main thread

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

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

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

    Style Calculations Layout Render
  52. @radibit Locking the main thread

  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
  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
  55. @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
  56. @radibit Blocking the main thread Users won’t be able to

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

    receive any immediate feedback from their actions Frustrating situations, unexpected updates
  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
  59. @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
  60. @radibit State of JavaScript

  61. @radibit The median mobile webpage 370KB HTTP Archive State of

    JavaScript report (Sep 2018) 9s JavaScript Until Interactive
  62. @radibit Can you afford this much JavaScript?

  63. 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 “
  64. @radibit 5. Why does Time to Interactive matter?

  65. @radibit Interactivity should be essential

  66. @radibit Engaging and meaningful user experience

  67. 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
  68. @radibit 6. Measuring Time to Interactive

  69. @radibit Often we take fast networks, powerful CPUs, and high-end

    phones for granted
  70. @radibit Step outside the bubble – test using ‘real world’

    conditions.
  71. @radibit mobile connections are either 3G or 2G h ps://www.gsma.com/mobileeconomy/

    75%
  72. @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/
  73. 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 “
  74. @radibit Real User Monitoring

  75. @radibit Performance Observer, requestIdleCallback()

  76. @radibit Performance Observer, requestIdleCallback()

  77. @radibit Performance Observer, requestIdleCallback()

  78. @radibit Performance Observer, requestIdleCallback()

  79. @radibit Performance Observer, requestIdleCallback()

  80. @radibit Tooling for performance budgets

  81. 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
  82. 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/
  83. 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/
  84. ♠ 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/
  85. Perf Tooling Find more web performance related tools, books, articles,

    videos 8 9 h p://www.perf-tooling.today
  86. @radibit Make people feel good and help them achieve their

    goals faster.
  87. @radibit Headline Text Subtitle Thank you @radibit Slides: h p://bit.ly/

    i-perf #perfma ers ❤