Publicité
Check these out next
Design & Performance - Steve Souders at Fastly Altitude 2015
29 Jun 2015•0 j'aime•1,423 vues
1 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Signaler
Technologie
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.
FastlySuivre
FastlyPublicité
Publicité
Publicité
Recommandé
Solving anything in VCLFastly
VCL template abstraction model and automated deployments to FastlyFastly
Advanced VCL: how to use restartFastly
Rails Caching Secrets from the EdgeMichael May
Tips for going fast in a slow world: Michael May at OSCON 2015Fastly
Beyond Breakpoints: A Tour of Dynamic AnalysisFastly
Design & Performance - Steve Souders at Fastly Altitude 2015
- 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 and this resulted in a 14% increase in donation conversions.”
- “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/jronaldlee
- 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 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
- 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="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?
- 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 display: ~5200 ms
- <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
- <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')">
- <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 });
- <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); } }
- <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>
- <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"); </script> when is image displayed? HERO^
- 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
Publicité