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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Peter Hedenskog Peter Hedenskog
September 04, 2014
Technology
0
190

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
Tweet

More Decks by Peter Hedenskog

See All by Peter Hedenskog
Keeping Wikipedia fast [WeLoveSpeed]
Avatar for Peter Hedenskog soulislove
1
500
Measuring Web Performance for Wikipedia using synthetic testing tools
Avatar for Peter Hedenskog soulislove
0
470
Measuring Web Performance Using Selenium
Avatar for Peter Hedenskog soulislove
2
940
Monitoring Web Performance using Open Source tools (Stockholm)
Avatar for Peter Hedenskog soulislove
2
240
Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)
Avatar for Peter Hedenskog soulislove
1
360
Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)
Avatar for Peter Hedenskog soulislove
0
250
Optimise your home page (fast as lightning)
Avatar for Peter Hedenskog soulislove
1
60
Integrating performance tools into continuous delivery
Avatar for Peter Hedenskog soulislove
0
290
Sitespeed.io Lightning demo @ Velocity Santa Clara 2014
Avatar for Peter Hedenskog soulislove
0
130

Other Decks in Technology

See All in Technology
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
Avatar for GENDA genda
0
150
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.1k
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
550
What happened to RubyGems and what can we learn?
Avatar for Mike McQuaid mikemcquaid
0
220
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
270
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
170
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ―　Qiita AI Summit
Avatar for NOBORU ITOU noalisaai
1
370
分析画面のクリック操作をそのままコード化 ！ エンジニアとビジネスユーザーが共存するAI-ReadyなBI基盤
Avatar for ikumi ikumi
0
170
データ民主化のための LLM 活用状況と課題紹介（IVRy の場合）
Avatar for 和田 悠佑 wxyzzz
2
650

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
120
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
440
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
210
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
220
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
110

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