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

2. Bringing designers & developers
closer together

3. flickr.com/photos/timdorr

11. …shaved 2.2 seconds off the
average page load time and
increased download
conversions by 15.4%!

12. We made the new platform 60%
faster and this resulted in a 14%
increase in donation conversions.

13. blog.mozilla.com/metrics/category/website-optimization/
…shaved 2.2 seconds off the
average page load time and
increased download
conversions by 15.4%!

16. “traffic jumped from 6M to 11M uniques…
time spent on site rose from 5.9 to 7.8 minutes…
interaction rate on ads rose 108%”

17. Screen shot of blog post…we've decided to take site
speed into account in our
search rankings.

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

19. Fast is Good

21. Designers & developers
often work in silos

22. Designers & developers
often work in silos
Some designs are hard
to make fast

23. Designers & developers
often work in silos
Some designs are hard
to make fast
Being fast is important

25. Small Interdisciplinary Teams

27. Guiding Principles
flickr.com/photos/nihaogirl

28. 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 nibble, always
fresh and up to date.
Never heavy, slow to load
or clogged up with
content.
Users expect sites to load
in under 2 seconds.
DAN/TBWA
TVNZ News

29. Engage quickly and then make it feel
like you're there.
Tourists are making a big
important decision so
they want to know that
it's worth it.
People need to know they
are in the right place -
hook them immediately
with engaging imagery.
Unobtrusively stream in
lots of rich content.
DAN/TBWA
Tourism New Zealand

30. Prototype Early

31. DAN/TBWA

32. Tourism New Zealand

36. First layer with 1 sprite sheet (34k)

37. Second layer of 2 sprite sheets (117k)

38. Third layer of 8 sprite sheets (829k)

39. 201 high quality frames (22.6MB)

40. We're designing timelines
not static pages

41. UX Content flow

42. Measuring Performance

43. Filmstrips

44. Videos

46. Navigation Timing
overall page metrics
performance.timing,.now()
Resource Timing
individual HTTP requests
performance.getEntries()
User Timing
custom metrics
performance.mark(),.measure()
W3C Web Timing Specs

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

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

49. Not all
pixels are
the same.

50. flickr.com/photos/15609463@N03

52. flickr.com/photos/kk

53. Custom Metrics

54. Custom Metrics
Define most important elements on the page

55. Custom Metrics
Define most important elements on the page
Measure using User Timing

56. Custom Metrics
Define most important elements on the page
Measure using User Timing
Track with RUM and synthetic

59. image load time
custom metric
<div class="stream-item-header">
<a class="account-group js-account-group js-action-profile js-
user-profile-link js-nav" href="/ericlaw" data-user-id="5725652">
<img class="avatar js-action-profile-avatar" src="https://
pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="">
<strong class="fullname js-action-profile-name show-popup-with-
id" data-aria-label-part> Eric Lawrence </strong>
DISPLAY

60. image load time
custom metric
<div class="stream-item-header">
<a class="account-group js-account-group js-action-profile js-
user-profile-link js-nav" href="/ericlaw" data-user-id="5725652">
<img class="avatar js-action-profile-avatar" src="https://
pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="">
<strong class="fullname js-action-profile-name show-popup-with-
id" data-aria-label-part> Eric Lawrence </strong>
DISPLAY

61. <div class="stream-item-header">
<a class="account-group js-account-group js-action-profile js-
user-profile-link js-nav" href="/ericlaw" data-user-id="5725652">
<img class="avatar js-action-profile-avatar" src="https://
pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""
onload="performance.measure('imgDisplayed')">
<strong class="fullname js-action-profile-name show-popup-with-
id" data-aria-label-part> Eric Lawrence </strong>
image load time
custom metricDISPLAY

62. image load time
custom metric
<link rel="stylesheet" href="/huge-slow.css">
<div class="stream-item-header">
<a class="account-group js-account-group js-action-profile js-
user-profile-link js-nav" href="/ericlaw" data-user-id="5725652">
<img class="avatar js-action-profile-avatar" src="https://
pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""
onload="performance.measure('imgDisplayed')">
<strong class="fullname js-action-profile-name show-popup-with-
id" data-aria-label-part> Eric Lawrence </strong>
DISPLAY

63. image load time
custom metric
<link rel="stylesheet" href="/huge-slow.css">
<script>
performance.measure('imgDisplayed');
</script>
<div class="stream-item-header">
<a class="account-group js-account-group js-action-profile js-
user-profile-link js-nav" href="/ericlaw" data-user-id="5725652">
<img class="avatar js-action-profile-avatar" src="https://
pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""
onload="performance.measure('imgDisplayed')">
<strong class="fullname js-action-profile-name show-popup-with-
id" data-aria-label-part> Eric Lawrence </strong>
DISPLAY

64. <div class="stream-item-header">
<a class="account-group js-account-group js-action-profile js-
user-profile-link js-nav" href="/ericlaw" data-user-id="5725652">
<img class="avatar js-action-profile-avatar" src="https://
pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""
onload="performance.measure('imgDisplayed')">
<strong class="fullname js-action-profile-name show-popup-with-
id" data-aria-label-part> Eric Lawrence </strong>
image load time
custom metric
<link rel="stylesheet" href="/huge-slow.css">
<script>
performance.measure('imgDisplayed');
</script>
DISPLAY

65. <div class="stream-item-header">
<a class="account-group js-account-group js-action-profile js-
user-profile-link js-nav" href="/ericlaw" data-user-id="5725652">
<img class="avatar js-action-profile-avatar" src="https://
pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""
onload="performance.clearMeasures('imgDisplayed');
performance.measure('imgDisplayed')">
<strong class="fullname js-action-profile-name show-popup-with-
id" data-aria-label-part> Eric Lawrence </strong>
image load time
custom metric
<link rel="stylesheet" href="/huge-slow.css">
<script>
performance.clearMeasures('imgDisplayed');
performance.measure('imgDisplayed');
</script>
DISPLAY

67. Custom Metrics

68. flickr.com/photos/kk
Measure content for users

69. DAN/TBWA
Small Interdisciplinary Teams

70. Time based

71. Measure your content flow

72. Have an awesome BT!