Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Designers Guide to Web Perfornance Optimization

Jon Yablonski
September 14, 2016

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.

Jon Yablonski

September 14, 2016
Tweet

More Decks by Jon Yablonski

Other Decks in Design

Transcript

  1. Performant web experiences begin with treating performance as an essential

    design feature. 01/16 DESIGNERS GUIDE TO WEB PERFORMANCE OPTIMIZATION
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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