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

1. Automating
Performance Optimization
Copyright © 2014 Accenture LLP. All Rights Reserved.
For the Client Side!

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. 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. 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. 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. 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. 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. 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. Tools of the trade
Copyright © 2014 Accenture LLP. All Rights Reserved.
Page 9
or

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. 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. • 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. 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. 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. Caveat to everything above…
Copyright © 2014 Accenture LLP. All Rights Reserved.
Page 15
(old versions,
of course)

16. Questions?
Copyright © 2014 Accenture LLP. All Rights Reserved.
Page 16

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. Appendix 2: Credits
• Authors of all the awesome libraries and tasks used!
Copyright © 2014 Accenture LLP. All Rights Reserved.
Page 18