Design + Performance
Steve Souders
@souders
bringing designers &
developers closer together
flickr.com/photos/timdorr
flickr.com/photos/easyflow
https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
http://en.oreilly.com/velocity2009/public/schedule/detail/8523
http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
“We made the new platform 60% faster a...
“To stay in Google's good graces, websites
must be designed so they load quickly on
mobile devices.”
designers & developers
often work in silos
some designs are hard
to make fast
being fast is important
flickr.com/photos/jr...
Design + Performance
flickr.com/photos/easyflow
small interdisciplinary teams
guiding principles
flickr.com/photos/nihaogirl
Speed is more important
than design embellishment.
People are filling
small gaps in their
day with news. It
must load fast...
prototype early
measure performance from the start
flickr.com/photos/josterpi
performance budgets
https://speakerdeck.com/lara/mobile-web-at-etsy
in-page reminders
show what’s beaconed
bookmarklets
“window.onload is not the best
metric for measuring website
speed”
99% ATF rendered: 2.0s onload: 9.7s
onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic
too critical
flickr.com/photos/goincase
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
flickr.com/photos/cataniamichele
filmstrips
video
image
flickr.com/photos/jdhancock
Hero Image Delay (HID)
540 ms
647 ms
}
} hero
Hero Image Delay (HID)
2079 ms
}
hero
Hero Image Delay (HID)
685 ms
}
hero
<script
src="https://a2.muscache.com/airbnb/static/packages/libs_jquery_2x-
2400ba132b989cbe0d764c167aeb3c90.js" type="tex...
238K238K gzipped238K gzipped
797K UNgzipped!
hero
685 ms
}
custom metrics
define most important
elements on the page
measure using User Timing
track with RUM and synthetic
https://blog.twitter.com/2012/improving-performance-on-twittercom
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
<img src="1-second.jpg">
actual image di...
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
...
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
...
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
...
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
...
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
<img src="1-second.jpg">
...
<img src="7-seconds.jpg">
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>
max(image onload, inline script)
<img src="hero.jpg"
onload="performance.mark('hero1')">
<script>
performance.mark("hero2"...
custom metrics
custom metrics
All Ads Rendered
digitaljournal.com
identify what matters most
focus on UX performance
define custom metrics!
flickr.com/photos/myklroventine
takeaways
@souders
http://stevesouders.com/talks
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Design+Performance Velocity 2015
Upcoming SlideShare
Loading in …5
×

Design+Performance Velocity 2015

13,391 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
1 Comment
74 Likes
Statistics
Notes
No Downloads
Views
Total views
13,391
On SlideShare
0
From Embeds
0
Number of Embeds
567
Actions
Shares
0
Downloads
171
Comments
1
Likes
74
Embeds 0
No embeds

No notes for slide
  • https://www.flickr.com/photos/easyflow/3377137372/in/photolist-69qHhq-5JUiYP-55ZfsE-dYmwEQ-5Ca1VD-7zq7En-kVv8dK-mqM9Jp-5J3uv9-f4JB8M-qZznd-f4MRgN-f4xAET-bpDYeX-GroML-7qoFXr-55nSfk-rbJwH-6RFZt1-6qnVXy-jtkLG-cEGq9-4xp87D-eeUgzz-c7QHf-6qk9JT-7PjaWF-4gf1tv-7sK9B3-4VtxzW-6qvWgT-8UB4U-8t9NNr-bDvQY-972WQq-6Fkgen-4RSnyY-8T7px8-6rWXPz-6rWU3n-5fgGGe-Hq1J7-cvqi-7Hs86U-9Vo8SK-gzpzde-666Ch9-4CzyT6-3hx5nr-dReBgT
  • This talk is about creating better websites by bringing designers & developers closer together
  • Perhaps your experience with bringing designers & developers is a bit like this - but without the pillows.
    Certainly, navigating between design and implementation often feels like a fixed sum game.
    One side’s win is the other side’s loss.

    https://www.flickr.com/photos/timdorr/4396870234/in/photolist-7Gx7ku-7GtaDx-7Gx4Ub-7Gta8t-7GtadX-7GvYZ1-3nArNu-3nArUy-3nApNY-3nvYmr-3nAq8N-3nApG1-3nAq2q-3nvYJg-3nw1xc-3nAtnq-3nvVBg-3nAtad-3nAtUo-3nw1jX-3nvZti-3nvXm6-3nAr7d-3nAqfL-3nAuPb-3nAsRf-3nAssL-3nvZHt-3nAroy-3nArvb-3nAqUE-3nAph1-3nvXf4-3nArGG-3nvVb8-3nAscS-3nAtAW-3nAueq-3nvYwD-3nArZN-3nAr27-3nAqs5-oM1oiq-bCU3k4-3sZr4-682gYi-6eDdv3-qSGcRS-aFFtxX-7QzWQc
  • But really, they’re both after the same thing: creating a great user experience!
    Design & development ARE connected, but they’re more like the yin and the yang.
    They aren't opposing forces, but instead complement each other.
    Users want an experience that is rich and fast. The trick is figuring out how to deliver that.
    Similar to DevOps from Velocity.

    https://www.flickr.com/photos/easyflow/3377137372/in/photolist-69qHhq-5JUiYP-55ZfsE-dYmwEQ-5Ca1VD-7zq7En-kVv8dK-mqM9Jp-5J3uv9-f4JB8M-qZznd-f4MRgN-f4xAET-bpDYeX-GroML-7qoFXr-55nSfk-rbJwH-6RFZt1-6qnVXy-jtkLG-cEGq9-4xp87D-eeUgzz-c7QHf-6qk9JT-7PjaWF-4gf1tv-7sK9B3-4VtxzW-6qvWgT-8UB4U-8t9NNr-bDvQY-972WQq-6Fkgen-4RSnyY-8T7px8-6rWXPz-6rWU3n-5fgGGe-Hq1J7-cvqi-7Hs86U-9Vo8SK-gzpzde-666Ch9-4CzyT6-3hx5nr-dReBgT
  • A lot of the thinking behind Design+Performance came from long discussions with my business partner Mark Zeman.
    He has a lengthy career as a designer and creative director, but sadly can’t be here today.
  • So I’m going to borrow from Yemeni Perez-Cruz to represent designers.
  • two minutes is slow
  • but we know good performance is key to great user experiences
  • but we know good performance is key to great user experiences
  • and now Google is even demanding that your websites be quick if you don’t want to get demoted in their search results
  • so where are we?

    https://www.flickr.com/photos/jronaldlee/5775587577/in/photolist-9NnoYa-nYYp6g-63bGJj-KrzjB-6nYgX1-8KY39y-kz3M7y-fo68C6-5onBza-apBT72-6g9eSA-9WNvKw-4Gb2FP-2V7jsj-6G7Ynq-2tbdKU-9Kip9s-4TL5Sc-iJQYR-gi6ri6-pfx24Z-BgDwR-9NgMy1-of8g8U-49queL-atRJTH-ax64Nq-fSUV1Q-4qvBPj-4Se4NE-aegPJ4-ptxVJE-ptM5zP-ptMNBV-q95ZVa-kcfpje-mPZDqk-7FPG6G-cqvvXs-rwFCJA-bVYoNj-6McJox-CXYYb-5bMxiG-49mrhe-6q5uNW-7DpdiH-6MgWby-5n89ro-dVXS9w
  • It is possible to bring design and performance closer together. Here’s how…

    https://www.flickr.com/photos/easyflow/3377137372/in/photolist-69qHhq-5JUiYP-55ZfsE-dYmwEQ-5Ca1VD-7zq7En-kVv8dK-mqM9Jp-5J3uv9-f4JB8M-qZznd-f4MRgN-f4xAET-bpDYeX-GroML-7qoFXr-55nSfk-rbJwH-6RFZt1-6qnVXy-jtkLG-cEGq9-4xp87D-eeUgzz-c7QHf-6qk9JT-7PjaWF-4gf1tv-7sK9B3-4VtxzW-6qvWgT-8UB4U-8t9NNr-bDvQY-972WQq-6Fkgen-4RSnyY-8T7px8-6rWXPz-6rWU3n-5fgGGe-Hq1J7-cvqi-7Hs86U-9Vo8SK-gzpzde-666Ch9-4CzyT6-3hx5nr-dReBgT
  • None of this works unless you have the right people in the room the whole way through the process.
    It’s hard to create this relationship halfway through the process
    bring designers & developers together from the get go
  • With everyone gathered together, discuss project goals and capture guiding principles.
    Make sure performance is addressed.

    https://www.flickr.com/photos/nihaogirl/4922776916/in/photolist-ndeSfc-51eh43-51a5LR-74FetH-4TeuNB-df5nYf-5Vo2Wn-5Nmjzn-51a5zV-51egkE-51a546-8v1w55-5t8PLi-9Zxguz-7wK1Le-6RAgsL
  • Here is an example of a principle from the design of a news website. The research showed that users consume news in small quick chunks and so it was more important that it loaded extremely fast than be visually rich with lots of brand assets. People are waiting at the bus stop and they have less than a minute to scan a few articles on their phone - it has to be fast.

    There is even a specific mention for when the site should be loaded and that was used as a performance budget.
  • Here is an example of a principle from the design of a news website. The research showed that users consume news in small quick chunks and so it was more important that it loaded extremely fast than be visually rich with lots of brand assets. People are waiting at the bus stop and they have less than a minute to scan a few articles on their phone - it has to be fast.

    There is even a specific mention for when the site should be loaded and that was used as a performance budget.
  • It means all the knowledge is in one room, everybody is working on the prototype from day one. Designers are not working in photoshop to create full layouts - they are creating individual assets that go into a prototype. Developers are working with existing data sources and manipulating real content. Researchers are capturing users needs and gauging reactions to each prototype. Team members have a specialisation but are expected to contribute to all aspects of the project.

    Everybody is contributing to the prototype and the conversions are all embodied in one place. So every one has a shared vision and can see how well the project principles and performance principles are being met.

    Here's a moment that I love - the client is in the room, the developer is experimenting with changing layout and the designer is consulting on the various options they are playing with. All the discussion revolves around the prototype on screen.

    And by having a prototype from day one we can immediately assess it's performance and ensure it's delivering the user experience we need.

    But one of the challenges with performance is that it is invisible. How do we monitor and make visible the performance all the way through the process - for everybody, not just this small interdisciplinary team, but also the wider organisation we need to have conversations with.
  • But one of the challenges with performance is that it is invisible. How do we monitor and make visible the performance all the way through the process - for everybody, not just this small interdisciplinary team, but also the wider organisation we need to have conversations with.

    https://www.flickr.com/photos/josterpi/3174097491/in/photolist-5Qu5AP-h4vYQc-qDkDsE-6tDQ53-ap4pYT-6VrZjk-md5yR5-5PondA-5PVcKC-bvavRn-bxsk7Z-QudsT-6S1ivp-9hwNYa-8UjqcP-ap7amu-9zgR8a-qf1yJ9-qgz457-4JXfm4-99eAKF-6cyvEr-mFUttz-e2FfcF-37ddmA-wBwq6-63iZnr-wBwiC-9XMHpn-ph8ANF-9XQzJE-ZsAKM-iyQpBa-7jgbx4-6QJSTZ-7jk5tw-wBwgS-wBwca-bA44J-8Mdwca-qMZeNs-7P5RjE-6o8M7d-9hP5RB-4zySd-aAqBn3-NGjcd-cH8cQU-8USCg9-8KMjFj
  • But what exactly should we be measuring?
  • We know page load time is NOT necessarily correlate to UX.
  • examples of how onload does NOT correlate to UX

    Amazon: http://www.webpagetest.org/result/150420_GV_E3/
    Gmail: http://www.webpagetest.org/result/150420_S9_704a92a60b0b134daec3d42d649c3010/
  • We need metrics that more accurately measure the UX. They won’t be perfect until human brains fire JavaScript events.

    https://www.flickr.com/photos/goincase/2220266628/in/photolist-4ocrV7-9VVXjZ-8fy57p-9VXuKx-feNNWa-ff47y9-feNNTF-nLarQF-9VW2PP-9VYLNQ-9W1j4A-nJm5dy-9VYN9m-9VRLJ4-8hYyha-9VYV3J-GnW5B-zyZxy-oagedz-9tDdWs-eizvPP-bqgVNX-9VYoh3-9VVxfr-9VW2fT-8c4wFn-9VVZXv-8hYt5H-8hYAMX-c2Ygh-jsLvXT-jsMYFD-84vT4z-8twLz9-jsNznU-8pghjG-7BGCEF-8P8gMg-8PbmJq-8Pbmww-993hrU-6jcP8W-6j8C1g-6jcMT5-6j8AEM-6j8Amc-6j8zUr-zyZuG-9VXtkD-as27uZ
  • We need metrics that focus on what the user sees!
    https://www.flickr.com/photos/cataniamichele/2855661699/sizes/l
  • http://www.webpagetest.org/video/view.php?id=150420_9bb3d86cb90fb18f21a7b2774376bd30fd6e1494
  • https://www.flickr.com/photos/jdhancock/6914454974/in/photolist-bx1oyW-eQ2yW7-pzmzPt-7MxBji-55bVS4-K7aC4-7zQ7Zc-4UAU46-2L3o3p-4uaqEp-gJZZHV-gT4rL1-fnUT4L-7ZFGpo-8nDkwY-eNZABc-7Ju3kR-nA2Zo5-6qK9Pd-5jUj2d-6US1t7-y7oKf-99242N-X8kWK-c8qGT9-orsEqG-pLehqa-KLgnS-5muu7K-7ZbcmB-nDXaLB-faV6HG-djULw7-5GTAz9-4pZyVc-a6SiAT-f9tdxa-mLNHtP-7nNAXZ-r71HXM-9Jp7xV-6e7U5U-ddUsEV-b6LNha-8t5gPc-f9tcYa-c1nFpf-6HLPUn-a3FXZG-gMPpHU
  • It's the price we pay to download huge images, right?????
  • NO! Hero images are typically download quickly but are delayed by JS & CSS.
    "sweater" image finishes downloading at 2057.
    500 ms before hero is rendered
    https://speedcurve.com/test/150427_9S_16/hja21ghdsja6743ghjfdskjhs2133j/
  • "Evening" image finishes downloading at 618ms.
    2697 ms before hero is rendered
    https://speedcurve.com/test/150427_YF_132/hja21ghdsja6743ghjfdskjhs2133j/
  • "paris" bed image finishes downloading at 712 ms.
    ~700 ms before hero is rendered
    sync scripts at bottom get promoted
    https://speedcurve.com/test/150427_6A_PR/hja21ghdsja6743ghjfdskjhs2133j/
  • Notice these are BLOCKING scripts!
  • The rule "put scripts at the bottom" stopped mattering with IE8.

    "paris" bed image finishes downloading at 712 ms.
    ~700 ms before hero is rendered
    sync scripts at bottom get promoted
    https://speedcurve.com/test/150427_6A_PR/
  • in terms of UX - but also for the business (ads)
  • http://www.webpagetest.org/video/compare.php?tests=150422_H8_AG3-r%3A4-c%3A0&thumbSize=200&ival=100&end=visual
  • How do we know when the image rendered? Filmstrips!!
  • too early
    It's not wrong, it's just answering a different question: "When did it finish downloading?"
  • too early
  • too early
  • too early
  • The only that works!
  • Those previous tests covered other slow (blocking) assets.
    What if the image itself is slow?
  • And this brings us back to where we started - defining (and measuring) what matters most to the UX.
    Because that’s what unites the entire team - creating a fantastic UX - which also means a FAST UX.

    http://www.digitaljournal.com/img/1/8/1/6/4/9/i/1/3/8/o/P1100045.JPG
  • flickr.com/photos/myklroventine/4062102754/
  • "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/
    Verrazano-Narrows Bridge
  • 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

    ×