UX and Performance

Page performance is a user experience. Here's how to make that experience as awesome as possible.

Transcript

1. UX and Performance
2. UX and Performance (Why the flat trend is good)
3. [insert about me slide]
4. [insert about me slide] @adam_conrad
5. Before I begin...
6. Thinking like a true UXer...what matters to me as a user of meetups is staying involved! Before I begin...
8. Interrupt! Ask questions!
9. TL; DR: Consider performance in your designs
10. *unless you’re Facebook or Reddit, or another site where you waste time on the UI Theory: Performance is all that matters*
11. All people want to do is get from A to B and complete task ASAP
12. Conclusion: Design for speed
13. 1. Make your images smaller
14. This is a majority of page weight, so do your 80/20 and trim the fat! 1. Make your images smaller
15. 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
16. 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
17. Apps to make your life easier
18. *= Keep your JPEG metadata, or you get “jaundice people” ImageOptim* (for everyone)
19. ImageOptim (for everyone) ImageAlpha (for PNGs)
20. ImageOptim (for everyone) ImageAlpha (for PNGs) JPEGmini Lite (for GIFs)
21. Kidding, it’s JPGs, duh, just seeing if you’re paying attention! ImageOptim (for everyone) ImageAlpha (for PNGs) JPEGmini Lite (for GIFs)
22. 2. Cool it with the effects
23. Skeuomorphism via CSS3 is expensive (which is probably why flat is a good thing) 2. Cool it with the effects
24. Limit Transitions
25. Limit Transitions transform: translate3d(0,0,0);
26. Limit Transitions transform: translate3d(0,0,0); Reduce or Eliminate
27. Limit Transitions transform: translate3d(0,0,0); Reduce or Eliminate box-shadow, text-shadow, border-radius, linear-gradient, radial-gradient, opacity, filter:
28. 3. Consolidate
29. The more you can reuse, the lighter your footprint, the faster you go! 3. Consolidate
30. 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)
31. removes unused CSS (grunt-uncss also available) github.com/giakki/uncss
32. sprites images and gives you coordinate variables github.com/Ensighten/grunt-s pritesmith
33. finds redundancies (hint: USE COMPONENTS) zmoazeni.github.io/csscss/
34. What have we learned?
35. What have we learned? 1. Make your images small 2. Minimize effects, transitions 3. Remove waste, consolidate everything else
36. @adam_conrad acconrad.github.io Thanks! Questions?