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
   

   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