0
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)

32,890

Published on

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

No Downloads
Views
Total Views
32,890
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
196
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide
  • Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
  • “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
  • This was a ~5 second speed up.
  • Time measurements from real users.
  • http://www.nytimes.com/2011/04/18/technology/18mobile.html
  • Generallyasync &amp; defer scripts start downloading immediately. I wish they’d wait, esp. defer scripts, so they don’t hog connections from the limited pool.
  • GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
  • Transcript of "High Performance Mobile (SF/SV Web Perf)"

    1. 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. 2. Cuzillion<br />SpriteMe<br />YSlow<br />Hammerhead<br />flickr.com/photos/bekahstargazing/318930460/<br />
    3. 3.
    4. 4.
    5. 5. 1. WPO<br />
    6. 6. 2004<br />
    7. 7. 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 />
    8. 8. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
    9. 9. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
    10. 10. 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 />
    11. 11. 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 />
    12. 12. 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 />
    13. 13. en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
    14. 14. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377<br />
    15. 15. 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 />
    16. 16. 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 />
    17. 17. 2. Why Mobile?<br />
    18. 18.
    19. 19. slideshare.net/CMSummit/ms-internet-trends060710final<br />
    20. 20. slideshare.net/CMSummit/ms-internet-trends060710final<br />
    21. 21. nytimes.com/2011/04/18/technology/18mobile.html<br />
    22. 22. slideshare.net/CMSummit/ms-internet-trends060710final<br />
    23. 23.
    24. 24.
    25. 25.
    26. 26.
    27. 27.
    28. 28.
    29. 29. the road isn’t clear<br />flickr.com/photos/davidandheidi/2320489837/<br />
    30. 30. 3. Mobile Best Practices<br />
    31. 31. [just a reminder]<br />
    32. 32. 3. Mobile Best Practices<br />
    33. 33. 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 />
    34. 34. 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 />
    35. 35. 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 />
    36. 36. 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 />
    37. 37. 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 />
    38. 38. 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 />
    39. 39. 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 />
    40. 40. 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 />
    41. 41. script async & defer<br />parsing doesn’t wait for script:<br /><ul><li>async– executed when available
    42. 42. defer – executed when parsing finished</li></ul>when is it downloaded?<br />missing:<br /><ul><li>defer download AND execution
    43. 43. async/defer download, execute on demand</li></ul>flickr.com/photos/gevertulley/4771808965/<br />
    44. 44. 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 />
    45. 45. 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 />
    46. 46. 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 />
    47. 47. app cache<br />flickr.com/photos/india-nepal-iran/203982474/<br />
    48. 48. yuiblog.com/blog/2007/01/04/performance-research-part-2/<br />
    49. 49. blaze.io/mobile/understanding-mobile-cache-sizes/<br />
    50. 50. 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 />
    51. 51. 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 />
    52. 52. 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 />
    53. 53. 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 />
    54. 54. 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 />
    55. 55. 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 />
    56. 56. 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 />
    57. 57. 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 />
    58. 58. 4. Mobile Tools<br />
    59. 59.
    60. 60.
    61. 61.
    62. 62. http://pmuellr.github.com/weinre/<br />
    63. 63. 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 />
    64. 64.
    65. 65.
    66. 66.
    67. 67. Top 100: bytes downloaded<br />desktop<br />mobile<br />
    68. 68. Top 100: size & requests<br />desktop<br />mobile<br />
    69. 69. the open web<br />flickr.com/photos/donnr/3696038262/<br />
    70. 70. Steve Souders<br />@souders<br />http://stevesouders.com/docs/sfsv-webperf-20110830.pptx<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×