Design Decisions Through The Lens of a Performance Budget

91cefdf141106fa10674aae74ce05890?s=47 Yesenia Perez-Cruz
September 15, 2014

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.

91cefdf141106fa10674aae74ce05890?s=128

Yesenia Perez-Cruz

September 15, 2014
Tweet

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”

  8. None
  9. “…and a parallax background.”

  10. None
  11. None
  12. None
  13. Sorry everybody.
 :’(

  14. None
  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…
  74. None
  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

  96. None
  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

  111. None
  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

  135. None
  136. Required Ads

  137. Initial ad load size on mobile:
 ~160kb

  138. Designing on a Budget

  139. None
  140. Re-usable patterns

  141. None
  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.
  147. None
  148. None
  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