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

Once More, With Feeling at Code 2016 in Sydney

Tim Kadlec
July 28, 2016
Technology
1
670

Once More, With Feeling at Code 2016 in Sydney

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 Code 2016 in Syndey, Australia on July 28, 2016.

Tim Kadlec

July 28, 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
130
Once More, With Feeling
tkadlec
9
1.7k
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
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
2
330
AWSの新機能検証をやる時こそ、Amazon Qでプロンプトエンジニアリングを駆使しよう
duelist2020jp
1
260
AWS全冠芸人が見た世界 ～資格取得より大切なこと～
masakiokuda
5
6.3k
Running JavaScript within Ruby
hmsk
3
340
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
220
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
860
Devoxx France 2025 - Comment transformons-nous les Restos du Coeur en Cloud Provider ?
ju_hnny5
0
100
Road to Go Gem #rubykaigi
sue445
0
870
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
760
4/17/25 - CIJUG - Java Meets AI: Build LLM-Powered Apps with LangChain4j (part 2)
edeandrea
PRO
0
120
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
6
6.6k
PostgreSQL Log File Mastery: Optimizing Database Performance Through Advanced Log Analysis
shiviyer007
PRO
0
100

Featured

See All Featured
Code Review Best Practice
trishagee
67
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Code Reviewing Like a Champion
maltzj
522
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
GitHub's CSS Performance
jonrohan
1030
460k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Agile that works and the tools we love
rasmusluckow
328
21k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
A better future with KSS
kneath
239
17k
Site-Speed That Sticks
csswizardry
5
500

Transcript

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

    #code16
  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. <link rel="dns-prefetch" href="// host_name_to_prefetch.com">

  36. DNS Lookup TCP Connection SSL Negotiation Request

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

  38. DNS Lookup TCP Connection SSL Negotiation Request

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

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

  41. DNS Lookup TCP Connection SSL Negotiation Request

  42. <link rel="prefetch" href="/style/other.css" as="style">

  43. DNS Lookup TCP Connection SSL Negotiation Request

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

  45. DNS Lookup TCP Connection SSL Negotiation Request

  46. None

  47. Network

  48. HTML Network CSS Javascript

  49. HTML Network CSS Javascript DOM CSSOM

  50. HTML Network CSS Javascript DOM CSSOM

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

  52. HTML Network CSS Javascript DOM CSSOM Render Tree

  53. HTML Network CSS Javascript DOM CSSOM Render Tree Layout

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

  55. CRITICAL PATH

  56. ANYTHING IN THE WAY OF INITIAL RENDER IS CRITICAL

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

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

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

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

  61. <script>

  62. <script>

  63. <script>

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

  65. <script async>

  66. <script async>

  67. <script async>

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

  69. <script defer>

  70. <script defer>

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

  73. .event-name .tagline .event-year

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

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

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

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

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

  78. None

  79. PROGRESS BARS ARE THE HOLD MUSIC OF THE INTERNET

  80. None

  81. PROGRESS BARS FOCUS ON THE WAITING

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

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

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

  85. SKELETON SCREENS FOCUS ON THE PROGRESS

  86. FOCUS ON WHAT YOU DON’T HAVE

  87. FOCUS ON WHAT YOU’RE GOING TO GET

  88. DIV DIV DIV

  89. None
  90. None

  91. FEEDBACK SHOWS PROGRESS

  92. FEEDBACK EASES ANXIETY

  93. None
  94. None

  95. OPERATIONAL TRANSPARENCY

  96. None

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

  98. PERFORMANCE IS ABOUT THE USER

  99. PERCEPTION FRAMES REALITY

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

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