What Stuck: FITC Web Performance & Optimization

What got stuck in my head and notebook from the FITC Spotlight event, Web Performance & Optimization 03.16.2013
http://fitc.ca/event/spw13/presentations/

Slides

• Front End Debugging in Firefox with Arvin Singla http://arvinsingla.com/firefox/
• Getting Tooled – A Comprehensive Dive into the Chrome … with Darcy Clarke http://darcyclarke.me/dev/tools/
• Optimized Web Experiences with CSS and JavaScript with Nery Orellana https://dl.dropbox.com/u/25058095/optimizing-web-experiences.pdf
• Auditing and Optimizing Web Application Performance with Topher Bullock https://github.com/xtreme-topher-bullock/webapp-performance
• CBC goes on a diet: Slimming down for a whole nation with Barbara Bermes, Blake Crosby http://www.slideshare.net/bbinto/the-cbc-on-a-diet-slimming-down-for-a-whole-nation

RESS (Responsive Design + Server Side components)

• http://alpha.responsivedesign.is/articles/ress-multi-device-design-resources
• http://www.slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972

Tools

• type data:text/html, <html contenteditable> on your browser, it a live scratchpad!
• use jsPerf to compare which JS snippets are more efficient, for example: http://jsperf.com/jquery-each-vs-each-vs-for-loop/2
• http://livereload.com/ is a Chrome plugin which applies CSS / HTML edits live, no refresh needed
• CSS PIE http://css3pie.com/
• http://httparchive.org/

Animations

• use requestAnimationFrame instead of setTimeout
• use CSS3 instead of JS http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
• use translateZ(0) and translate3d(0,0,0) when using CSS3 transform / transition to accelerate GPU

Chrome Inspector tips

• use incognito mode
• use pageSpeed (YSlow equivalent)
• skin it http://darcyclarke.me/design/skin-your-chrome-inspector/
• live editing with revision history

Optimization tips

• 60 fps
• avoid expensive CSS3 properties (border-radius, box-shadow, gradients, etc.)
• less CSS reflow
• cookies are bad, use localStorage and sessionStorage instead
• use data:uri instead of images or pure css
• gzip, CDN, cache cache cache

Recommended Reads

• JavaScript The Good Parts http://eleventyone.done.hu/OReilly.JavaScript.The.Good.Parts.May.2008.pdf
• JavaScript Patterns http://shop.oreilly.com/product/9780596806767.do
• The Clean Coder http://www.amazon.com/Clean-Coder-Conduct-Professional-Programmers/dp/0137081073