Time to Interactive – focusing on the human-centric metrics

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

@radibit

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

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

@radibit Time

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

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

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

time Time is perceived subjectively by all of us

time Time is perceived subjectively by all of us It varies according many factors – age, location, emotions

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

@radibit Why perceived performance matters?

@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+

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

IBM, Mobile Customer Experience 23 percent cursed at their phones ❌ 21 percent deleted the poorly functioning app

IBM, Mobile Customer Experience 23 percent cursed at their phones ❌ 21 percent deleted the poorly functioning app 11 percent screamed at their mobile device

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

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

@radibit 2. The problem with web performance metrics

@radibit Objective performance

@radibit Page Load Time Speed Index

@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.

@radibit Page Load Time, Speed Index

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

@radibit Page Load Time, Speed Index

@radibit Paint based metrics

@radibit Paint based metrics Navigation begins

@radibit Paint based metrics Navigation begins First Paint

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

Paint First Meaningful Paint

Paint First Meaningful Paint Visually complete

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

@radibit Paint based metrics Do they tell us enough?

@radibit Paint based metrics

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

@radibit Prioritize the user experience.

@radibit 3. Time to Interactive

@radibit Human centric performance

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

@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 eﬃcient a website or app is when interacted with

@radibit How is Time to Interactive calculated

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

@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.

@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)

@radibit 4. JavaScript main thread

@radibit Main thread pipeline JS Fetched JS Parsed JS Compiled

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

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

@radibit Locking the main thread

@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

@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

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

receive any immediate feedback from their actions Frustrating situations, unexpected updates

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

@radibit State of JavaScript

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

@radibit Can you afford this much JavaScript?

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 “

@radibit 5. Why does Time to Interactive matter?

@radibit Interactivity should be essential

@radibit Engaging and meaningful user experience

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

@radibit 6. Measuring Time to Interactive

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

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

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

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

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 “

@radibit Real User Monitoring

@radibit Performance Observer, requestIdleCallback()

@radibit Tooling for performance budgets

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

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/

Bundlesize, Webpack Performance Keep your bundle size in check with
Bundlesize and deﬁne your performance budget using Webpack. h ps://github.com/siddharthkp/bundlesize h ps://webpack.js.org/conﬁguration/performance/

♠ 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/

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

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

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

Time to Interactive – focusing on the human-cen...

Time to Interactive – focusing on the human-centric metrics

More Decks by Radimir Bitsov

Other Decks in Technology

Featured

Transcript