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

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

Transcript

1. How to make your boss speed-curious and other #webperf tricks Peter Hedenskog
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!
15. How to be really fast
16. The boss
17. World fastest web page
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
57. NEVER
58. Avoid reflow and repaint
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');
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
90. x
91. we are 12% slower than …
93. summary
94. front end dev
96. small
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 peter@soulgalore.com @soulislove