UX and Performance

UX and Performance

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

43e0fc25bbcc4a1bcf1e6139e424ee35?s=128

Adam Conrad

June 17, 2015
Tweet

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...
  7. None
  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?