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 full-size slide

  2. Yesenia Perez-Cruz

    Philadelphia, PA

    View full-size slide

  3. How I designed a 

    very slow, very heavy
    site without knowing it

    View full-size slide

  4. Hand-done
    Weathered
    Layered Textures

    View full-size slide

  5. Encourage
    Voting
    Sharing

    View full-size slide

  6. Required ads
    Video stream
    Social plug-ins

    View full-size slide

  7. “We need more
    texture”

    View full-size slide

  8. “…and a parallax
    background.”

    View full-size slide

  9. Sorry everybody.

    :’(

    View full-size slide

  10. I’m a 

    designer.

    View full-size slide

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

    View full-size slide

  12. “…and the client 

    loved it!”
    —a sad, angry developer

    View full-size slide

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

    View full-size slide

  14. Here’s the
    thing…

    View full-size slide

  15. “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 full-size slide

  16. Development
    Design
    Research
    Biz dev
    Launch
    Development
    Design
    Research
    Biz dev

    View full-size slide

  17. Development
    Design
    Biz dev
    Launch
    Development
    Design
    Research
    Biz dev

    View full-size slide

  18. Development
    Design
    Biz dev
    Launch
    Development
    Design
    Research
    Biz dev

    View full-size slide

  19. Slow, heavy sites
    are a result of…

    View full-size slide

  20. Poor 

    planning

    View full-size slide

  21. Poor
    communication

    View full-size slide

  22. Poor 

    awareness

    View full-size slide

  23. Design is a
    balancing act

    View full-size slide

  24. Business
    goals
    User
    needs

    View full-size slide

  25. How will this navigation
    structure help guide users?

    View full-size slide

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

    View full-size slide

  27. How will this content help
    drive conversions?

    View full-size slide

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

    View full-size slide

  29. “Our new branding
    has 12 typefaces.”

    View full-size slide

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

    View full-size slide

  31. How many requests
    will this carousel add?

    View full-size slide

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

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  35. What will be the 

    best user experience 

    overall?

    View full-size slide

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

    View full-size slide

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

    Performance is…

    View full-size slide

  38. Your audience
    wants content fast.

    View full-size slide

  39. 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 full-size slide

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

    we’ll lose them.

    View full-size slide

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

    View full-size slide

  42. …but sites keep
    getting larger

    View full-size slide

  43. 2.16MB
    Average size of websites

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Design for
    Performance

    View full-size slide

  48. Think about performance
    from the beginning
    1

    View full-size slide

  49. Set a performance
    budget
    2

    View full-size slide

  50. Communicate
    3

    View full-size slide

  51. Share work
    constantly
    4

    View full-size slide

  52. Performance 

    as a project goal

    View full-size slide

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

    View full-size slide


  54. –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 full-size slide

  55. Performance is a
    design feature
    Not a technical concern

    View full-size slide

  56. Development
    Design
    Research
    Biz dev
    Think about
    performance!

    View full-size slide

  57. Create a UX
    Assessment

    View full-size slide

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

    View full-size slide

  59. Share Case
    Studies

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. 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 full-size slide

  64. Performance
    budgets

    View full-size slide


  65. –Charles Eames
    Design depends
    largely on
    constraints.

    View full-size slide

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

    View full-size slide


  67. –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 full-size slide


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

    View full-size slide

  69. Overall
    CSS
    Images
    JS

    View full-size slide

  70. Overall
    CSS
    Images
    JS

    View full-size slide

  71. Overall
    CSS
    Images
    JS

    View full-size slide

  72. Defining a
    Performance
    Budget

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. Setting Your
    Budget

    View full-size slide

  76. Look to
    your pages

    View full-size slide

  77. webpagetest.org

    View full-size slide

  78. webpagetest.org

    View full-size slide

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

    View full-size slide

  80. Look to your
    competitors

    View full-size slide

  81. WebPagetest - Visual Comparison

    View full-size slide

  82. WebPagetest - Visual Comparison

    View full-size slide

  83. WebPagetest - Visual Comparison

    View full-size slide


  84. –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 full-size slide

  85. Start render: 2 seconds
    Weight: 192kb

    View full-size slide

  86. Weight: 192kb
    IMGS
    JS
    CSS
    HTML
    WEBFONTS

    View full-size slide

  87. Weight: 192kb
    IMGS
    JS
    CSS
    HTML
    WEBFONTS

    View full-size slide

  88. Weight: 192kb
    IMGS
    JS
    CSS
    HTML

    View full-size slide

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

    View full-size slide

  90. Performance is a 

    marketable feature.

    View full-size slide

  91. WebPagetest - Visual Comparison

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  94. Customer 

    Goals

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  97. Business
    Goals

    View full-size slide

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

    View full-size slide

  99. Performance
    Mission

    View full-size slide

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

    View full-size slide

  101. Performance budget:

    600kb per page

    View full-size slide

  102. Challenges…

    View full-size slide

  103. Branding changes
    during project

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  106. +
    Option A is
    3 weights of
    Whitney 

    for body copy
    1 weight of
    Knockout 

    for headings

    View full-size slide

  107. Option B is
    3 weights of
    Knockout 

    for headings
    System 

    fonts

    for body copy
    +

    View full-size slide

  108. with

    CSS Mask-
    Image

    View full-size slide

  109. Which is a better
    translation of your brand?

    View full-size slide

  110. .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 full-size slide

  111. Unexpected
    Feedback

    View full-size slide

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

    View full-size slide

  113. “We NEED a carousel 

    at the top.”

    View full-size slide

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

    View full-size slide

  115. 700kb

    in images and JS
    This carousel alone will cost…

    View full-size slide

  116. 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 full-size slide

  117. 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 full-size slide

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

    View full-size slide

  119. Delivering 

    the news…

    View full-size slide

  120. Washington 

    Post

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  123. Challenges:
    Required ads
    Image heavy
    Slower bandwidths

    View full-size slide

  124. Required Ads

    View full-size slide

  125. Initial ad load size on mobile:

    ~160kb

    View full-size slide

  126. Designing on a
    Budget

    View full-size slide

  127. Re-usable patterns

    View full-size slide

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

    View full-size slide

  129. Alpha Alpha with ‘live’ flag Alpha sponsored

    View full-size slide

  130. Get designs into 

    code earlier

    View full-size slide

  131. Filament Group

    View full-size slide


  132. –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 full-size slide

  133. Adaptive Responsive

    View full-size slide

  134. Grunt Perfbudget

    View full-size slide


  135. –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 full-size slide

  136. Communicate
    & Document

    View full-size slide

  137. Create a 

    Style Guide

    View full-size slide


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

    View full-size slide

  139. Create a 

    Style Guide
    Yelp Style Guide

    View full-size slide

  140. Create a 

    Style Guide
    Trulia Style Guide

    View full-size slide

  141. • 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 full-size slide

  142. Beauty Function
    vs

    View full-size slide

  143. Beautiful user
    experiences

    View full-size slide

  144. Include performance in 

    project documents.
    1

    View full-size slide

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

    View full-size slide

  146. Test on real
    devices.
    3

    View full-size slide

  147. Collaborate
    4

    View full-size slide

  148. Educate &
    Document
    5

    View full-size slide

  149. Thank you! @yeseniaa

    View full-size slide