Fastly Altitude - June 25, 2015. Chief SpeedCurver Steve Souders explains how design and web performance are more interconnected than ever before. Users want a fast website with a rich design, 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. Bringing these processes together produces experiences that are rich and fast. Video from the talk: http://fastly.us/Altitude2015_Design-Performance Steve's bio: Steve Souders is a co-founder at SpeedCurve, where he develops web performance services. His book, High Performance Web Sites, explains his best practices for performance; it was #1 in Amazon's Computer and Internet bestsellers. His follow-up book, Even Faster Web Sites, provides performance tips for today's Web 2.0 applications. Steve is the creator of many performance tools and services including YSlow, the HTTP Archive, Cuzillion, Jdrop, SpriteMe, ControlJS, and Browserscope. He serves as co-chair of Velocity, the web performance and operations conference from O'Reilly, and is co-founder of the Firebug Working Group.

2. Design + Performance
Steve Souders
@souders

3. bringing designers &
developers closer together

4. flickr.com/photos/timdorr

5. flickr.com/photos/easyflow

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. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

10. https://speakerdeck.com/yeseniaperezcruz/design-decisions-through-the-lens-of-a-performance-budget

11. http://en.oreilly.com/velocity2009/public/schedule/detail/8523

12. 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.”

13. “To stay in Google's good graces,
websites must be designed so they
load quickly on mobile devices.”

14. designers & developers
often work in silos
some designs are hard
to make fast
being fast is important
flickr.com/photos/jronaldlee

15. Design + Performance
flickr.com/photos/easyflow

16. small interdisciplinary teams

17. guiding principles
flickr.com/photos/nihaogirl

18. 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
example

19. prototype early

20. measure performance from the start
flickr.com/photos/josterpi

21. performance budgets

22. https://speakerdeck.com/lara/mobile-web-at-etsy
in-page reminders
show what’s beaconed
bookmarklets

23. “window.onload is not the
best metric for measuring
website speed”

24. 99% ATF rendered: 2.0s onload: 9.7s
onload: 3.9s 98% ATF rendered: 4.7s
overly optimistic
too critical

25. flickr.com/photos/goincase

27. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

28. flickr.com/photos/cataniamichele

29. filmstrips

30. video

31. image
flickr.com/photos/jdhancock

33. Hero Image Delay (HID)

34. 540 ms
647 ms
}
} hero

36. Hero Image Delay (HID)

37. 2079 ms
}
hero

39. Hero Image Delay (HID)

40. 685 ms
}
hero

41. <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?

42. 238K238K gzipped238K gzipped
797K UNgzipped!
hero
685 ms
}

43. custom metrics
define most important
elements on the page
measure using User Timing
track with RUM and synthetic

44. https://blog.twitter.com/2012/improving-performance-on-twittercom

46. <script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
<img src="1-second.jpg">
actual image display: ~5200 ms

48. <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

49. <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')">

50. <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 });

51. <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); }
}

52. <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>

53. <img src="7-seconds.jpg">
<head>
<script src="3-seconds.js"></script>
<link href="5-seconds.css" rel="stylesheet">
</head>

54. max(image onload, inline script)
<img src="hero.jpg"
onload="performance.mark('hero1')">
<script>
performance.mark("hero2");
</script>
when is image displayed?
HERO^

55. custom metrics

56. custom metrics
All Ads Rendered

57. digitaljournal.com

58. identify what matters most
focus on UX performance
define custom metrics!
flickr.com/photos/myklroventine
takeaways

61. @souders
http://stevesouders.com/talks