Design+Performance

3,691 views

Published on

If your performance metric gives all the content in the page the same value, that's not a good metric.

Published in: Internet
  • Be the first to comment

Design+Performance

  1. 1. Design + Performance Steve Souders @souders
  2. 2. bringing designers & developers closer together
  3. 3. flickr.com/photos/timdorr
  4. 4. flickr.com/photos/easyflow
  5. 5. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  6. 6. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  7. 7. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  8. 8. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  9. 9. en.oreilly.com/velocity2009/public/schedule/de
  10. 10. en.oreilly.com/velocity2009/public/schedule/detail/8523
  11. 11. …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%! blog.mozilla.com/metrics/category/website-optimization/
  12. 12. We made the new platform 60% faster and this resulted in a 14% increase in donation conversions. kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
  13. 13. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%! en.oreilly.com/velocity2009/public/schedule/detail/7709
  14. 14. en.oreilly.com/velocity2008/public/schedule/detail/3632
  15. 15. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377
  16. 16. “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%”
  17. 17. Screen shot of blog post…we've decided to take site speed into account in our search rankings. googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  18. 18. “To stay in Google's good graces, websites must be designed so they load quickly on mobile devices.” huffingtonpost.com/2015/04/17/google-search-update_n_7085642.html
  19. 19. Fast is Good flickr.com/photos/krissen/
  20. 20. designers & developers often work in silos some designs are hard to make fast being fast is important flickr.com/photos/jronaldlee
  21. 21. Design + Performance flickr.com/photos/easyflow
  22. 22. small interdisciplinary teams
  23. 23. guiding principles flickr.com/photos/nihaogirl
  24. 24. 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 nimble, always fresh and up to date. Never heavy, slow to load or clogged up with content. Users expect sites to render in under 2 seconds. DAN/TBWA
  25. 25. prototype early
  26. 26. measure performance from the start flickr.com/photos/josterpi
  27. 27. performance budgets
  28. 28. https://speakerdeck.com/lara/mobile-web-at-etsy in-page reminders show what’s beaconed bookmarklets
  29. 29. flickr.com/photos/josterpi
  30. 30. Measuring Performance flickr.com/photos/thatguyfromcchs08
  31. 31. "The graph below shows the average number of seconds it takes 35 different computers located throughout the world to download our homepage."
  32. 32. flickr.com/photos/cataniamichele
  33. 33. window.onload RUM • metrics from real users - COOL! • reflect actual geo, hw, bw, etc. • but, "start" time isn't right • and timer has latency
  34. 34. 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 flickr.com/photos/zamboniandrea
  35. 35. “window.onload is not the best metric for measuring website speed”
  36. 36. 99% ATF rendered: 2.0s onload: 9.7s onload: 3.9s 98% ATF rendered: 4.7s overly optimistic too critical
  37. 37. domInteractive
  38. 38. domInteractive
  39. 39. https://sites.google.com/a/webpagetest.org/docs/using-
  40. 40. domInteractive .onload Speed Index Bing Disqus CNN MSN
  41. 41. There is no single metric that captures the UX on all websites. flickr.com/photos/packethunter
  42. 42. flickr.com/photos/15609463@N03
  43. 43. flickr.com/photos/kk
  44. 44. custom metrics
  45. 45. custom metrics define most important elements on the page
  46. 46. custom metrics define most important elements on the page measure using User Timing
  47. 47. custom metrics define most important elements on the page measure using User Timing track with RUM and synthetic
  48. 48. https://blog.twitter.com/2012/improving-performance-on-twittercom
  49. 49. 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>
  50. 50. 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>
  51. 51. 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="" onload="performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
  52. 52. 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>
  53. 53. 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>
  54. 54. 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>
  55. 55. image load time custom metric <link rel="stylesheet" href="/huge-slow.css"> <script> performance.clearMeasures('imgDisplayed'); 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.clearMeasures('imgDisplayed'); performance.measure('imgDisplayed')"> <strong class="fullname js-action-profile-name show-popup- with-id" data-aria-label-part> Eric Lawrence </strong>
  56. 56. custom metrics
  57. 57. flickr.com/photos/stevendepolo
  58. 58. flickr.com/photos/cataniamichele
  59. 59. There is no single metric that captures the UX on all websites. flickr.com/photos/packethunter
  60. 60. custom metrics define most important elements on the page measure using User Timing track with RUM and synthetic
  61. 61. flickr.com/photos/kk
  62. 62. @souders stevesouders.com/talks

×