Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

How to make your boss speed-curious and other w...

Avatar for Peter Hedenskog Peter Hedenskog
September 04, 2014
Technology
210
0

How to make your boss speed-curious and other webperf tricks - coldfront2014

My presentation from ColdFront2014:
http://coldfrontconf.com/

Avatar for Peter Hedenskog

Peter Hedenskog

September 04, 2014

More Decks by Peter Hedenskog

See All by Peter Hedenskog
Keeping Wikipedia fast [WeLoveSpeed]
Avatar for Peter Hedenskog soulislove
1
550
Measuring Web Performance for Wikipedia using synthetic testing tools
Avatar for Peter Hedenskog soulislove
0
510
Measuring Web Performance Using Selenium
Avatar for Peter Hedenskog soulislove
2
990
Monitoring Web Performance using Open Source tools (Stockholm)
Avatar for Peter Hedenskog soulislove
2
270
Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)
Avatar for Peter Hedenskog soulislove
1
390
Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)
Avatar for Peter Hedenskog soulislove
0
270
Optimise your home page (fast as lightning)
Avatar for Peter Hedenskog soulislove
1
77
Integrating performance tools into continuous delivery
Avatar for Peter Hedenskog soulislove
0
320
Sitespeed.io Lightning demo @ Velocity Santa Clara 2014
Avatar for Peter Hedenskog soulislove
0
140

Other Decks in Technology

See All in Technology
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
Avatar for Go Takagi shimastripe
1
350
ADKで始める業務改善 - AIエージェント開発時の考えと設計
Avatar for Kazuki Hara harappa80
2
240
株式会社シーエーシー　エンジニア向け会社紹介資料
Avatar for 株式会社シーエーシー cac
0
57k
AI de Idea
Avatar for Yasunobu Kawaguchi kawaguti
PRO
2
130
なぜ「決定性」が 決定的に重要なのか？ Durable Execution 基盤の数理的理解 #serverlessjp / ServerlessDays Tokyo 2026
Avatar for y_taka_23 ytaka23
3
910
AIによるクリエイティブ生成を行う上での試行錯誤
Avatar for PLAID Tech plaidtech
PRO
0
160
AgentCore Runtime上にAgentic Coding基盤を構築・展開する際の設計ポイントと限界点 / Design considerations and limitations when building an agentic coding platform on AgentCore Runtime
Avatar for Har1101 har1101
5
460
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
1
460
越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon
Avatar for VTRyo vtryo
0
150
あけおめLINE 傾向とその対策
Avatar for nasa9084 nasa9084
0
180
AIで社員の自主発信に広報目線を組み込む
Avatar for もっさん _mossann_t
0
130
アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App
Avatar for matsuji matsuji
2
970

Featured

See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
700
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
320
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
730
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k

Transcript

  1. How to make your boss speed-curious and other #webperf tricks

    Peter Hedenskog
  2. None
  3. None

  4. The Performance Golden Rule!

  5. 80-90% of the end-user response time is spent on the

    frontend.

  6. front end dev

  7. front end dev

  8. front end dev

  9. front end dev

  10. front end dev

  11. front end dev

  12. With great power …

  13. comes great responsibility!

  14. 2

  15. How to be really fast

  16. The boss

  17. World fastest web page

  18. None

  19. Start render: 0,2 s Visually Complete: 0,2 s

  20. What can we learn?

  21. What CDN are you using?

  22. We know the Golden rule!

  23. The rendering path

  24. 1. Download HTML

  25. 2. If CSS files then download

  26. 3. If JS files then download

  27. 4. DOM + CSSOM = render tree

  28. 5. Paint

  29. Optimize the rendering path

  30. “I like thinking big.” Donald Trump

  31. “Think small” Peter Hedenskog

  32. What?

  33. super computers

  34. super fast internet

  35. remember

  36. mobile phones

  37. data

  38. the city

  39. magic number

  40. 14:ish kb

  41. High Performance Browser Networking - Ilya Grigorik Paul Irish

  42. focus

  43. above the fold

  44. “Think small” Peter Hedenskog

  45. Overall

  46. minimize

  47. combine

  48. avoid requests

  49. no requests

  50. HTML

  51. DOM node depth

  52. CSS

  53. inline

  54. <head> ... <style> body { background: #fff; } ... </style>

    </head> <body>

  55. https://github.com/filamentgroup/loadCSS

  56. None

  57. NEVER

  58. Avoid reflow and repaint

  59. None

  60. Javascript

  61. JAVASCRIPT CAN BE EVIL

  62. JAVASCRIPT IS EVIL* *inside your rendering path

  63. Synchronously loaded Javascript blocks the rendering path!

  64. Example of non working

  65. NEVER

  66. use async <script src=“/js/calculate.js” async></script> https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

  67. measure above the fold

  68. User Timing API

  69. window.performance. mark(‘logoLoaded’);

  70. window.performance. measure(‘logoTiming’, ‘navigationStart’, ‘logoLoaded’);

  71. var items = window.performance .getEntriesByType(' measure');

  72. None

  73. There’s a polyfill for that!

  74. https://gist.github.com/pmeenan/5902672

  75. Demo

  76. front end dev

  77. The boss

  78. 2 kinds

  79. money

  80. http:// www.peterhedenskog.com/ blog/2014/09/more-speed- more-money/

  81. end user Be kind to your users! Mother Theresa

  82. < 0.1 second - instant < 1.0 second - flow

    =>10 seconds - lost ! Robert B. Miller - Response Time in Man-Computer Conversational Transactions (1968) The brain

  83. Visualize

  84. Your boss understands red, yellow and green

  85. 1200 ms

  86. red 1200 ms

  87. yellow 1200 ms

  88. green 1200 ms

  89. None

  90. x

  91. we are 12% slower than …

  92. None

  93. summary

  94. front end dev

  95. None

  96. small

  97. None

  98. •Peter in Denmark - Lars Von Trier •Donald Trump -

    Gage Skidmore •Super computer - Zdjęcia Arkadiusz Sikorski •Monkey with iphone - Marsel Van Oosten •The house - Bert Kaufmann •Stop light peppers - Dennis S Hurd •What is this? - Jeff Carson •Corcovado jesus - Doug88888 •Developers - Austin Wordpress Camp •The evil king - HBO •Pippi Longstocking - Ingrid Vang Nyman •Montgomery Burns - Matt Groening •The dog - Emiliano •Paint over - franziska •Super heroes - Marvel •Vee - Netflix Image credits

  99. Thank you! Peter Hedenskog [email protected] @soulislove