Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX and Performance

UX and Performance

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

Adam Conrad

June 17, 2015
Tweet

More Decks by Adam Conrad

Other Decks in Programming

Transcript

  1. UX and Performance

    View Slide

  2. UX and Performance
    (Why the flat trend is good)

    View Slide

  3. [insert about me slide]

    View Slide

  4. [insert about me slide]
    @adam_conrad

    View Slide

  5. Before I begin...

    View Slide

  6. Thinking like a true UXer...what matters to
    me as a user of meetups is staying involved!
    Before I begin...

    View Slide

  7. View Slide

  8. Interrupt! Ask questions!

    View Slide

  9. TL; DR:
    Consider performance in
    your designs

    View Slide

  10. *unless you’re Facebook or Reddit, or
    another site where you waste time on the UI
    Theory: Performance is all
    that matters*

    View Slide

  11. All people want to do is get
    from A to B and complete
    task ASAP

    View Slide

  12. Conclusion: Design for speed

    View Slide

  13. 1. Make your images smaller

    View Slide

  14. This is a majority of page weight, so do your
    80/20 and trim the fat!
    1. Make your images smaller

    View Slide

  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

    View Slide

  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

    View Slide

  17. Apps to make your life easier

    View Slide

  18. *= Keep your JPEG metadata, or you get
    “jaundice people”
    ImageOptim* (for everyone)

    View Slide

  19. ImageOptim (for everyone)
    ImageAlpha (for PNGs)

    View Slide

  20. ImageOptim (for everyone)
    ImageAlpha (for PNGs)
    JPEGmini Lite (for GIFs)

    View Slide

  21. Kidding, it’s JPGs, duh, just seeing if you’re
    paying attention!
    ImageOptim (for everyone)
    ImageAlpha (for PNGs)
    JPEGmini Lite (for GIFs)

    View Slide

  22. 2. Cool it with the effects

    View Slide

  23. Skeuomorphism via CSS3 is expensive
    (which is probably why flat is a good thing)
    2. Cool it with the effects

    View Slide

  24. Limit Transitions

    View Slide

  25. Limit Transitions
    transform: translate3d(0,0,0);

    View Slide

  26. Limit Transitions
    transform: translate3d(0,0,0);
    Reduce or Eliminate

    View Slide

  27. Limit Transitions
    transform: translate3d(0,0,0);
    Reduce or Eliminate
    box-shadow, text-shadow,
    border-radius, linear-gradient,
    radial-gradient, opacity, filter:

    View Slide

  28. 3. Consolidate

    View Slide

  29. The more you can reuse, the lighter your
    footprint, the faster you go!
    3. Consolidate

    View Slide

  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)

    View Slide

  31. removes unused CSS (grunt-uncss also available)
    github.com/giakki/uncss

    View Slide

  32. sprites images and gives you coordinate variables
    github.com/Ensighten/grunt-s
    pritesmith

    View Slide

  33. finds redundancies (hint: USE COMPONENTS)
    zmoazeni.github.io/csscss/

    View Slide

  34. What have we learned?

    View Slide

  35. What have we learned?
    1. Make your images small
    2. Minimize effects, transitions
    3. Remove waste, consolidate everything else

    View Slide

  36. @adam_conrad
    acconrad.github.io
    Thanks! Questions?

    View Slide