Performance talk @wearearchitect

Quick performance talk for the Developer Dejeuner at Architect

Transcript

1. Performance ...For dummies?
2. *
3. Why Performance?
4. (2012) Speed
5. 3G = 7.2Mb MAx!! Are you mobile?
6. 4G = 8-12Mb Not consistently Are you mobile?
7. 74% of mobile web users will leave a site if it takes longer than 5 seconds to load. - Brad Frost Are you mobile?
8. What happened?
9. The Catalysts!
10. And this!
11. testing performance
12. Google Page Speed
13. Google Page Speed
14. Dev tools
15. Dev tools
16. Dev tools
17. Dev tools
18. Dev tools
19. Browsers
20. Render process
21. Parse Render process
22. Render process
23. “document.write()” that nasty bastard! - Patrick Hamann Are you mobile?
24. layout Render process
25. Render process
26. Paint Render process
27. Render process
28. https://vimeo.com/69385032 Jake archibald
29. Performance-y stuff
30. HTTP Requests CSS & JS Image compression HTTP Compression Browser Caching Be aware of your assets Performance
31. Http requests
32. http requests
33. Make fewer requests... http requests
34. MAXIMISE Parallelisation http requests
35. Keep alive connection http requests
36. Prefetching <link rel="dns-prefetch" href="//bar.foo.com"> http requests
37. Resource prefetching http requests
38. Keep CSS on the same domain http requests
39. CSS & JS
40. CSS at the top... JS at the bottom! CSS & JS
41. Harry’s rules... (@csswizardry) CSS & JS
42. The controversial bit... CSS & JS
43. CSS and the critical path... CSS & JS
44. Inline your critical CSS CSS & JS
45. CSS & JS
46. CSS & JS
47. Optimise images
48. ImageOptim & JPEGmini Optimising images
49. Spriting Optimising images
50. HTTP Compression
51. HTML5 Boilerplate compression
52. Browser caching
53. The fastest HTTP request is the one not made - Someone? browser caching
54. HTML5 Boilerplate browser caching
55. be aware of your assets
56. assets
57. last points...
58. Tools!!
59. tools tools
60. https://developers.google.com/events/io/sessions/325206725 tools
61. grunt tools
62. Concatenation Compression Image Optimisation and more... tools
63. Compass tools
64. Final points...
65. Performance should be taken into account from day one! bored now?
66. Get developers involved early in the process bored now?
67. That’s all folks!