Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Automated perf optimization - jQuery Conference

4,418 views

Published on

Automated Performance Optimization for client side applications (JavaScript, Grunt, etc), delivered at jQuery Chicago.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Automated perf optimization - jQuery Conference

  1. 1. Automating Performance Optimization Copyright © 2014 Accenture LLP. All Rights Reserved. For the Client Side!
  2. 2. A pertinent question? Why is this giant bearded man talking to me about this topic? Copyright © 2014 Accenture LLP. All Rights Reserved. Page 2 … Favorite tag: <canvas>
  3. 3. Agenda • Definitions • Background • Automating Performance Optimization – Methodology – Tools – JavaScript – CSS – Images – Some Manual (Code Review) Items Copyright © 2014 Accenture LLP. All Rights Reserved. • Q & A • Appendices Page 3
  4. 4. Disclaimers and Caveats (Oh My) Copyright © 2014 Accenture LLP. All Rights Reserved. Page 4 • Disclaimers – Disclaimer #1: Great performance still requires great code! – Disclaimer #2: Not just an asset pipeline! – Disclaimer #3: Of course you can’t automate all performance optimization… but you can automate some important things. • Caveat – Most premature optimization is bad! However, some can be good (seriously)
  5. 5. What is automated client performance optimization? • Answer: Reducing file size, http downloads, render time, improving code performance.. (dramatic music) automatically Copyright © 2014 Accenture LLP. All Rights Reserved. Page 5 • Scope: performance-related tuning we can do by setting up automatic tasks in build/optimize tasks
  6. 6. Copyright © 2014 Accenture LLP. All Rights Reserved. Why? Page 6 Build (and optimize) running! But seriously, we can get a lot of value for comparatively little effort.
  7. 7. Methodology: Define • Think through everything you need to work through or that could slow your application down: – Lots of unused CSS rules (bootstrap, jqueryUI etc are big Copyright © 2014 Accenture LLP. All Rights Reserved. Page 7 culprits here) – Not-so-responsive images on a responsive site – Multiple media query definitions – Un-optimized images – Other (we’ll get to those)
  8. 8. Methodology: Solve • Use a task automation tool to automate as much as possible (humans make mistakes!) • What can’t be done with the automation tool, include Copyright © 2014 Accenture LLP. All Rights Reserved. Page 8 as part of a development process where humans intervene at the right places
  9. 9. Tools of the trade Copyright © 2014 Accenture LLP. All Rights Reserved. Page 9 or
  10. 10. Copyright © 2014 Accenture LLP. All Rights Reserved. JavaScript Page 10 • Use automated code quality tools, embedded in a grunt analyze or gulp analyze task • Embed these tools into your build / CI process • Require.js! • Peer review constantly, ideally with a tool like Phabricator, embedded into your dev process
  11. 11. CSS Preamble • CSS Preamble: All of this requires some pre-planning and structure – If you’re using a modular project structure, your grunt/gulp Copyright © 2014 Accenture LLP. All Rights Reserved. Page 11 file will probably get a bit complex – Try to separate your css into logical groupings, e.g. vendor, common, page-specific • Follow a specific task order: CSS preprocessor  Optimization Tasks  Minify & Concatenate CSS
  12. 12. • Inline CSS: Automatically inline uncommonly used CSS rules – Make sure those rules are in files with other uncommonly Copyright © 2014 Accenture LLP. All Rights Reserved. CSS Page 12 used rules • Defcon 5: Remove unused CSS with unCSS – Note: if you’re not careful, this will remove all the css applied by JS/pseudoclasses – Make liberal use of the ignore file – Include dynamically applied CSS in its own files, so you can ignore it
  13. 13. Copyright © 2014 Accenture LLP. All Rights Reserved. Images Page 13 • Optimize them! – Images run through most modern optimization/compression algorithms (e.g. optipng, jpgtran) are virtually indistinguishable from source images. • Not even creatives can tell the difference, honest! • Make responsive images automatically – Set sizes according to breakpoints, etc – Combine with Imager.js to make real magic • Sprites – For appropriate icons, create sprites or… – Create a Webfont from svg icons!
  14. 14. Code Review Items Copyright © 2014 Accenture LLP. All Rights Reserved. Page 14 • Local Storage • HTML5 Application Cache • Batch API calls when possible: – Create an API object, e.g. • api.add(…) • api.add(…) • api.send(…) • Use 3D Animations (yay hardware acceleration) • Promises are your friends
  15. 15. Caveat to everything above… Copyright © 2014 Accenture LLP. All Rights Reserved. Page 15 (old versions, of course)
  16. 16. Questions? Copyright © 2014 Accenture LLP. All Rights Reserved. Page 16
  17. 17. Appendix: Tasks Copyright © 2014 Accenture LLP. All Rights Reserved. Page 17 • JavaScript – grunt-contrib-jshint – gulp-jshint – grunt-eslint – gulp-eslint • CSS – grunt-contrib-cssmin – gulp-cssmin – grunt-inline-css – grunt-uncss • Images – grunt-contrib-imagemin – gulp-imagemin – grunt-responsive-images – Imager.js – grunt-spritesmith – grunt-webfont
  18. 18. Appendix 2: Credits • Authors of all the awesome libraries and tasks used! Copyright © 2014 Accenture LLP. All Rights Reserved. Page 18

×