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

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

Peter Hedenskog
September 04, 2014
Technology
0
170

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

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

Peter Hedenskog

September 04, 2014
Tweet

More Decks by Peter Hedenskog

See All by Peter Hedenskog
Keeping Wikipedia fast [WeLoveSpeed]
soulislove
1
430
Measuring Web Performance for Wikipedia using synthetic testing tools
soulislove
0
380
Measuring Web Performance Using Selenium
soulislove
2
720
Monitoring Web Performance using Open Source tools (Stockholm)
soulislove
2
220
Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)
soulislove
1
330
Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)
soulislove
0
230
Optimise your home page (fast as lightning)
soulislove
1
45
Integrating performance tools into continuous delivery
soulislove
0
230
Sitespeed.io Lightning demo @ Velocity Santa Clara 2014
soulislove
0
110

Other Decks in Technology

See All in Technology
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
Platform Engineering for Software Developers and Architects
syntasso
1
520
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
430
複雑なState管理からの脱却
sansantech
PRO
1
150
いざ、BSC討伐の旅
nikinusu
2
780
SRE×AIOpsを始めよう！GuardDutyによるお手軽脅威検出
amixedcolor
0
170
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
120
Terraform Stacks入門 #HashiTalks
msato
0
360
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
A Tale of Four Properties
chriscoyier
156
23k
Writing Fast Ruby
sferik
627
61k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Done Done
chrislema
181
16k
RailsConf 2023
tenderlove
29
900

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