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. 8.
  2. 10.
  3. 11.
  4. 12.
  5. 14.
  6. 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)
  7. 38.

    “ –Steve Souders It’s time to discuss design and performance

    together… http://designingforperformance.com/foreword-souders/
  8. 39.

    “ –Steve Souders …not as a debate, but as a

    collaboration that results in a beautiful user experience. http://designingforperformance.com/foreword-souders/
  9. 42.

    How quickly you can deliver your sites and services to

    your audience. 
 Performance is…
  10. 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
  11. 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.
  12. 63.

    Identify strengths and weaknesses of the current user experience, including

    ‣ Usability ‣ Content ‣ Navigation ‣ Information architecture ‣ Performance ‣ Workflow ‣ Brand
  13. 66.

    For every 1 second that page load time decreased, Walmart

    saw up to a 2% increase in conversions.
  14. 68.
  15. 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.
  16. 73.

    “ –Mark Perkins The important point is to look at

    every decision, right through the design/build process, as something that has consequence…
  17. 74.
  18. 79.

    ie. Our pages should weigh no more than 400kb, and

    make no more than 15 requests. Browser Experience
  19. 80.

    ie. Our pages should take no more than 10 seconds

    to load over a sub-3G connection. User Experience Budget
  20. 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/
  21. 96.
  22. 99.

    1.3MB 926 KB 7.1MB 587.7 KB (191.6 KB for JS)

    1.2MB Home Page Weight—Initial Load
  23. 100.

    To order a medium 2 topping pizza... 20.1 MB 11.6

    MB 6.9MB 1231 1661 411 DATA TRANSFERRED REQUESTS
  24. 107.

    “The goal of this project is to create a beautiful,

    flexible, lightning-fast experience…”
  25. 111.
  26. 114.

    + Option A is 3 weights of Whitney 
 for

    body copy 1 weight of Knockout 
 for headings
  27. 115.

    Option B is 3 weights of Knockout 
 for headings

    System 
 fonts
 for body copy +
  28. 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)
  29. 122.

    Secondary carousel 1 2 Images JS 1 2 600kb Budget

    Video Top carousel (4 slides): 700kb
  30. 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.
  31. 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
  32. 127.
  33. 129.
  34. 130.
  35. 135.
  36. 139.
  37. 141.
  38. 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.
  39. 147.
  40. 148.
  41. 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.
  42. 154.
  43. 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/