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 Velocity 2015

14,963 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: Design, Internet

Design+Performance Velocity 2015

  1. Design + Performance Steve Souders @souders
  2. bringing designers & developers closer together
  3. flickr.com/photos/timdorr
  4. flickr.com/photos/easyflow
  5. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  6. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  7. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  8. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
  9. http://en.oreilly.com/velocity2009/public/schedule/detail/8523
  10. 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.”
  11. “To stay in Google's good graces, websites must be designed so they load quickly on mobile devices.”
  12. designers & developers often work in silos some designs are hard to make fast being fast is important flickr.com/photos/jronaldlee
  13. Design + Performance flickr.com/photos/easyflow
  14. small interdisciplinary teams
  15. guiding principles flickr.com/photos/nihaogirl
  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 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
  17. prototype early
  18. measure performance from the start flickr.com/photos/josterpi
  19. performance budgets
  20. https://speakerdeck.com/lara/mobile-web-at-etsy in-page reminders show what’s beaconed bookmarklets
  21. “window.onload is not the best metric for measuring website speed”
  22. 99% ATF rendered: 2.0s onload: 9.7s onload: 3.9s 98% ATF rendered: 4.7s overly optimistic too critical
  23. flickr.com/photos/goincase
  24. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  25. flickr.com/photos/cataniamichele
  26. filmstrips
  27. video
  28. image flickr.com/photos/jdhancock
  29. Hero Image Delay (HID)
  30. 540 ms 647 ms } } hero
  31. Hero Image Delay (HID)
  32. 2079 ms } hero
  33. Hero Image Delay (HID)
  34. 685 ms } hero
  35. <script src="https://a2.muscache.com/airbnb/static/packages/libs_jquery_2x- 2400ba132b989cbe0d764c167aeb3c90.js" type="text/javascript"></script> <script src="https://a0.muscache.com/airbnb/static/packages/o2.1- 67faf5923bd9dfeef978ce1ebedc4064.js" type="text/javascript"></script> <script src="https://a2.muscache.com/airbnb/static/packages/core- dacee509c4b23722d12e97419abc3534.js" type="text/javascript"></script> <script> Airbnb.init(); </script> <div id="fb-root"></div> <script src="https://a2.muscache.com/airbnb/static/packages/homepage- aac92caeb0a5472192581decde9d1f6b.js" type="text/javascript"></script> </body> </html> when do scripts at the bottom get loaded?
  36. 238K238K gzipped238K gzipped 797K UNgzipped! hero 685 ms }
  37. custom metrics define most important elements on the page measure using User Timing track with RUM and synthetic
  38. https://blog.twitter.com/2012/improving-performance-on-twittercom
  39. <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> <img src="1-second.jpg"> actual image display: ~5200 ms
  40. <head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head> <img src="1-second.jpg"> actual image display: ~5200 ms performance .getEntriesByName("hero.jpg")[0] .duration
  41. <head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head> <img src="1-second.jpg"> actual image display: ~5200 ms <img src="hero.jpg" onload= "performance.mark('hero')">
  42. <head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head> <img src="1-second.jpg"> actual image display: ~5200 ms var observer = new MutationObserver(obsCallback); observer.observe(document, { childList: true, attributes: true, subtree: true });
  43. <head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head> <img src="1-second.jpg"> actual image display: ~5200 ms function imagePolling() { var hero = document.getElementById('hero'); if ( hero.offsetHeight ) { performance.mark('hero'); } else { setTimeout(imagePolling, 100); } }
  44. <head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head> <img src="1-second.jpg"> actual image display: ~5200 ms <img src="hero.jpg"> <script> performance.mark("hero"); </script>
  45. <img src="7-seconds.jpg"> <head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head>
  46. max(image onload, inline script) <img src="hero.jpg" onload="performance.mark('hero1')"> <script> performance.mark("hero2"); </script> when is image displayed?
  47. custom metrics
  48. custom metrics All Ads Rendered
  49. digitaljournal.com
  50. identify what matters most focus on UX performance define custom metrics! flickr.com/photos/myklroventine takeaways
  51. @souders http://stevesouders.com/talks

×