Weitere ähnliche Inhalte Ähnlich wie Automated perf optimization - jQuery Conference (20) Kürzlich hochgeladen (20) Automated perf optimization - jQuery Conference2. 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)
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
Hinweis der Redaktion Hi, I’m Matt Lancaster.
I want to talk to you about a topic near and dear to my heart: client side performance optimization.
Sr. Technology Architect / Manager Emerging Tech
Cat herding / leading large web projects / Mention AOWP
Mention that we’ve created a working architecture with multiple components and have opinions on most out there
Battle tested on multiple projects Disclaimer #1 – Review, Review… Friends don’t let friends (who came over from Java) do the wrong kind of OOP
First rule of triage == treat severe but quickly manageable wounds first: you will never get to other worthwhile perf issues if patient dies on the table
Premature Opt like… other things done premat, everyone ends up frustrated in end… everyone has bad time
Greatest thing since sliced bread to add a bunch of caching layers, don’t How many of you have perf SLAs? Build complex client-side applications? grunt-contrib-jshint
gulp-jshint
grunt-eslint
gulp-eslint
grunt-contrib-cssmin
gulp-cssmin
grunt-inline-css
grunt-uncss
grunt-contrib-imagemin
gulp-imagemin
grunt-responsive-images
Imager.js
grunt-spritesmith
grunt-webfont