Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Decisions Through The Lens of a Performance Budget

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.

Yesenia Perez-Cruz

September 15, 2014
Tweet

More Decks by Yesenia Perez-Cruz

Other Decks in Design

Transcript

  1. An Event Apart DC
    Design Decisions 

    through the Lens of
    Performance
    @yeseniaa

    View Slide

  2. Yesenia Perez-Cruz

    Philadelphia, PA

    View Slide

  3. How I designed a 

    very slow, very heavy
    site without knowing it

    View Slide

  4. Hand-done
    Weathered
    Layered Textures

    View Slide

  5. Encourage
    Voting
    Sharing

    View Slide

  6. Required ads
    Video stream
    Social plug-ins

    View Slide

  7. “We need more
    texture”

    View Slide

  8. View Slide

  9. “…and a parallax
    background.”

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. Sorry everybody.

    :’(

    View Slide

  14. View Slide

  15. I’m a 

    designer.

    View Slide

  16. “The designer added
    5 carousels again.”
    —a sad, angry developer

    View Slide

  17. “…and the client 

    loved it!”
    —a sad, angry developer

    View Slide

  18. “Stupid designer!!!”
    —a sad, angry developer

    View Slide

  19. Here’s the
    thing…

    View Slide

  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)

    View Slide

  21. Development
    Design
    Research
    Biz dev
    Launch
    Development
    Design
    Research
    Biz dev

    View Slide

  22. Development
    Design
    Biz dev
    Launch
    Development
    Design
    Research
    Biz dev

    View Slide

  23. Development
    Design
    Biz dev
    Launch
    Development
    Design
    Research
    Biz dev

    View Slide

  24. Slow, heavy sites
    are a result of…

    View Slide

  25. Poor 

    planning

    View Slide

  26. Poor
    communication

    View Slide

  27. Poor 

    awareness

    View Slide

  28. Design is a
    balancing act

    View Slide

  29. Business
    goals
    User
    needs

    View Slide

  30. How will this navigation
    structure help guide users?

    View Slide

  31. Does the team have the
    internal resources to support
    this illustrative art direction?

    View Slide

  32. How will this content help
    drive conversions?

    View Slide

  33. Fast
    Functional
    Light-weight
    Beautiful
    Memorable
    On-brand
    vs

    View Slide

  34. “Our new branding
    has 12 typefaces.”

    View Slide

  35. “We need a carousel to
    make the design pop.”

    View Slide

  36. How many requests
    will this carousel add?

    View Slide

  37. How will perceived
    performance be impacted
    if we add a new font?

    View Slide


  38. –Steve Souders
    It’s time to discuss design
    and performance together…
    http://designingforperformance.com/foreword-souders/

    View Slide


  39. –Steve Souders
    …not as a debate, but as a
    collaboration that results in a
    beautiful user experience.
    http://designingforperformance.com/foreword-souders/

    View Slide

  40. What will be the 

    best user experience 

    overall?

    View Slide

  41. How quickly your web pages
    load on your users’ screens.
    Performance is…

    View Slide

  42. How quickly you can deliver your
    sites and services to your audience. 

    Performance is…

    View Slide

  43. Your audience
    wants content fast.

    View Slide

  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

    View Slide

  45. If we don’t respect our
    users’ time and bandwidth, 

    we’ll lose them.

    View Slide

  46. Global network speeds vary greatly.
    http://www.ericsson.com/res/docs/2014/ericsson-mobility-report-june-2014.pdf

    View Slide

  47. …but sites keep
    getting larger

    View Slide

  48. 2.16MB
    Average size of websites

    View Slide

  49. Images
    Custom web fonts
    Interactions
    Stylesheets
    Third-party scripts
    Impacted by…

    View Slide

  50. http://httparchive.org/interesting.php

    View Slide

  51. http://httparchive.org/interesting.php

    View Slide

  52. Design for
    Performance

    View Slide

  53. Think about performance
    from the beginning
    1

    View Slide

  54. Set a performance
    budget
    2

    View Slide

  55. Communicate
    3

    View Slide

  56. Share work
    constantly
    4

    View Slide

  57. Performance 

    as a project goal

    View Slide

  58. Development
    Design
    Research
    Biz dev
    Think about
    performance?
    Development
    Design
    Research
    Biz dev

    View Slide


  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.

    View Slide

  60. Performance is a
    design feature
    Not a technical concern

    View Slide

  61. Development
    Design
    Research
    Biz dev
    Think about
    performance!

    View Slide

  62. Create a UX
    Assessment

    View Slide

  63. Identify strengths and
    weaknesses of the current user
    experience, including
    ‣ Usability
    ‣ Content
    ‣ Navigation
    ‣ Information architecture
    ‣ Performance
    ‣ Workflow
    ‣ Brand

    View Slide

  64. Share Case
    Studies

    View Slide

  65. Amazon
    observed a 1%
    decrease in
    revenue for every
    100ms added to
    page load.

    View Slide

  66. For every 1 second
    that page load time
    decreased,
    Walmart saw up to
    a 2% increase in
    conversions.

    View Slide

  67. Meet the Obama campaign's $250 million fundraising platform
    http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

    View Slide

  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.

    View Slide

  69. Performance
    budgets

    View Slide


  70. –Charles Eames
    Design depends
    largely on
    constraints.

    View Slide

  71. A performance budget is a
    tangible way to start
    talking about performance.

    View Slide


  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.

    View Slide


  73. –Mark Perkins
    The important point is to look at
    every decision, right through the
    design/build process, as something
    that has consequence…

    View Slide

  74. View Slide

  75. Overall
    CSS
    Images
    JS

    View Slide

  76. Overall
    CSS
    Images
    JS

    View Slide

  77. Overall
    CSS
    Images
    JS

    View Slide

  78. Defining a
    Performance
    Budget

    View Slide

  79. ie. Our pages should weigh no more
    than 400kb, and make no more
    than 15 requests.
    Browser Experience

    View Slide

  80. ie. Our pages should take no more
    than 10 seconds to load over a
    sub-3G connection.
    User Experience Budget

    View Slide

  81. Setting Your
    Budget

    View Slide

  82. Look to
    your pages

    View Slide

  83. webpagetest.org

    View Slide

  84. webpagetest.org

    View Slide

  85. 1. Page weight
    2. Start Render
    3. Fully Loaded

    View Slide

  86. Look to your
    competitors

    View Slide

  87. WebPagetest - Visual Comparison

    View Slide

  88. WebPagetest - Visual Comparison

    View Slide

  89. WebPagetest - Visual Comparison

    View Slide


  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/

    View Slide

  91. Start render: 2 seconds
    Weight: 192kb

    View Slide

  92. Weight: 192kb
    IMGS
    JS
    CSS
    HTML
    WEBFONTS

    View Slide

  93. Weight: 192kb
    IMGS
    JS
    CSS
    HTML
    WEBFONTS

    View Slide

  94. Weight: 192kb
    IMGS
    JS
    CSS
    HTML

    View Slide

  95. Delivering
    pizza…
    https://www.flickr.com/photos/camknows

    View Slide

  96. View Slide

  97. Performance is a 

    marketable feature.

    View Slide

  98. WebPagetest - Visual Comparison

    View Slide

  99. 1.3MB 926 KB 7.1MB 587.7 KB
    (191.6 KB for JS)
    1.2MB
    Home Page Weight—Initial Load

    View Slide

  100. To order a medium 2 topping pizza...
    20.1 MB
    11.6 MB
    6.9MB
    1231
    1661
    411
    DATA TRANSFERRED REQUESTS

    View Slide

  101. Customer 

    Goals

    View Slide

  102. “We need to give our
    customers a quality
    experience.”

    View Slide

  103. “Quality is stability,
    performance &
    reliability.”

    View Slide

  104. Business
    Goals

    View Slide

  105. Higher Customer Check/order
    Increased Online Ordering
    Decreased Call Center Volume

    View Slide

  106. Performance
    Mission

    View Slide

  107. “The goal of this project is
    to create a beautiful,
    flexible, lightning-fast
    experience…”

    View Slide

  108. Performance budget:

    600kb per page

    View Slide

  109. Challenges…

    View Slide

  110. Branding changes
    during project

    View Slide

  111. View Slide

  112. My font budget*
    100kb
    600kb
    Fonts
    *desktop

    View Slide

  113. You have 100kb
    to “spend” on
    web fonts.

    View Slide

  114. +
    Option A is
    3 weights of
    Whitney 

    for body copy
    1 weight of
    Knockout 

    for headings

    View Slide

  115. Option B is
    3 weights of
    Knockout 

    for headings
    System 

    fonts

    for body copy
    +

    View Slide

  116. with

    CSS Mask-
    Image

    View Slide

  117. Which is a better
    translation of your brand?

    View Slide

  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)

    View Slide

  119. Unexpected
    Feedback

    View Slide

  120. Secondary carousel
    Static hero image
    1
    2
    Images
    JS
    1
    2
    600kb
    Budget
    Video

    View Slide

  121. “We NEED a carousel 

    at the top.”

    View Slide

  122. Secondary carousel
    1
    2
    Images
    JS
    1
    2
    600kb
    Budget
    Video
    Top carousel (4 slides):
    700kb

    View Slide

  123. 700kb

    in images and JS
    This carousel alone will cost…

    View Slide

  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.

    View Slide

  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

    View Slide

  126. http://httparchive.org/interesting.php#bytesperpage

    View Slide

  127. ImageOptim

    View Slide

  128. Delivering 

    the news…

    View Slide

  129. USA Today

    View Slide

  130. NY Times

    View Slide

  131. Washington 

    Post

    View Slide

  132. “…articles load
    instantly, as much
    as 10 times faster
    than the standard
    mobile web.”

    View Slide

  133. Goal:
    Deliver the news quickly,
    esp. to mobile
    audiences.

    View Slide

  134. Challenges:
    Required ads
    Image heavy
    Slower bandwidths

    View Slide

  135. View Slide

  136. Required Ads

    View Slide

  137. Initial ad load size on mobile:

    ~160kb

    View Slide

  138. Designing on a
    Budget

    View Slide

  139. View Slide

  140. Re-usable patterns

    View Slide

  141. View Slide

  142. Don’t add a style
    you don’t need.

    View Slide

  143. Alpha Alpha with ‘live’ flag Alpha sponsored

    View Slide

  144. Get designs into 

    code earlier

    View Slide

  145. Filament Group

    View Slide


  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.

    View Slide

  147. View Slide

  148. View Slide

  149. Adaptive Responsive

    View Slide

  150. Grunt Perfbudget

    View Slide


  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.

    View Slide

  152. Communicate
    & Document

    View Slide

  153. Create a 

    Style Guide

    View Slide


  154. –Lara Hogan
    Style guides showcase the
    best way to implement
    code & request assets.

    View Slide

  155. Create a 

    Style Guide
    Yelp Style Guide

    View Slide

  156. Create a 

    Style Guide
    Trulia Style Guide

    View Slide

  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/

    View Slide

  158. Beauty Function
    vs

    View Slide

  159. Beautiful user
    experiences

    View Slide

  160. Include performance in 

    project documents.
    1

    View Slide

  161. Get designs into the browser as
    soon as possible.
    2

    View Slide

  162. Test on real
    devices.
    3

    View Slide

  163. Collaborate
    4

    View Slide

  164. Educate &
    Document
    5

    View Slide

  165. Thank you! @yeseniaa

    View Slide