automated perf optimization - html5 dev conf
DESCRIPTION
Perf Optimization Automation Presentation from HTML5 Dev ConfTRANSCRIPT
Copyright © 2014 Accenture LLP. All Rights Reserved.
Automating Performance Optimization
For Modern Web Applications
Copyright © 2014 Accenture LLP. All Rights Reserved.
Agenda
• Definitions• Disclaimers and Caveats• Automating Performance Optimization
– Methodology– Tools– JavaScript– CSS– Images– Some Manual (Code Review) Items
• Q & A• Appendices
Page 2
Copyright © 2014 Accenture LLP. All Rights Reserved.
What is Perf Automation, anyway?
Page 3
• Make performance optimization part of the development process, not just something developers are supposed to think about.
• If performance is not part of the process from the beginning, it won’t be thought about until the very end!
Performance Optimization can be made part of the build process, and integrated into DevOps. Then it becomes
part of the daily activity of a development team!
Copyright © 2014 Accenture LLP. All Rights Reserved.
Disclaimers and Caveats
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 as part of an automatic process
• Scope: performance-related tuning we can do by setting up automatic tasks in build/optimize tasks
Copyright © 2014 Accenture LLP. All Rights Reserved.
DevOps for JS Apps
Page 6
Code written & check-in requested
Grunt runs automated mocha behavior with chai assertions and unit tests via phantomjs & casperjs
Grunt provides
Automated task scripting
+
Passes Automated
QA
Jenkins begins
automated build & deploy process
JS Hint runs code
quality tests
Feedback is passed to
developersQA Testers test on multiple devices
mocha
+
Code is packaged & readied for
deploy by Grunt
Check-in merged to Phabricator branch for pre-
commit review by senior developers
Code is deployed to test environments
by Jenkins
Once code review is
approved, git is used to
push the code update
to sprint branch
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
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
• Code review, code review, code review...……Code review!
Copyright © 2014 Accenture LLP. All Rights Reserved.
Tools of the trade
Page 9
or
Copyright © 2014 Accenture LLP. All Rights Reserved.
CSS
Page 10
• 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 11
• 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.
JavaScript
Page 12
• 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.
DevOps Integration
Page 13
Code written & check-in requested
Grunt runs automated mocha behavior with chai assertions and unit tests via phantomjs & casperjs
Grunt provides
Automated task scripting
+
Passes Automated
QA
Jenkins begins
automated build & deploy process
JS Hint runs code
quality tests
Feedback is passed to
developersQA Testers test on multiple devices
mocha
+
Code is packaged & readied for
deploy by Grunt
Check-in merged to Phabricator branch for pre-
commit review by senior developers
Code is deployed to test environments
by Jenkins
Once code review is
approved, git is used to
push the code update
to sprint branch
Copyright © 2014 Accenture LLP. All Rights Reserved.
Questions?
Page 14
Copyright © 2014 Accenture LLP. All Rights Reserved.
Appendix: Tasks
Page 15
• 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– adept-jpg-compressor