Building Fast Web Apps

A slide deck overview that covers best practices to improve performance of web sites and web applications built with HTML, CSS and JavaScript.

It summarizes strong know-how from Steve Souders, Addy Osmani and the Google Page Speed team.

Transcript

1. HTML, CSS, JS, gzip and all that Building Web Apps Fast
2. why bother? it’s 2012
3. hi-speed internet
4. modern browsers
5. multi-core devices
6. it’s The Future isn’t it?
7. and we’re still doing it wrong! Yes, it is!
8. the internet is fast but it’s clogged JS CSS
9. the browsers are modern but we’re treating them like IE6* * no offence
10. the cores, they are many… but they’re not really doing much
11. then there’s mobile… Oh, yeah
12. battery life sucks on mobile devices
13. mobile web traffic is still expensive $! $! $! $! $! $! $!
14. the screens, they’re just so small TINY SCREEN
15. Going Fast Nowhere
16. Going Fast Everywhere
17. Front-end Best Practices Tips & Tricks Performance
18. Yahoo! YSlow Google PageSpeed
19. Steve Souders Yahoo! YSlow Google Velocity wrote the books on front-end performance. Literally  
20. Books
21. of the load time is spent on the front-end 85%
22. download parse exec render
23. requests caching js & css images 2 1 3 4
24. Request less
25. .js .js .js .js .js
26. .js .js “there, I fixed it!”
27. Request less* * mobile – request more, smaller, when required
28. Require.js LABjs Loading And Blocking JavaScript  
29. 3 RTT (Round Trip Time) 1  DNS resolution 2  TCP connection setup 3  HTTP Request
30. Reduce DNS lookups less subdomain nesting serve “critical path” JS in from main hostname
31. Avoid Bad Requests 4XX Reduce Redirects 3XX
32. Parallelize Downloads
33. How your browser sees the Internet CSS host1.com PNG host1.com CSS host1.com PNG host1.com CSS host1.com PNG host1.com time
34. How your browser can see the Internet CSS host1.com PNG host1.com CSS host2.com PNG host2.com CSS host3.com PNG host3.com time
35. How your browser can see the Internet CSS host1.com PNG host1.com CSS host2.com PNG host2.com CSS host3.com PNG host3.com time
36. Browserscope.org
37. Google Facebook gstatic.com static.ak.fbcdn.net profile.ak.fbcdn.net
38. NO COOKIES
39. Content Delivery Network use a Akamai CloudFront Amazon
40. Minimize Overhead upload/download 1:4 1:20
41. Minimize Overhead Keep GET short Use less cookies
42. Cookies count calories <1000 bytes
43. Cookies eat them when they’re done yum!
44. requests caching js & css images 2 1 3 4
45. What to cache? .js .css .png anything binary do not cache .html
46. How long to cache? Expires: Cache-control: Thu, 16 Mar 2012 11:00:00 GMT max-age = 3600
47. Did it expire? Last-Modified: ETag: Thu, 16 Mar 2012 11:30:00 GMT "1edec-3e3073913b100"
48. Versioning <script src=“jquery.js?v=1.7”> force new request with <script/>
49. requests caching js & css images 2 1 3 4
50. Combine files .js .js .js
51. Why combine files? .js less requests less overhead more discipline
52. Don’t over do it! all.js
53. Suggestion jquery.js jquery.plugin1.js jquery.plugin2.js jquery.plugin1.conf.js jquery.plugin2.conf.js
54. Suggestion* jquery.js pageName.conf.js * your mileage may vary
55. Minify Keep only the file nutrients strip code comments pack names
56. tips for better results var foo; var bar; var baz; var foo, bar, baz; Minify Single var declaration
57. tips for better results if (i>0){ return i } return 0; var res = 1; if (i>0){ res = i } return res; Minify Single return (over-simplification)
58. tips for better results App.component.module.panel Minify Avoid long namespaces
59. Compress .js Content-encoding: gzip
60. Correct loading order CSS JS JS
61. Styles first Scripts after HTML next
62. Scripts block downloading and parsing move to end or load async
63. <script src=“widget.js” async > <script src=“setup.js” defer > JavaScript
64. Cuzillion ‘cuz there are a zillion pages to check
65. requests caching js & css images 2 1 3 4
66. Optimize images strip meta unused channels
67. Optimize images OptiPNG ImageOptim jpegtran Tools
68. CSS Sprites less requests less overhead
69. base64 data:image/gif;base64, R0lGODlhAQABAID/ AMDAwAAAACH5BAEA… less requests some overhead more CPU work think about less gifted devices ! !
70. Speaking of mobile and their tiny-ish screens serve scaled images CPUs that
71. burn that CPU ! transform: rotate(360deg) <img src=“loading.gif” /> vs CSS effects
72. CSS effects hog that GPU* tranform3d *where available
73. linear-gradient() box-shadow border-radius background: im1.png, im2.png Replace images with CSS
74. However… "border-radius" is among the most expensive CSS properties to affect rendering time […] ” - Juriy Zaytsev AKA kangax
75. Balance you must seek it http requests machine load
78. requests caching js & css images 2 1 3 4
79. Tips & Tricks in your workflow
80. Deploy hooks .html css css css .html css.min ?v=2
81. Track your speed PageSpeed Service or SDK Google HTTPArchive.org
82. mod_pagespeed Apache 2.2 Performance booster Customizable filters
83. Tips & Tricks in your code
84. jQuery Selectors 70% faster than $(“#parent”).find(“.class”) $(“#parent .class”)
85. $(selector ) is expensive there’s a reason it’s a dollar
86. jsPerf.com run your own tests test your assumptions
87. DocumentFragment document. createDocumentFragment()
88. Detach Node detached = Node.removeChild(child) before heavy manipulation
89. Delegate Events body .addEventListener(“click”, function(e){ if (e.target.name = “el”) // magic })
90. Less requests Smaller files More caching CSS vs IMG Take pride
91. it’s The Future isn’t it?
92. That’s a wrap go experiment! @razvancaliman rcaliman@adobe.com
93. Resources http://code.google.com/speed/page-speed/ http://developer.yahoo.com/yslow/ http://code.google.com/speed/page-speed/docs/module.html mod_page speed Measuring tools http://stevesouders.com/ Expert blogs http://addyosmani.com/blog/ http://calendar.perfplanet.com/2011/
94. More Resources http://www.browserscope.org/ http://stevesouders.com/cuzillion/ Tools https://developers.google.com/closure/ https://github.com/mishoo/UglifyJS http://www.spritecow.com/ http://optipng.sourceforge.net/ Minification Image optimization http://imageoptim.com/
95. Even More Resources http://addyosmani.com/jqprovenperformance/ http://jsperf.com/popular JavaScript Performance http://perfectionkills.com/profiling-css-for-fun-and-profit- optimization-notes/ http://www.webkitbits.com/post/16771926700/matt-seeley- webkit-in-your-living-room http://velocityconf.com/velocity2012 CSS Profiling & WebKit Conference •  http://jsperf.com/jquery-selector-perf-right-to-left
96. Done @razvancaliman Have fun! rcaliman@adobe.com