Thinking like a true UXer...what matters to
me as a user of meetups is staying involved!
Before I begin...
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Interrupt! Ask questions!
Slide 9
Slide 9 text
TL; DR:
Consider performance in
your designs
Slide 10
Slide 10 text
*unless you’re Facebook or Reddit, or
another site where you waste time on the UI
Theory: Performance is all
that matters*
Slide 11
Slide 11 text
All people want to do is get
from A to B and complete
task ASAP
Slide 12
Slide 12 text
Conclusion: Design for speed
Slide 13
Slide 13 text
1. Make your images smaller
Slide 14
Slide 14 text
This is a majority of page weight, so do your
80/20 and trim the fat!
1. Make your images smaller
Slide 15
Slide 15 text
http://zoompf.com/downloads/Zoompf%20-%20Achieving%20Better%20Image%20Optimization
%20with%20Lossy%20Techniques.pdf
For JPG (photos):
• ALWAYS SAVE AS PROGRESSIVE
• if q> 85
– Reduce to 85 always (> 90 has no benefits)
– Consider Q 75 if it saves more than 30%
• If pixel area < 10,000
– Always reduce to 60. Lower if possible
• Consider tweaking
– Blurs, softens, sharpens, etc
Slide 16
Slide 16 text
http://zoompf.com/downloads/Zoompf%20-%20Achieving%20Better%20Image%20Optimization
%20with%20Lossy%20Techniques.pdf
For JPG (photos):
• ALWAYS SAVE AS PROGRESSIVE
• if q> 85
– Reduce to 85 always (> 90 has no benefits)
– Consider Q 75 if it saves more than 30%
• If pixel area < 10,000
– Always reduce to 60. Lower if possible
• Consider tweaking
– Blurs, softens, sharpens, etc
For PNG (all else):
PNG24 to PNG8
– When < 5000 colors
– When < 10,000 pixel area
• PNG to JPEG
– Per case, apply when > 30% savings
Slide 17
Slide 17 text
Apps to make your life easier
Slide 18
Slide 18 text
*= Keep your JPEG metadata, or you get
“jaundice people”
ImageOptim* (for everyone)
Slide 19
Slide 19 text
ImageOptim (for everyone)
ImageAlpha (for PNGs)
Slide 20
Slide 20 text
ImageOptim (for everyone)
ImageAlpha (for PNGs)
JPEGmini Lite (for GIFs)
Slide 21
Slide 21 text
Kidding, it’s JPGs, duh, just seeing if you’re
paying attention!
ImageOptim (for everyone)
ImageAlpha (for PNGs)
JPEGmini Lite (for GIFs)
Slide 22
Slide 22 text
2. Cool it with the effects
Slide 23
Slide 23 text
Skeuomorphism via CSS3 is expensive
(which is probably why flat is a good thing)
2. Cool it with the effects
Slide 24
Slide 24 text
Limit Transitions
Slide 25
Slide 25 text
Limit Transitions
transform: translate3d(0,0,0);
Slide 26
Slide 26 text
Limit Transitions
transform: translate3d(0,0,0);
Reduce or Eliminate
The more you can reuse, the lighter your
footprint, the faster you go!
3. Consolidate
Slide 30
Slide 30 text
Cutting code in ½ can mean more than 2.5x
faster sites!
http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
The biggest killer is bloat
(redundant / unused styles)
Slide 31
Slide 31 text
removes unused CSS (grunt-uncss also available)
github.com/giakki/uncss
Slide 32
Slide 32 text
sprites images and gives you coordinate variables
github.com/Ensighten/grunt-s
pritesmith
Slide 33
Slide 33 text
finds redundancies (hint: USE COMPONENTS)
zmoazeni.github.io/csscss/
Slide 34
Slide 34 text
What have we learned?
Slide 35
Slide 35 text
What have we learned?
1. Make your images small
2. Minimize effects, transitions
3. Remove waste, consolidate everything else