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

Once More, With Feeling

Tim Kadlec
May 18, 2016
Technology
9
1.5k

Once More, With Feeling

As an industry, we’re starting to recognize that what really matters for performance is how fast the experience feels. While this seems like a relatively minor revelation, in reality it requires a significant shift in the way we approach speed online: everything from the way we measure to the optimizations we use. Let’s look at how to reframe performance on the web, and what techniques and technologies are out there to help us create experiences that feel fast and frictionless.

Presented at Front Trends in Warsaw, Poland on May 18, 2016.

Tim Kadlec

May 18, 2016
Tweet

More Decks by Tim Kadlec

See All by Tim Kadlec
The State of Node.js Security, at Node.js Interactive 2017
tkadlec
1
250
JavaScript Exposed at Midwest JS
tkadlec
3
260
Focusing On What Matters, at Fluent, 2017
tkadlec
0
110
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
570
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
160
Better By Proxy at Velocity NY 2015
tkadlec
3
560
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.1k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
6.7k
Better by Proxy at Smashing Conf NY
tkadlec
2
820

Other Decks in Technology

See All in Technology
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
Azureの基本的な権限管理の勉強会
yhana
0
1.2k
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
1
240
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
280
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
5
670
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
260
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
930
アクセス制御にまつわる改善 / Improving access control
itkq
0
560
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
380
JSON攻略法.pdf
miyakemito
8
5.1k
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
110
「スニダン」開発組織の構造に込めた意図 ～組織作りはパッションや政治ではない！～
rinchsan
4
580

Featured

See All Featured
How GitHub (no longer) Works
holman
304
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building an army of robots
kneath
300
41k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
RailsConf 2023
tenderlove
4
540
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Into the Great Unknown - MozCon
thekraken
10
1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Gamification - CAS2011
davidbonilla
76
4.6k
Bash Introduction
62gerente
604
210k

Transcript

  1. ONCE MORE, WITH FEELING https://flic.kr/p/cxeNPs Tim Kadlec | @tkadlec |

    #fronttrends
  2. None
  3. None
  4. None
  5. None

  6. PERCEPTION IS REALITY

  7. PERCEPTION FRAMES REALITY

  8. None

  9. A B

  10. None

  11. http://livingwithlag.com/

  12. 100ms 1% REVENUE

  13. 100ms 1000ms Feels instantaneous & maintains a connection between action

    & reaction. Anything longer and the user loses focus on their task.
  14. None

  15. DNS Lookup TCP Connection SSL Negotiation Request

  16. DNS Lookup 100ms TCP Connection 100ms SSL Negotiation 100-200ms Request

    100ms

  17. DNS Lookup 100ms TCP Connection 100ms SSL Negotiation 100-200ms Request

    100ms 400-500ms

  18. “THE FASTEST REQUEST IS NO REQUEST” —EVERY PERFORMANCE ADVOCATE EVER

  19. EVERYTHING SHOULD HAVE VALUE, BECAUSE EVERYTHING HAS A COST

  20. HOW DO WE BALANCE RICHNESS WITH SPEED

  21. “PERFORMANCE IS THE DEVELOPER’S RESPONSIBILITY”

  22. None
  23. None

  24. PERFORMANCE IS ABOUT THE USER

  25. None

  26. PASSIVE ACTIVE VS

  27. PASSIVE

  28. PASSIVE WAITING OVERESTIMATED BY 36%

  29. None
  30. None

  31. DNS Lookup TCP Connection SSL Negotiation Request

  32. header('Link: <path/to/critical.css>; rel=preload; as=stylesheet');

  33. <link rel="preload" href=“/path/to/styles.css”>

  34. function preload(url) { var hint = document.createElement("link"); hint.rel = "preload";

    hint.href = url; document.head.appendChild(hint); }

  35. dns-prefetch preconnect prerender preload

  36. <link rel="dns-prefetch" href="// host_name_to_prefetch.com">

  37. DNS Lookup TCP Connection SSL Negotiation Request

  38. <link rel="preconnect" href="// host_name_to_prefetch.com">

  39. DNS Lookup TCP Connection SSL Negotiation Request

  40. <link rel="dns-prefetch" href=“// host_name_to_prefetch.com"> <link rel="preconnect" href="// host_name_to_prefetch.com">

  41. <link rel="preload" href="/style/other.css" as="style">

  42. DNS Lookup TCP Connection SSL Negotiation Request

  43. <link rel="prerender" href="//example.com/next- page.html">

  44. DNS Lookup TCP Connection SSL Negotiation Request

  45. None

  46. Network

  47. HTML Network CSS Javascript

  48. HTML Network CSS Javascript DOM CSSOM

  49. HTML Network CSS Javascript DOM CSSOM

  50. document.write(“No sleep til’ Brooklyn.”); document.getElementById(‘#main').style.height = "100px";

  51. HTML Network CSS Javascript DOM CSSOM Render Tree

  52. HTML Network CSS Javascript DOM CSSOM Render Tree Layout

  53. HTML Network CSS Javascript DOM CSSOM Render Tree Layout Paint

  54. CRITICAL PATH

  55. ANYTHING IN THE WAY OF INITIAL RENDER IS CRITICAL

  56. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” src=“jquereactugular.js“> </script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html> 1

  57. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” src=“jquereactugular.js“> </script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html> 2

  58. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” src=“jquereactugular.js“> </script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html> 3

  59. <script type=“text/javascript” src=“jquereactugular.js“> </script>

  60. <script>

  61. <script>

  62. <script>

  63. <script type="text/javascript" async src="blah.js.php"></script>

  64. <script async>

  65. <script async>

  66. <script async>

  67. <script type="text/javascript" defer src="blah.js.php"></script>

  68. <script defer>

  69. <script defer>

  70. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” async src=“jquereactugular.js“ ></script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html>

  71. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <link rel="stylesheet" href="style.css" />

    <script type=“text/javascript” async src=“jquereactugular.js“ ></script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html>

  72. .main- navigation #mixer .links

  73. <link rel="stylesheet" href="style.css" />

  74. <style type=“text/css”> //critical css inlined and minimized </style> <script type=“text/javascript”

    > loadCSS(‘/path/to/full/css’); //set a cookie </script>

  75. <html> <head> <meta charset="UTF-8"> <title>Hey there</title> <style type=“text/css”> //critical css

    inlined and minimized </style> <script type=“text/javascript” async src=“jquereactugular.js“ ></script> </head> <body> <h1>Super awesome site</h1> <div id=“main"> <p>Super interesting stuff, I'm sure.</p> </div> </body> </html>

  76. http://bit.ly/1Jw2jj7

  77. None

  78. PROGRESS BARS ARE THE HOLD MUSIC OF THE INTERNET

  79. None

  80. PROGRESS BARS FOCUS ON THE WAITING

  81. http://www.lukew.com/ff/entry.asp?1797

  82. http://www.lukew.com/ff/entry.asp?1797

  83. http://www.lukew.com/ff/entry.asp?1797

  84. SKELETON SCREENS FOCUS ON THE PROGRESS

  85. FOCUS ON WHAT YOU DON’T HAVE

  86. FOCUS ON WHAT YOU’RE GOING TO GET

  87. DIV DIV DIV

  88. None
  89. None

  90. FEEDBACK SHOWS PROGRESS

  91. FEEDBACK EASES ANXIETY

  92. None
  93. None

  94. https://flic.kr/p/7WcQwA CHOREOGRAPHY

  95. PERFORMANCE IS ABOUT THE USER

  96. PERCEPTION FRAMES REALITY

  97. https://flic.kr/p/7WcQwA USER-CENTRIC PERFORMACE

  98. THANK YOU https://flic.kr/p/cxeNPs Tim Kadlec | @tkadlec | #fronttrends