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
Written by Joanna Ong
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Filed Under
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#