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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Peter Hedenskog Peter Hedenskog
September 04, 2014
Technology
200
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
540
Measuring Web Performance for Wikipedia using synthetic testing tools
Avatar for Peter Hedenskog soulislove
0
500
Measuring Web Performance Using Selenium
Avatar for Peter Hedenskog soulislove
2
980
Monitoring Web Performance using Open Source tools (Stockholm)
Avatar for Peter Hedenskog soulislove
2
260
Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)
Avatar for Peter Hedenskog soulislove
1
380
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
73
Integrating performance tools into continuous delivery
Avatar for Peter Hedenskog soulislove
0
310
Sitespeed.io Lightning demo @ Velocity Santa Clara 2014
Avatar for Peter Hedenskog soulislove
0
140

Other Decks in Technology

See All in Technology
公式ドキュメントの歩き方etc
Avatar for あべ coco_se
1
120
AI Coding Agent時代のcdk-nagガードレール 〜組織ルールを強制CIで守り抜く設計の挑戦〜
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
3
390
Claude Code公式skillで 自分の仕事を少しずつ手放そう！（Claude Code開発ノウハウ大公開スペシャル by クラスメソッド）
Avatar for Kei Masaoka kaym
1
480
ファミコンでPHPを動かす / PHP on the Famicom
Avatar for HASEGAWA Tomoki tomzoh
2
350
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
110k
SRE依存からの脱却 運用を開 発チームへ移す、 フルサイ クル開 発体制の実践
Avatar for joe joooee0000
0
3.1k
SRE Next 2026 何でも屋からの脱却
Avatar for Masato Bito bto
0
920
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
2
360
Making sense of Google’s agentic dev tools
Avatar for Guillaume Laforge glaforge
1
280
[2026-07-15] AI Ready なはずだったアーキテクチャと、見えてきた課題・次に目指す状態
Avatar for 和田 悠佑 wxyzzz
9
4k
「早く出す」より「事業に効く」 ── 顧客の業務サイクルから逆算するAI時代の二重ループ開発と「変化の設計者」 / devsumi2026
Avatar for Rakus_Dev rakus_dev
1
360
Genie Ontologyは銀の弾丸かを考える / Is Genie Ontology a Silver Bullet?
Avatar for NTT docomo Business nttcom
0
390

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
970
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.8k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
300
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.1k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
650
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k

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