Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design + Performance - Steve Souders & Mark Zeman

766 views

Published on

Which would you rather have: A rich design or a fast user experience? Users want both, but sometimes the interplay between design and performance feels like a fixed sum game: One side’s gain is the other side’s loss. Design and performance are indeed connected, but it’s more like the yin and yang. They aren’t opposing forces, but instead complement each other. Users want an experience that is rich and fast. The trick for us as designers and developers is figuring out how to do that.

The answer is to adopt an approach that considers both design and performance from the outset. With this approach, designs are conceived by teams of designers and developers working together. Developers benefit by participating in the product definition process. Designers benefit from understanding more about how designs are implemented. There’s an emphasis on early prototyping and tracking performance from the get-go.

With new metrics that focus on what a user actually sees as the page loads, we can now bridge the technical and language gaps that have hindered the seamless creation of great user experiences. In this presentation, Steve Souders, former Chief Performance Yahoo! and Google head performance engineer, explains how promoting a process that brings design and performance together at the beginning of a project helps deliver a web experience that is both fast and rich.

Published in: Technology
  • Be the first to comment

Design + Performance - Steve Souders & Mark Zeman

  1. 1. Design + Performance
  2. 2. Bringing designers & developers closer together
  3. 3. flickr.com/photos/timdorr
  4. 4. …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
  5. 5. We made the new platform 60% faster and this resulted in a 14% increase in donation conversions.
  6. 6. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
  7. 7. “traffic jumped from 6M to 11M uniques… time spent on site rose from 5.9 to 7.8 minutes… interaction rate on ads rose 108%”
  8. 8. Screen shot of blog post…we've decided to take site speed into account in our search rankings.
  9. 9. “To stay in Google's good graces, websites must be designed so they load quickly on mobile devices.”
  10. 10. Fast is Good
  11. 11. Designers & developers often work in silos
 
 
 
 

  12. 12. Designers & developers often work in silos
 
 Some designs are hard to make fast
 

  13. 13. Designers & developers often work in silos
 
 Some designs are hard to make fast
 
 Being fast is important
  14. 14. Small Interdisciplinary Teams
  15. 15. Guiding Principles flickr.com/photos/nihaogirl
  16. 16. Speed is more important than design embellishment. People are filling small gaps in their day with news. It must load fast on all touchpoints. The design should feel light and nibble, always fresh and up to date. Never heavy, slow to load or clogged up with content. Users expect sites to load in under 2 seconds. DAN/TBWA TVNZ News
  17. 17. Engage quickly and then make it feel like you're there. Tourists are making a big important decision so they want to know that it's worth it. People need to know they are in the right place - hook them immediately with engaging imagery. Unobtrusively stream in lots of rich content. DAN/TBWA Tourism New Zealand
  18. 18. Prototype Early
  19. 19. DAN/TBWA
  20. 20. Tourism New Zealand
  21. 21. First layer with 1 sprite sheet (34k)
  22. 22. Second layer of 2 sprite sheets (117k)
  23. 23. Third layer of 8 sprite sheets (829k)
  24. 24. 201 high quality frames (22.6MB)
  25. 25. We're designing timelines not static pages
  26. 26. UX Content flow
  27. 27. Measuring Performance
  28. 28. Filmstrips
  29. 29. Videos
  30. 30. Navigation Timing overall page metrics performance.timing,.now() Resource Timing individual HTTP requests performance.getEntries() User Timing custom metrics performance.mark(),.measure() W3C Web Timing Specs
  31. 31. “window.onload is not the best metric for measuring website speed”
  32. 32. 99% ATF rendered: 2.0s onload: 9.7s onload: 3.9s 98% ATF rendered: 4.7s overly optimistic too critical
  33. 33. Not all pixels are the same.
  34. 34. flickr.com/photos/15609463@N03
  35. 35. flickr.com/photos/kk
  36. 36. Custom Metrics
  37. 37. Custom Metrics Define most important elements on the page
  38. 38. Custom Metrics Define most important elements on the page Measure using User Timing
  39. 39. Custom Metrics Define most important elements on the page Measure using User Timing Track with RUM and synthetic
  40. 40. image load time custom metric <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https:// pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""> <strong class="fullname js-action-profile-name show-popup-with- id" data-aria-label-part> Eric Lawrence </strong> DISPLAY
  41. 41. image load time custom metric <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https:// pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt=""> <strong class="fullname js-action-profile-name show-popup-with- id" data-aria-label-part> Eric Lawrence </strong> DISPLAY
  42. 42. <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https:// pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup-with- id" data-aria-label-part> Eric Lawrence </strong> image load time custom metricDISPLAY
  43. 43. image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https:// pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup-with- id" data-aria-label-part> Eric Lawrence </strong> DISPLAY
  44. 44. image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <script> performance.measure('imgDisplayed'); </script> <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https:// pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup-with- id" data-aria-label-part> Eric Lawrence </strong> DISPLAY
  45. 45. <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https:// pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup-with- id" data-aria-label-part> Eric Lawrence </strong> image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <script> performance.measure('imgDisplayed'); </script> DISPLAY
  46. 46. <div class="stream-item-header"> <a class="account-group js-account-group js-action-profile js- user-profile-link js-nav" href="/ericlaw" data-user-id="5725652"> <img class="avatar js-action-profile-avatar" src="https:// pbs.twimg.com/profile_images/...d8a_bigger.jpeg" alt="" onload="performance.clearMeasures('imgDisplayed'); performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup-with- id" data-aria-label-part> Eric Lawrence </strong> image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <script> performance.clearMeasures('imgDisplayed'); performance.measure('imgDisplayed'); </script> DISPLAY
  47. 47. Custom Metrics
  48. 48. flickr.com/photos/kk Measure content for users
  49. 49. DAN/TBWA Small Interdisciplinary Teams
  50. 50. Time based
  51. 51. Measure your content flow
  52. 52. Have an awesome BT!

×