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
2. Performant web experiences begin with treating performance as an essential design feature. 01/16 DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
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
4. PROCESS & WORKFLOW 03/16 DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
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
6. ANIMATIONS & EFFECTS DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 05/16
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
8. FONTS DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 07/16
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
10. IMAGES DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 09/16
12. SVG DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 11/16
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
14. PERCEIVED PERFORMANCE DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION 13/16
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
16. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION DESIGNERS WPO CHECKLIST VIEW CHECKLIST 15/16
17. DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION THANK YOU 16/16