Steve Souders's talk was about how design and performance go hand-in-hand, like yin and yang.
Principles
- It’s not one gains and the other loses, design and performance should be complementary
- “I used to be a reckless designer” said by one of the designer he knows, but it turns out, the pretty pages she designed took 2 minutes to load.
- Sometime it’s hard to correlate business goal with technical performance. Solution is to come up with metrics earlier
- On mobile in particular, the page load needs to be faster to be considered as good design. Google came out new ranking on mobile search where the mobile-friendlyness will affect the ranking
Solutions
- Possible solution: don’t separate design and developers, and maybe have them sit together from the very beginning
- Define guiding principles: figure out what users are after, what’s important to this product, what’s the most important element on the page. One example of a news mobile site “Speed is more important than design embellishment"
- Prototype earlier and measure performance in prototype
- Performance budgets: google has hard limit about the javascript download size. It’s a hard limit where you can add feature when you don’t go over the size. If you do, take down some other stuff
- show the data loading time while implementing
- window.onload is NOT the best metric for measuring website speed (page load time isn’t providing the proximation of user experience). Page load time could be too optimistic/critical
- We need to get metrics to have closer proximation of user experience
- Tool
- Web Page Test : speed index is important
- SpeedCurve
- Hero image usually takes 3 sec to load. Hero image delay: it’s not only the downloading take times, even when it’s fast, because it’s in the css and css needs to be downloaded first. And it has to wait till other javascript and css to be rendered first. However, if it's important image, downloaded first.
- User experience and business goal could be inline with each other
- what’s the most critical design element on the page and focus on those performance
- Designing for UX performance