Automated perf optimization - jQuery Conference

Copyright © 2014 Accenture LLP. All Rights Reserved.

Automating Performance Optimization

For the Client Side!


A pertinent question?

Why is this giant bearded man talking to me about this topic?

… Favorite tag: <canvas>


Agenda

• Definitions• Background• Automating Performance Optimization

– Methodology– Tools– JavaScript– CSS– Images– Some Manual (Code Review) Items

• Q & A• Appendices


Disclaimers and Caveats (Oh My)

• 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)


What is automated client performance optimization?

• 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


Why?

Build (and optimize) running!

But seriously, we can get a lot of value for comparatively little effort.


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 culprits here)– Not-so-responsive images on a responsive site– Multiple media query definitions– Un-optimized images– Other (we’ll get to those)


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 as part of a development process where humans intervene at the right places


Tools of the trade

or


JavaScript

• 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


CSS Preamble

• 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


CSS

• 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


Images

• 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!


Code Review Items

• 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


Caveat to everything above…

(old versions, of course)


Questions?


Appendix: Tasks

• 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

https://github.com/gruntjs/grunt-contrib-jshint

https://github.com/gruntjs/grunt-contrib-jshint

https://github.com/spenceralger/gulp-jshint

https://github.com/spenceralger/gulp-jshint

https://github.com/sindresorhus/grunt-eslint

https://github.com/adametry/gulp-eslint

https://github.com/gruntjs/grunt-contrib-cssmin

https://github.com/chilijung/gulp-cssmin/

https://github.com/jgallen23/grunt-inline-css

https://github.com/addyosmani/grunt-uncss

https://github.com/gruntjs/grunt-contrib-imagemin

https://github.com/gruntjs/grunt-contrib-imagemin

https://github.com/sindresorhus/gulp-imagemin

https://github.com/andismith/grunt-responsive-images

https://github.com/andismith/grunt-responsive-images

https://github.com/BBC-News/Imager.js/

https://github.com/Ensighten/grunt-spritesmith

https://github.com/sapegin/grunt-webfont


Appendix 2: Credits

• Authors of all the awesome libraries and tasks used!

Automated perf optimization - jQuery Conference

Technology

Transcript of Automated perf optimization - jQuery Conference