design+performance velocity 2015
TRANSCRIPT
Design + PerformanceSteve Souders@souders
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
bringing designers & developers closer together
This talk is about creating better websites by bringing designers & developers closer together
flickr.com/photos/timdorr
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 sides win is the other sides 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
flickr.com/photos/easyflow
But really, theyre both after the same thing: creating a great user experience!Design & development ARE connected, but theyre 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 cant be here today.
https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget
So Im going to borrow from Yemeni Perez-Cruz to represent designers.
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
two minutes is slow
http://en.oreilly.com/velocity2009/public/schedule/detail/8523
but we know good performance is key to great user experiences
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.
but we know good performance is key to great user experiences
To stay in Google's good graces, websites must be designed so they load quickly on mobile devices.
and now Google is even demanding that your websites be quick if you dont want to get demoted in their search results
designers & developers often work in silossome designs are hard to make fastbeing fast is importantflickr.com/photos/jronaldlee
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
Design + Performanceflickr.com/photos/easyflow
It is possible to bring design and performance closer together. Heres 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
small interdisciplinary teams
None of this works unless you have the right people in the room the whole way through the process.Its hard to create this relationship halfway through the process bring designers & developers together from the get go
guiding principlesflickr.com/photos/nihaogirl
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
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
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.
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
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.
prototype early
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.
measure performance from the startflickr.com/photos/josterpi
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
performance budgets
https://speakerdeck.com/lara/mobile-web-at-etsyin-page remindersshow whats beaconedbookmarklets
But what exactly should we be measuring?
window.onload is not the best metric for measuring website speed
We know page load time is NOT necessarily correlate to UX.
99% ATF rendered: 2.0sonload: 9.7sonload: 3.9s98% ATF rendered: 4.7s
overly optimistictoo critical
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/
flickr.com/photos/goincase
We need metrics that more accurately measure the UX. They wont 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
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
flickr.com/photos/cataniamichele
We need metrics that focus on what the user sees!https://www.flickr.com/photos/cataniamichele/2855661699/sizes/l
filmstrips
video
http://www.webpagetest.org/video/view.php?id=150420_9bb3d86cb90fb18f21a7b2774376bd30fd6e1494
imageflickr.com/photos/jdhancock
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
Hero Image Delay (HID)
It's the price we pay to download huge images, right?????
540 ms647 ms}}hero
NO! Hero images are typically download quickly but are delayed by JS & CSS."sweater" image finishes downloading at 2057.500 ms before hero is renderedhttps://speedcurve.com/test/150427_9S_16/hja21ghdsja6743ghjfdskjhs2133j/
Hero Image Delay (HID)
2079 ms}hero
"Evening" image finishes downloading at 618ms.2697 ms before hero is renderedhttps://speedcurve.com/test/150427_YF_132/hja21ghdsja6743ghjfdskjhs2133j/
Hero Image Delay (HID)
685 ms}hero
"paris" bed image finishes downloading at 712 ms.~700 ms before hero is renderedsync scripts at bottom get promotedhttps://speedcurve.com/test/150427_6A_PR/hja21ghdsja6743ghjfdskjhs2133j/
Airbnb.init();
when do scripts at the bottom get loaded?
Notice these are BLOCKING scripts!
238K
238K gzipped238K gzipped797K UNgzipped!hero685 ms}
The rule "put scripts at the bottom" stopped mattering with IE8.
"paris" bed image finishes downloading at 712 ms.~700 ms before hero is renderedsync scripts at bottom get promotedhttps://speedcurve.com/test/150427_6A_PR/
custom metricsdefine most important elements on the pagemeasure using User Timingtrack with RUM and synthetic
in terms of UX - but also for the business (ads)
https://blog.twitter.com/2012/improving-performance-on-twittercom
actual image display: ~5200 ms
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!!
actual image display: ~5200 msperformance .getEntriesByName("hero.jpg")[0] .duration
too earlyIt's not wrong, it's just answering a different question: "When did it finish downloading?"
actual image display: ~5200 ms
too early
actual image display: ~5200 msvar observer = new MutationObserver(obsCallback);observer.observe(document, { childList: true, attributes: true, subtree: true });
too early
actual image display: ~5200 msfunction imagePolling() { var hero = document.getElementById('hero'); if ( hero.offsetHeight ) { performance.mark('hero'); } else { setTimeout(imagePolling, 100); }}
too early
actual image display: ~5200 ms
performance.mark("hero");
The only that works!
Those previous tests covered other slow (blocking) assets. What if the image itself is slow?
max(image onload, inline script)
performance.mark("hero2");
when is image displayed?HERO^
custom metrics
custom metricsAll Ads Rendered
digitaljournal.com
And this brings us back to where we started - defining (and measuring) what matters most to the UX. Because thats 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
identify what matters mostfocus on UX performancedefine custom metrics!flickr.com/photos/myklroventinetakeaways
flickr.com/photos/myklroventine/4062102754/
@soudershttp://stevesouders.com/talks
"thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/Verrazano-Narrows Bridge
https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budgethttp://larahogan.me/design/http://www.amazon.com/Designing-Performance-Weighing-Aesthetics-Speed/dp/1491902515https://www.youtube.com/watch?v=DFImM0r4EpEhttp://www.slideshare.net/bluesmoon/beyond-page-level-metricshttp://bradfrost.com/blog/post/performance-as-design/