Which would you rather have: A rich design or a fast user experience? Users want both, but sometimes the interplay between design and performance feels like a fixed sum game: One side’s gain is the other side’s loss. Design and performance are indeed connected, but it’s more like the yin and yang. They aren’t opposing forces, but instead complement each other. Users want an experience that is rich and fast. The trick for us as designers and developers is figuring out how to do that. The answer is to adopt an approach that considers both design and performance from the outset. With this approach, designs are conceived by teams of designers and developers working together. Developers benefit by participating in the product definition process. Designers benefit from understanding more about how designs are implemented. There’s an emphasis on early prototyping and tracking performance from the get-go. With new metrics that focus on what a user actually sees as the page loads, we can now bridge the technical and language gaps that have hindered the seamless creation of great user experiences. In this presentation, Steve Souders, former Chief Performance Yahoo! and Google head performance engineer, explains how promoting a process that brings design and performance together at the beginning of a project helps deliver a web experience that is both fast and rich.

1. Design + Performance
Steve Souders
@souders

2. bringing designers &
developers closer together

3. flickr.com/photos/timdorr

4. flickr.com/photos/easyflow

6. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

7. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

8. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

9. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

10. http://en.oreilly.com/velocity2009/public/schedule/detail/8523

11. http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
“We made the new platform 60% faster and
this resulted in a 14% increase in donation
conversions.”

12. “To stay in Google's good graces, websites
must be designed so they load quickly on
mobile devices.”

13. designers & developers
often work in silos
some designs are hard
to make fast
being fast is important
flickr.com/photos/jronaldlee

14. Design + Performance
flickr.com/photos/easyflow

15. small interdisciplinary teams

16. guiding principles
flickr.com/photos/nihaogirl

17. Speed is more important
than design embellishment.
People are filling
small gaps in their
day with news. It
must load fast on all
touchpoints.
The design should
feel light and nimble,
always fresh and up
to date. Never
heavy, slow to load
or clogged up with
content.
Users expect sites
to render in under 2
seconds.
DAN/TBWA

18. prototype early

19. measure performance from the start
flickr.com/photos/josterpi

20. performance budgets

21. https://speakerdeck.com/lara/mobile-web-at-etsy
in-page reminders
show what’s beaconed
bookmarklets

22. “window.onload is not the best
metric for measuring website
speed”

23. 99% ATF rendered: 2.0s onload: 9.7s
onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic
too critical

24. flickr.com/photos/goincase

26. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

27. flickr.com/photos/cataniamichele

28. filmstrips

29. video

30. image
flickr.com/photos/jdhancock

32. Hero Image Delay (HID)

33. 540 ms
647 ms
}
} hero

35. Hero Image Delay (HID)

36. 2079 ms
}
hero

38. Hero Image Delay (HID)

39. 685 ms
}
hero

40. <script
src="https://a2.muscache.com/airbnb/static/packages/libs_jquery_2x-
2400ba132b989cbe0d764c167aeb3c90.js" type="text/javascript"></script>
<script src="https://a0.muscache.com/airbnb/static/packages/o2.1-
67faf5923bd9dfeef978ce1ebedc4064.js" type="text/javascript"></script>
<script src="https://a2.muscache.com/airbnb/static/packages/core-
dacee509c4b23722d12e97419abc3534.js" type="text/javascript"></script>
<script>
Airbnb.init();
</script>
<div id="fb-root"></div>
<script src="https://a2.muscache.com/airbnb/static/packages/homepage-
aac92caeb0a5472192581decde9d1f6b.js" type="text/javascript"></script>
</body>
</html>
when do scripts at the
bottom get loaded?

41. 238K238K gzipped238K gzipped
797K UNgzipped!
hero
685 ms
}

42. custom metrics
define most important
elements on the page
measure using User Timing
track with RUM and synthetic

43. https://blog.twitter.com/2012/improving-performance-on-twittercom

45. <script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
<img src="1-second.jpg">
actual image display: ~5200 ms

47. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
performance
.getEntriesByName("hero.jpg")[0]
.duration

48. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
<img src="hero.jpg"
onload=
"performance.mark('hero')">

49. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
var observer =
new MutationObserver(obsCallback);
observer.observe(document,
{ childList: true, attributes: true,
subtree: true });

50. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
function imagePolling() {
var hero =
document.getElementById('hero');
if ( hero.offsetHeight ) {
performance.mark('hero'); }
else {
setTimeout(imagePolling, 100); }
}

51. <head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
actual image display: ~5200 ms
<img src="hero.jpg">
<script>
performance.mark("hero");
</script>

52. <img src="7-seconds.jpg">
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>

53. max(image onload, inline script)
<img src="hero.jpg"
onload="performance.mark('hero1')">
<script>
performance.mark("hero2");
</script>
when is image displayed?

54. custom metrics

55. custom metrics
All Ads Rendered

56. digitaljournal.com

57. identify what matters most
focus on UX performance
define custom metrics!
flickr.com/photos/myklroventine
takeaways

59. @souders
http://stevesouders.com/talks