Design Decisions Through The Lens of a Performance Budget

We design sites for a myriad of devices with varying connection speeds. More and more, we’re discovering the importance of fast page speed. Even 100 millisecond delays in load times negatively impact user experience and conversions.

The problem is, making a site fast and lightweight is often at odds with other design goals—like creating visually immersive experiences or meeting all of an organization’s rich-media ad requirements. While a stripped-down site with no images, set entirely in Arial, is certainly going to be light, it’s not going to accomplish all of our client’s business goals.

In this talk, Yesenia will discuss how we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well.

Transcript

1. An Event Apart DC Design Decisions 
 through the Lens of Performance @yeseniaa
2. Yesenia Perez-Cruz
 Philadelphia, PA
3. How I designed a 
 very slow, very heavy site without knowing it
4. Hand-done Weathered Layered Textures
5. Encourage Voting Sharing
6. Required ads Video stream Social plug-ins
7. “We need more texture”
9. “…and a parallax background.”
13. Sorry everybody.
 :’(
15. I’m a 
 designer.
16. “The designer added 5 carousels again.” —a sad, angry developer
17. “…and the client 
 loved it!” —a sad, angry developer
18. “Stupid designer!!!” —a sad, angry developer
19. Here’s the thing…
20. “I’m going to design a super slow site that will be a pain to code and no one will want to use!” —no one (I hope)
21. Development Design Research Biz dev Launch Development Design Research Biz dev
22. Development Design Biz dev Launch Development Design Research Biz dev
23. Development Design Biz dev Launch Development Design Research Biz dev
24. Slow, heavy sites are a result of…
25. Poor 
 planning
26. Poor communication
27. Poor 
 awareness
28. Design is a balancing act
29. Business goals User needs
30. How will this navigation structure help guide users?
31. Does the team have the internal resources to support this illustrative art direction?
32. How will this content help drive conversions?
33. Fast Functional Light-weight Beautiful Memorable On-brand vs
34. “Our new branding has 12 typefaces.”
35. “We need a carousel to make the design pop.”
36. How many requests will this carousel add?
37. How will perceived performance be impacted if we add a new font?
38. “ –Steve Souders It’s time to discuss design and performance together… http://designingforperformance.com/foreword-souders/
39. “ –Steve Souders …not as a debate, but as a collaboration that results in a beautiful user experience. http://designingforperformance.com/foreword-souders/
40. What will be the 
 best user experience 
 overall?
41. How quickly your web pages load on your users’ screens. Performance is…
42. How quickly you can deliver your sites and services to your audience. 
 Performance is…
43. Your audience wants content fast.
44. Online shoppers expected pages to load in 
 2 seconds — and at 3 seconds, 
 a large share abandon the site. “For Impatient Web Users, an Eye Blink Is Just Too Long to Wait,” New York Times, February 29, 2012 http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
45. If we don’t respect our users’ time and bandwidth, 
 we’ll lose them.
46. Global network speeds vary greatly. http://www.ericsson.com/res/docs/2014/ericsson-mobility-report-june-2014.pdf
47. …but sites keep getting larger
48. 2.16MB Average size of websites
49. Images Custom web fonts Interactions Stylesheets Third-party scripts Impacted by…
50. http://httparchive.org/interesting.php
51. http://httparchive.org/interesting.php
52. Design for Performance
53. Think about performance from the beginning 1
54. Set a performance budget 2
55. Communicate 3
56. Share work constantly 4
57. Performance 
 as a project goal
58. Development Design Research Biz dev Think about performance? Development Design Research Biz dev
59. “ –Tim Kadlec …deciding a page can’t exceed 500kB when a mock-up containing three carousels and a full-screen high-resolution background image has already been approved isn’t going to do you much good.
60. Performance is a design feature Not a technical concern
61. Development Design Research Biz dev Think about performance!
62. Create a UX Assessment
63. Identify strengths and weaknesses of the current user experience, including ‣ Usability ‣ Content ‣ Navigation ‣ Information architecture ‣ Performance ‣ Workflow ‣ Brand
64. Share Case Studies
65. Amazon observed a 1% decrease in revenue for every 100ms added to page load.
66. For every 1 second that page load time decreased, Walmart saw up to a 2% increase in conversions.
67. Meet the Obama campaign's $250 million fundraising platform http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
68. Meet the Obama campaign's $250 million fundraising platform 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.
69. Performance budgets
70. “ –Charles Eames Design depends largely on constraints.
71. A performance budget is a tangible way to start talking about performance.
72. “ –Mark Perkins Having a pre-defined ‘budget’ is a clear, tangible way to frame decisions about what can and can’t be be included, and at a suitably early stage in the project.
73. “ –Mark Perkins The important point is to look at every decision, right through the design/build process, as something that has consequence…
75. Overall CSS Images JS
76. Overall CSS Images JS
77. Overall CSS Images JS
78. Defining a Performance Budget
79. ie. Our pages should weigh no more than 400kb, and make no more than 15 requests. Browser Experience
80. ie. Our pages should take no more than 10 seconds to load over a sub-3G connection. User Experience Budget
81. Setting Your Budget
82. Look to your pages
83. webpagetest.org
84. webpagetest.org
85. 1. Page weight 2. Start Render 3. Fully Loaded
86. Look to your competitors
87. WebPagetest - Visual Comparison
88. WebPagetest - Visual Comparison
89. WebPagetest - Visual Comparison
90. “ –Dan Mall One byte = 8 bits, so 3G translates roughly to about 
 96 kilobytes per second. http://danielmall.com/articles/how-to-make-a-performance-budget/
91. Start render: 2 seconds Weight: 192kb
92. Weight: 192kb IMGS JS CSS HTML WEBFONTS
93. Weight: 192kb IMGS JS CSS HTML WEBFONTS
94. Weight: 192kb IMGS JS CSS HTML
95. Delivering pizza… https://www.flickr.com/photos/camknows
97. Performance is a 
 marketable feature.
98. WebPagetest - Visual Comparison
99. 1.3MB 926 KB 7.1MB 587.7 KB (191.6 KB for JS) 1.2MB Home Page Weight—Initial Load
100. To order a medium 2 topping pizza... 20.1 MB 11.6 MB 6.9MB 1231 1661 411 DATA TRANSFERRED REQUESTS
101. Customer 
 Goals
102. “We need to give our customers a quality experience.”
103. “Quality is stability, performance & reliability.”
104. Business Goals
105. Higher Customer Check/order Increased Online Ordering Decreased Call Center Volume
106. Performance Mission
107. “The goal of this project is to create a beautiful, flexible, lightning-fast experience…”
108. Performance budget:
 600kb per page
109. Challenges…
110. Branding changes during project
112. My font budget* 100kb 600kb Fonts *desktop
113. You have 100kb to “spend” on web fonts.
114. + Option A is 3 weights of Whitney 
 for body copy 1 weight of Knockout 
 for headings
115. Option B is 3 weights of Knockout 
 for headings System 
 fonts
 for body copy +
116. with
 CSS Mask- Image
117. Which is a better translation of your brand?
118. .Alpha (56/60) .Beta (43/45) .Gamma (28/30) .DELTA (19/22) paragraph (17) .Alpha (56/60) .Beta (43/45) .Gamma (28/30) .DELTA (19/22) paragraph (17)
119. Unexpected Feedback
120. Secondary carousel Static hero image 1 2 Images JS 1 2 600kb Budget Video
121. “We NEED a carousel 
 at the top.”
122. Secondary carousel 1 2 Images JS 1 2 600kb Budget Video Top carousel (4 slides): 700kb
123. 700kb 
 in images and JS This carousel alone will cost…
124. 1. Optimize an existing feature or asset on the page. 2.Remove an existing feature or asset from the page. 3.Don’t add the new feature or asset.
125. 1. Don’t add the carousel. 2. Lazy load images that are not in the viewport on page load. 3. Load the video on click instead of on page load. Some options are
126. http://httparchive.org/interesting.php#bytesperpage
127. ImageOptim
128. Delivering 
 the news…
129. USA Today
130. NY Times
131. Washington 
 Post
132. “…articles load instantly, as much as 10 times faster than the standard mobile web.”
133. Goal: Deliver the news quickly, esp. to mobile audiences.
134. Challenges: Required ads Image heavy Slower bandwidths
136. Required Ads
137. Initial ad load size on mobile:
 ~160kb
138. Designing on a Budget
140. Re-usable patterns
142. Don’t add a style you don’t need.
143. Alpha Alpha with ‘live’ flag Alpha sponsored
144. Get designs into 
 code earlier
145. Filament Group
146. “ –Scott Jehl We can often deliver a usable representation of a web page’s content very quickly, even if that page is quite large and asset-heavy as a whole.
149. Adaptive Responsive
150. Grunt Perfbudget
151. “ –Cat Farman This wonderful Grunt task uses the WebPageTest.org API to measure your site against a ton of useful metrics like page weight, image sizes, script weight, and rendering time.
152. Communicate & Document
153. Create a 
 Style Guide
154. “ –Lara Hogan Style guides showcase the best way to implement code & request assets.
155. Create a 
 Style Guide Yelp Style Guide
156. Create a 
 Style Guide Trulia Style Guide
157. • Their HTML is 48% smaller • 21% faster load time • 60% faster time to first byte • Reduced unused CSS by 135kb http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/
158. Beauty Function vs
159. Beautiful user experiences
160. Include performance in 
 project documents. 1
161. Get designs into the browser as soon as possible. 2
162. Test on real devices. 3
163. Collaborate 4
164. Educate & Document 5
165. Thank you! @yeseniaa