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
  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 ❤