Designers Guide to Web Perfornance Optimization

Performance is one of the biggest issues we face on The Web today. As the weight of the average page continues to rise, discussion around performance on most web teams quickly descends into the realm of development optimization. The reality is that performant web experiences begin with treating performance as an essential design feature.

Transcript

1. WEB PERFORMANCE
   OPTIMIZATION
   SEPT. 2016 / JON YABLONSKI
   D E S I G N E R S G U I D E T O
   

   View Slide

2. Performant web experiences begin with treating
   performance as an essential design feature.
   01/16
   DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   

   View Slide

3. BRAD FROST
   The road towards better performance doesn’t start with
   developers or technology stacks (though I’m certainly not
   suggesting those things are unimportant). It begins with a
   shared interest on everyone’s part in making a product that’s
   lightning fast.
   “
   02/16
   DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   

   View Slide

4. PROCESS & WORKFLOW
   03/16
   DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   

   View Slide

5. MORE INFO
   Consider all viewport sizes, not just “mobile, tablet,
   desktop” (aka iPhone, iPad, iMac)
   Begin designs by thinking about users on smaller screen first
   Involve the development team in the design process
   Create and follow a performance budget
   Avoid one-off design solutions
   01
   02
   03
   04
   05
   04/16
   DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   

   View Slide

6. ANIMATIONS & EFFECTS
   DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   05/16
   

   View Slide

7. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   MORE INFO
   Ensure that animations improve the user experience by
   providing meaning to the user
   Effects that are triggered during the scroll event consider the
   needs of the user first and foremost
   01
   02
   06/16
   

   View Slide

8. FONTS
   DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   07/16
   

   View Slide

9. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
   MORE INFO
   Don’t exceed a total of three custom web fonts
   Ensure custom web fonts have been optimized for web use
   Ensure the proper font formats have been created for
   development, including WOFF 2.0 format
   Have web safe fallback fonts for each custom web font in use
   01
   02
   03
   04
   08/16
   

   View Slide

10. IMAGES
    DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    09/16
    

    View Slide

11. View Slide

12. SVG
    DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    11/16
    

    View Slide

13. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    MORE INFO
    Use SVGs in place of images whenever appropriate
    Ensure SVGs don’t contain extraneous layers
    Simplify SVG paths during creation process
    Optimize SVGs
    Consider browser support
    01
    02
    03
    04
    05
    12/16
    

    View Slide

14. PERCEIVED PERFORMANCE
    DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    13/16
    

    View Slide

15. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    MORE INFO
    Provide instant feedback to the user where appropriate
    Use placeholder content to populate the page when no
    content is available
    01
    02
    14/16
    

    View Slide

16. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    DESIGNERS WPO CHECKLIST
    VIEW CHECKLIST
    15/16
    

    View Slide

17. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
    THANK YOU
    16/16
    

    View Slide