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

Once More, With Feeling

Tim Kadlec
May 18, 2016
Technology
9
1.7k

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
370
JavaScript Exposed at Midwest JS
tkadlec
3
280
Focusing On What Matters, at Fluent, 2017
tkadlec
0
140
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
670
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
190
Better By Proxy at Velocity NY 2015
tkadlec
3
670
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.2k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
7.1k
Better by Proxy at Smashing Conf NY
tkadlec
2
860

Other Decks in Technology

See All in Technology
AIにおけるソフトウェアテスト_ver1.00
fumisuke
1
210
グループ ポリシー再確認 (2)
murachiakira
0
110
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
340
3D生成AIのための画像生成
kosukeito
1
250
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.5k
地味にいろいろあった！ 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
1
470
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1k
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
120
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
280
【Oracle Cloud ウェビナー】ご希望のクラウドでOracle Databaseを実行〜マルチクラウド・ソリューション徹底解説〜
oracle4engineer
PRO
1
110
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう！
o11yfes2023
0
190
コードや知識を組み込む / Incorporating Codes and Knowledge
ks91
PRO
0
120

Featured

See All Featured
Navigating Team Friction
lara
184
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building an army of robots
kneath
304
45k
Automating Front-end Workflow
addyosmani
1369
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Practical Orchestrator
shlominoach
186
11k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Typedesign – Prime Four
hannesfritz
41
2.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Raft: Consensus for Rubyists
vanstee
137
6.9k

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