Yesenia Perez-Cruz: Design through the lens of performance

Notes from Yesenia Perez-Cruz talking about designing for performance at DiBi, these are my notes from her talk.

There's a lot that designers can do for performance, it's not only a technical issue.

The fact that content blockers are pitched as allowing users to fight back shows we're doing something wrong. We need to consider the best experience, it's not just about visual appeal.

Fast sites are trustworthy and memorable - performance is a feature. Need to be very deliberate about decisions, don't add things just for the hell of it.

Performance budgets help focus things. As much as anything it's a tool for communication, every decision has a consequence - if you want to add something then you need to remove something else. Break down your budget into components: images, fonts, CSS, JS, &c.

See also: Setting a performance budget

Just because you can use a font doesn't mean you should, adding fonts comes with a potentially significant performance cost.

Understand the tools, look at your current site and your competitors sites.

Try out different design elements and assess the impact on performance, a design might be slightly better visually but much worse for performance. Work out what's important for the design and spend the budget there - can body copy use a system font to open up more space in the budget for headline fonts.

Designing modularly can help, keeps focused on only what's actually needed. Abstract things to increase re-use, can you make a small modification on something that exists rather than creating a whole new component.

Get designs into code as early as possible. Can assess performance much better and understand the practicalities of decisions. Sometimes performance will require a design change, easier if this change is made before design changes have been signed off.

Don't be reckless - be deliberate. It's not a battle between beauty and function - it's user experience.