automated perf optimization - jquery conference
DESCRIPTION
Automated Performance Optimization for client side applications (JavaScript, Grunt, etc), delivered at jQuery Chicago.TRANSCRIPT
Copyright © 2014 Accenture LLP. All Rights Reserved.
Automating Performance Optimization
For the Client Side!
Copyright © 2014 Accenture LLP. All Rights Reserved.
A pertinent question?
Page 2
Why is this giant bearded man talking to me about this topic?
… Favorite tag: <canvas>
Copyright © 2014 Accenture LLP. All Rights Reserved.
Agenda
• Definitions• Background• Automating Performance Optimization
– Methodology– Tools– JavaScript– CSS– Images– Some Manual (Code Review) Items
• Q & A• Appendices
Page 3
Copyright © 2014 Accenture LLP. All Rights Reserved.
Disclaimers and Caveats (Oh My)
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)
Copyright © 2014 Accenture LLP. All Rights Reserved.
What is automated client performance optimization?
Page 5
• Answer: Reducing file size, http downloads, render time, improving code performance.. (dramatic music) automatically
• Scope: performance-related tuning we can do by setting up automatic tasks in build/optimize tasks
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.
Copyright © 2014 Accenture LLP. All Rights Reserved.
Methodology: Define
Page 7
• 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 culprits here)– Not-so-responsive images on a responsive site– Multiple media query definitions– Un-optimized images– Other (we’ll get to those)
Copyright © 2014 Accenture LLP. All Rights Reserved.
Methodology: Solve
Page 8
• Use a task automation tool to automate as much as possible (humans make mistakes!)
• What can’t be done with the automation tool, include as part of a development process where humans intervene at the right places
Copyright © 2014 Accenture LLP. All Rights Reserved.
Tools of the trade
Page 9
or
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
Copyright © 2014 Accenture LLP. All Rights Reserved.
CSS Preamble
Page 11
• CSS Preamble: All of this requires some pre-planning and structure – If you’re using a modular project structure, your
grunt/gulp 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
Copyright © 2014 Accenture LLP. All Rights Reserved.
CSS
Page 12
• Inline CSS: Automatically inline uncommonly used CSS rules– Make sure those rules are in files with other
uncommonly 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
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!
Copyright © 2014 Accenture LLP. All Rights Reserved.
Code Review Items
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
Copyright © 2014 Accenture LLP. All Rights Reserved.
Caveat to everything above…
Page 15
(old versions, of course)
Copyright © 2014 Accenture LLP. All Rights Reserved.
Questions?
Page 16
Copyright © 2014 Accenture LLP. All Rights Reserved.
Appendix: Tasks
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-imagemi
n– gulp-imagemin– grunt-responsive-imag
es– Imager.js– grunt-spritesmith– grunt-webfont
Copyright © 2014 Accenture LLP. All Rights Reserved.
Appendix 2: Credits
Page 18
• Authors of all the awesome libraries and tasks used!