Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
High Performance Mobile<br />stevesouders.com/docs/sfsv-webperf-20110830.pptx<br />Disclaimer: This content does not neces...
Cuzillion<br />SpriteMe<br />YSlow<br />Hammerhead<br />flickr.com/photos/bekahstargazing/318930460/<br />
1. WPO<br />
2004<br />
 carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/<br />#1. Speed:        “First and...
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
Yahoo!<br />	0.4 sec slower<br />	traffic  5-9%<br />slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-...
blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increa...
en.oreilly.com/velocity2009/public/schedule/detail/7709<br />blog.mozilla.com/metrics/category/website-optimization/<br />...
en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377<br />
Site speed in search rank<br />Screen shot of blog post<br />…we've decided to take site speed into account in our search ...
Web<br />Performance<br />Optimization<br />WPO<br />drives traffic<br />improves UX<br />increases revenue<br />reduces c...
2. Why Mobile?<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
nytimes.com/2011/04/18/technology/18mobile.html<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
the road isn’t clear<br />flickr.com/photos/davidandheidi/2320489837/<br />
3. Mobile Best Practices<br />
[just a reminder]<br />
3. Mobile Best Practices<br />
1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets...
1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets...
1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets...
Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning in...
Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning in...
Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning in...
reduce HTTP requests<br />sprites<br />data: URIs<br />CSS3:<br />border-radius<br />box-shadow<br />linear-gradient<br />...
responsive images<br />resize images based on screen size<br />example: Sencha.ioSrc<br />UA classification: DeviceAtlas<b...
script async & defer<br />parsing doesn’t wait for script:<br /><ul><li>async– executed when available
defer – executed when parsing finished</li></ul>when is it downloaded?<br />missing:<br /><ul><li>defer download AND execu...
async/defer download, execute on demand</li></ul>flickr.com/photos/gevertulley/4771808965/<br />
GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element...
ControlJSa JavaScript module for making scripts load faster<br />just change HTML<br />inline & external scripts<br /><scr...
ControlJSa JavaScript module for making scripts load faster<br />download without executing<br /><script type="text/cjs" <...
app cache<br />flickr.com/photos/india-nepal-iran/203982474/<br />
yuiblog.com/blog/2007/01/04/performance-research-part-2/<br />
blaze.io/mobile/understanding-mobile-cache-sizes/<br />
app cache<br />offline apps, longer cache<br /><!doctype html><br /><html manifest=“myapp.appcache”><br />myapp.appcache:<...
app cache gotchas<br />html docs w/ manifest are cached<br />404 => nothing is cached<br />size: 5MB+<br />must rev manife...
app cache<br />reload<br />1<br />2<br />push app <br />logo.gif = <br />user loads app<br />app cache is empty <br />fetc...
load twice workaround<br />window.applicationCache.addEventListener('updateready', <br />function(e) {   if ( window.appli...
localStorage<br />window.localStorage: <br />setItem()<br />getItem()<br />removeItem()<br />clear()<br />also sessionStor...
localStorage as cache<br />1st doc: write JS & CSS blocks to localStorage<br />JUX.UXBaseControls.252CB7BF: (function(){.....
there’s more<br />audio & video tags<br />WebSockets<br />onTouchEnd instead of onClick<br />History  <br /><a ping <br />...
Thanks to…<br />Max Firtman<br />Tony Gentilcore<br />Josh Fraser<br />Kyle Scholz<br />StoyanStefanov<br />Lindsey Simon<...
4. Mobile Tools<br />
http://pmuellr.github.com/weinre/<br />
speed matters - WPO<br />mobile winners will be fast<br />mobile performance – reduce reqs, resize images, async JS, app c...
Top 100: bytes downloaded<br />desktop<br />mobile<br />
Top 100: size & requests<br />desktop<br />mobile<br />
Upcoming SlideShare
Loading in …5
×

High Performance Mobile (SF/SV Web Perf)

39,799 views

Published on

Published in: Technology, Design
  • Be the first to comment

High Performance Mobile (SF/SV Web Perf)

  1. High Performance Mobile<br />stevesouders.com/docs/sfsv-webperf-20110830.pptx<br />Disclaimer: This content does not necessarily reflect the opinions of my employer.<br />
  2. Cuzillion<br />SpriteMe<br />YSlow<br />Hammerhead<br />flickr.com/photos/bekahstargazing/318930460/<br />
  3. 1. WPO<br />
  4. 2004<br />
  5. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/<br />#1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”<br />
  6. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  7. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  8. Yahoo!<br /> 0.4 sec slower<br /> traffic  5-9%<br />slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications<br />slideshare.net/stoyan/yslow-20-presentation<br />
  9. blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!<br />
  10. en.oreilly.com/velocity2009/public/schedule/detail/7709<br />blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!<br />
  11. en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
  12. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377<br />
  13. Site speed in search rank<br />Screen shot of blog post<br />…we've decided to take site speed into account in our search rankings.<br />googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html<br />
  14. Web<br />Performance<br />Optimization<br />WPO<br />drives traffic<br />improves UX<br />increases revenue<br />reduces costs<br />flickr.com/photos/pedromourapinheiro/3123885534/<br />
  15. 2. Why Mobile?<br />
  16. slideshare.net/CMSummit/ms-internet-trends060710final<br />
  17. slideshare.net/CMSummit/ms-internet-trends060710final<br />
  18. nytimes.com/2011/04/18/technology/18mobile.html<br />
  19. slideshare.net/CMSummit/ms-internet-trends060710final<br />
  20. the road isn’t clear<br />flickr.com/photos/davidandheidi/2320489837/<br />
  21. 3. Mobile Best Practices<br />
  22. [just a reminder]<br />
  23. 3. Mobile Best Practices<br />
  24. 1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets at the top<br />6. Put scripts at the bottom<br />7. Avoid CSS expressions<br />8. Make JS and CSS external<br />9. Reduce DNS lookups<br />10. Minify JS<br />11. Avoid redirects<br />12. Remove duplicate scripts<br />13. Configure ETags<br />14. Make AJAX cacheable<br />14 Rules<br />
  25. 1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets at the top<br />6. Put scripts at the bottom<br />7. Avoid CSS expressions<br />8. Make JS and CSS external<br />9. Reduce DNS lookups<br />10. Minify JS<br />11. Avoid redirects<br />12. Remove duplicate scripts<br />13. Configure ETags<br />14. Make AJAX cacheable<br />14 Rules<br />
  26. 1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets at the top<br />6. Put scripts at the bottom<br />7. Avoid CSS expressions<br />8. Make JS and CSS external<br />9. Reduce DNS lookups<br />10. Minify JS<br />11. Avoid redirects<br />12. Remove duplicate scripts<br />13. Configure ETags<br />14. Make AJAX cacheable<br />14 Rules<br />
  27. Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning inline scripts<br />Sharding dominant domains<br />Flushing the document early<br />Using iframes sparingly<br />Simplifying CSS Selectors<br />Understanding Ajax performance Doug Crockford<br />Creating responsive web apps Ben Galbraith, Dion Almaer<br />Writing efficient JavaScript Nicholas Zakas<br />Scaling with Comet Dylan Schiemann<br />Going beyond gzipping Tony Gentilcore<br />Optimizing images StoyanStefanov, Nicole Sullivan<br />
  28. Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning inline scripts<br />Sharding dominant domains<br />Flushing the document early<br />Using iframes sparingly<br />Simplifying CSS Selectors<br />Understanding Ajax performance Doug Crockford<br />Creating responsive web apps Ben Galbraith, Dion Almaer<br />Writing efficient JavaScript Nicholas Zakas<br />Scaling with Comet Dylan Schiemann<br />Going beyond gzipping Tony Gentilcore<br />Optimizing images StoyanStefanov, Nicole Sullivan<br />
  29. Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning inline scripts<br />Sharding dominant domains<br />Flushing the document early<br />Using iframes sparingly<br />Simplifying CSS Selectors<br />Understanding Ajax performance Doug Crockford<br />Creating responsive web appsBen Galbraith, Dion Almaer<br />Writing efficient JavaScript Nicholas Zakas<br />Scaling with Comet Dylan Schiemann<br />Going beyond gzipping Tony Gentilcore<br />Optimizing images StoyanStefanov, Nicole Sullivan<br />
  30. reduce HTTP requests<br />sprites<br />data: URIs<br />CSS3:<br />border-radius<br />box-shadow<br />linear-gradient<br />transform: rotate, scale, skew, translate<br />Canvas, SVG<br />flickr.com/photos/mrd00dman/2358726807/<br />
  31. responsive images<br />resize images based on screen size<br />example: Sencha.ioSrc<br />UA classification: DeviceAtlas<br />domain sharding: src[1-4].sencha.io<br />also: http://adaptive-images.com/<br />http://github.com/filamentgroup/Responsive-Images<br /><imgsrc=‘http://src.sencha.io/http://mydomain.com/logo.gif’><br />flickr.com/photos/johnkay/3539939004/<br />
  32. script async & defer<br />parsing doesn’t wait for script:<br /><ul><li>async– executed when available
  33. defer – executed when parsing finished</li></ul>when is it downloaded?<br />missing:<br /><ul><li>defer download AND execution
  34. async/defer download, execute on demand</li></ul>flickr.com/photos/gevertulley/4771808965/<br />
  35. GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element's text<br />remove comments<br />eval() when invoked<br />awesome for prefetching JS that might (not) be needed<br />http://goo.gl/l5ZLQ<br />
  36. ControlJSa JavaScript module for making scripts load faster<br />just change HTML<br />inline & external scripts<br /><script type="text/cjs" <br />data-cjssrc="main.js"><br /></script><br /><script type="text/cjs"><br />var name = getName();<br /></script><br />
  37. ControlJSa JavaScript module for making scripts load faster<br />download without executing<br /><script type="text/cjs" <br /> data-cjssrc="main.js” <br /> data-cjsexec=false><br /><script><br />Later if/when needed:<br />CJS.execScript(src);<br />
  38. app cache<br />flickr.com/photos/india-nepal-iran/203982474/<br />
  39. yuiblog.com/blog/2007/01/04/performance-research-part-2/<br />
  40. blaze.io/mobile/understanding-mobile-cache-sizes/<br />
  41. app cache<br />offline apps, longer cache<br /><!doctype html><br /><html manifest=“myapp.appcache”><br />myapp.appcache:<br />CACHE MANIFEST<br /># Revision: 1.28<br />CACHE:<br />/images/logo.gif<br />NETWORK:<br />/login.html<br />FALLBACK:<br />/index.html /offline.html<br />Content-Type: text/cache-manifest<br />flickr.com/photos/india-nepal-iran/203982474/<br />
  42. app cache gotchas<br />html docs w/ manifest are cached<br />404 => nothing is cached<br />size: 5MB+<br />must rev manifest to update resources<br />update is served on 2nd reload (?!?!)<br />flickr.com/photos/97657657@N00/1918688483/<br />
  43. app cache<br />reload<br />1<br />2<br />push app <br />logo.gif = <br />user loads app<br />app cache is empty <br />fetch manifest<br />fetch logo.gif<br />app cache =<br />user sees<br />3<br />4<br />5<br />push app <br />logo.gif =<br />rev manifest <br />user loads app<br />app cache = <br />user sees<br />fetch manifest<br />fetch logo.gif<br />app cache =<br />user loads app again<br />app cache = <br />user sees<br />fetch manifest (304)<br />
  44. load twice workaround<br />window.applicationCache.addEventListener('updateready', <br />function(e) {  if ( window.applicationCache.status== <br />window.applicationCache.UPDATEREADY) {<br /> if ( confirm(“Load new content?”) ) {<br /> ...<br />http://www.webdirections.org/blog/get-offline/<br />http://www.html5rocks.com/en/tutorials/appcache/beginner/<br />flickr.com/photos/presley_m/5152304885/<br />
  45. localStorage<br />window.localStorage: <br />setItem()<br />getItem()<br />removeItem()<br />clear()<br />also sessionStorage<br />all popular browsers, 5MB max<br />http://dev.w3.org/html5/webstorage/<br />http://diveintohtml5.org/storage.html<br />flickr.com/photos/bryanpearson/564703455/<br />
  46. localStorage as cache<br />1st doc: write JS & CSS blocks to localStorage<br />JUX.UXBaseControls.252CB7BF: (function(){...<br />JUX.FrameworkCore.A39F6425: (function(){...<br />set cookie with entries & version<br />RMSM=JUX.UXBaseControls.252CB7BF~ JUX.FrameworkCore.A39F6425~<br />later docs: read JS & CSS from localStorage<br />script.text = localStorage.getItem(JUX.UXBaseControls.252CB7BF)<br />http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/<br />flickr.com/photos/nelsoncruz/431244400/<br />
  47. there’s more<br />audio & video tags<br />WebSockets<br />onTouchEnd instead of onClick<br />History <br /><a ping <br />requestAnimationFrame– not timers <br />native JSON parse/stringify<br />flickr.com/photos/dualphoto/2609096047/<br />
  48. Thanks to…<br />Max Firtman<br />Tony Gentilcore<br />Josh Fraser<br />Kyle Scholz<br />StoyanStefanov<br />Lindsey Simon<br />Annie Sullivan<br />Tim Kadlec<br />Paul Irish<br />Brad Neuberg<br />flickr.com/photos/robertvega/3944132320/<br />
  49. 4. Mobile Tools<br />
  50. http://pmuellr.github.com/weinre/<br />
  51. speed matters - WPO<br />mobile winners will be fast<br />mobile performance – reduce reqs, resize images, async JS, app cache, localStorage<br />mobile tools – pcapperf, Jdrop, Blaze.io, Weinre<br />takeaways<br />flickr.com/photos/myklroventine/4062102754/<br />
  52. Top 100: bytes downloaded<br />desktop<br />mobile<br />
  53. Top 100: size & requests<br />desktop<br />mobile<br />
  54. the open web<br />flickr.com/photos/donnr/3696038262/<br />
  55. Steve Souders<br />@souders<br />http://stevesouders.com/docs/sfsv-webperf-20110830.pptx<br />

×