Design & Performance - Steve Souders at Fastly Altitude 2015

921 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
921
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design & Performance - Steve Souders at Fastly Altitude 2015

  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. http://en.oreilly.com/velocity2009/public/schedule/detail/8523
  10. 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. 11. “To stay in Google's good graces, websites must be designed so they load quickly on mobile devices.”
  12. 12. designers & developers often work in silos some designs are hard to make fast being fast is important flickr.com/photos/jronaldlee
  13. 13. Design + Performance flickr.com/photos/easyflow
  14. 14. small interdisciplinary teams
  15. 15. guiding principles flickr.com/photos/nihaogirl
  16. 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 example
  17. 17. prototype early
  18. 18. measure performance from the start flickr.com/photos/josterpi
  19. 19. performance budgets
  20. 20. https://speakerdeck.com/lara/mobile-web-at-etsy in-page reminders show what’s beaconed bookmarklets
  21. 21. “window.onload is not the best metric for measuring website speed”
  22. 22. 99% ATF rendered: 2.0s onload: 9.7s onload: 3.9s 98% ATF rendered: 4.7s overly optimistic too critical
  23. 23. flickr.com/photos/goincase
  24. 24. https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  25. 25. flickr.com/photos/cataniamichele
  26. 26. filmstrips
  27. 27. video
  28. 28. image flickr.com/photos/jdhancock
  29. 29. Hero Image Delay (HID)
  30. 30. 540 ms 647 ms } } hero
  31. 31. Hero Image Delay (HID)
  32. 32. 2079 ms } hero
  33. 33. Hero Image Delay (HID)
  34. 34. 685 ms } hero
  35. 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. 36. 238K238K gzipped238K gzipped 797K UNgzipped! hero 685 ms }
  37. 37. custom metrics define most important elements on the page measure using User Timing track with RUM and synthetic
  38. 38. https://blog.twitter.com/2012/improving-performance-on-twittercom
  39. 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. 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. 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. 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. 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. 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. 45. <img src="7-seconds.jpg"> <head> <script src="3-seconds.js"></script> <link href="5-seconds.css" rel="stylesheet"> </head>
  46. 46. max(image onload, inline script) <img src="hero.jpg" onload="performance.mark('hero1')"> <script> performance.mark("hero2"); </script> when is image displayed? HERO^
  47. 47. custom metrics
  48. 48. custom metrics All Ads Rendered
  49. 49. digitaljournal.com
  50. 50. identify what matters most focus on UX performance define custom metrics! flickr.com/photos/myklroventine takeaways
  51. 51. @souders http://stevesouders.com/talks

×