1. High Performance Mobile stevesouders.com/docs/sfsv-webperf-20110830.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

2. Cuzillion SpriteMe YSlow Hammerhead flickr.com/photos/bekahstargazing/318930460/

5. 1. WPO

6. 2004

7. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/ #1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”

8. en.oreilly.com/velocity2009/public/schedule/detail/8523

9. en.oreilly.com/velocity2009/public/schedule/detail/8523

10. Yahoo! 0.4 sec slower traffic  5-9% slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications slideshare.net/stoyan/yslow-20-presentation

11. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!

12. en.oreilly.com/velocity2009/public/schedule/detail/7709 blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!

13. en.oreilly.com/velocity2008/public/schedule/detail/3632

14. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377

15. Site speed in search rank Screen shot of blog post …we've decided to take site speed into account in our search rankings. googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

16. Web Performance Optimization WPO drives traffic improves UX increases revenue reduces costs flickr.com/photos/pedromourapinheiro/3123885534/

17. 2. Why Mobile?

19. slideshare.net/CMSummit/ms-internet-trends060710final

20. slideshare.net/CMSummit/ms-internet-trends060710final

21. nytimes.com/2011/04/18/technology/18mobile.html

22. slideshare.net/CMSummit/ms-internet-trends060710final

29. the road isn’t clear flickr.com/photos/davidandheidi/2320489837/

30. 3. Mobile Best Practices

31. [just a reminder]

32. 3. Mobile Best Practices

33. 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzipcomponents 5. Put stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure ETags 14. Make AJAX cacheable 14 Rules

34. 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzipcomponents 5. Put stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure ETags 14. Make AJAX cacheable 14 Rules

35. 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzipcomponents 5. Put stylesheets at the top 6. Put scripts at the bottom 7. Avoid CSS expressions 8. Make JS and CSS external 9. Reduce DNS lookups 10. Minify JS 11. Avoid redirects 12. Remove duplicate scripts 13. Configure ETags 14. Make AJAX cacheable 14 Rules

36. Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Creating responsive web apps Ben Galbraith, Dion Almaer Writing efficient JavaScript Nicholas Zakas Scaling with Comet Dylan Schiemann Going beyond gzipping Tony Gentilcore Optimizing images StoyanStefanov, Nicole Sullivan

37. Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Creating responsive web apps Ben Galbraith, Dion Almaer Writing efficient JavaScript Nicholas Zakas Scaling with Comet Dylan Schiemann Going beyond gzipping Tony Gentilcore Optimizing images StoyanStefanov, Nicole Sullivan

38. Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Creating responsive web appsBen Galbraith, Dion Almaer Writing efficient JavaScript Nicholas Zakas Scaling with Comet Dylan Schiemann Going beyond gzipping Tony Gentilcore Optimizing images StoyanStefanov, Nicole Sullivan

39. reduce HTTP requests sprites data: URIs CSS3: border-radius box-shadow linear-gradient transform: rotate, scale, skew, translate Canvas, SVG flickr.com/photos/mrd00dman/2358726807/

40. responsive images resize images based on screen size example: Sencha.ioSrc UA classification: DeviceAtlas domain sharding: src[1-4].sencha.io also: http://adaptive-images.com/ http://github.com/filamentgroup/Responsive-Images <imgsrc=‘http://src.sencha.io/http://mydomain.com/logo.gif’> flickr.com/photos/johnkay/3539939004/

43. async/defer download, execute on demandflickr.com/photos/gevertulley/4771808965/

44. GMail Mobile <script type="text/javascript"> /* var ... */ </script> get script DOM element's text remove comments eval() when invoked awesome for prefetching JS that might (not) be needed http://goo.gl/l5ZLQ

45. ControlJSa JavaScript module for making scripts load faster just change HTML inline & external scripts <script type="text/cjs" data-cjssrc="main.js"> </script> <script type="text/cjs"> var name = getName(); </script>

46. ControlJSa JavaScript module for making scripts load faster download without executing <script type="text/cjs" data-cjssrc="main.js” data-cjsexec=false> <script> Later if/when needed: CJS.execScript(src);

47. app cache flickr.com/photos/india-nepal-iran/203982474/

48. yuiblog.com/blog/2007/01/04/performance-research-part-2/

49. blaze.io/mobile/understanding-mobile-cache-sizes/

50. app cache offline apps, longer cache <!doctype html> <html manifest=“myapp.appcache”> myapp.appcache: CACHE MANIFEST # Revision: 1.28 CACHE: /images/logo.gif NETWORK: /login.html FALLBACK: /index.html /offline.html Content-Type: text/cache-manifest flickr.com/photos/india-nepal-iran/203982474/

51. app cache gotchas html docs w/ manifest are cached 404 => nothing is cached size: 5MB+ must rev manifest to update resources update is served on 2nd reload (?!?!) flickr.com/photos/97657657@N00/1918688483/

52. app cache reload 1 2 push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif app cache = user sees 3 4 5 push app logo.gif = rev manifest user loads app app cache = user sees fetch manifest fetch logo.gif app cache = user loads app again app cache = user sees fetch manifest (304)

53. load twice workaround window.applicationCache.addEventListener('updateready', function(e) { if ( window.applicationCache.status== window.applicationCache.UPDATEREADY) { if ( confirm(“Load new content?”) ) { ... http://www.webdirections.org/blog/get-offline/ http://www.html5rocks.com/en/tutorials/appcache/beginner/ flickr.com/photos/presley_m/5152304885/

54. localStorage window.localStorage: setItem() getItem() removeItem() clear() also sessionStorage all popular browsers, 5MB max http://dev.w3.org/html5/webstorage/ http://diveintohtml5.org/storage.html flickr.com/photos/bryanpearson/564703455/

55. localStorage as cache 1st doc: write JS & CSS blocks to localStorage JUX.UXBaseControls.252CB7BF: (function(){... JUX.FrameworkCore.A39F6425: (function(){... set cookie with entries & version RMSM=JUX.UXBaseControls.252CB7BF~ JUX.FrameworkCore.A39F6425~ later docs: read JS & CSS from localStorage script.text = localStorage.getItem(JUX.UXBaseControls.252CB7BF) http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/ flickr.com/photos/nelsoncruz/431244400/

56. there’s more audio & video tags WebSockets onTouchEnd instead of onClick History <a ping requestAnimationFrame– not timers native JSON parse/stringify flickr.com/photos/dualphoto/2609096047/

57. Thanks to… Max Firtman Tony Gentilcore Josh Fraser Kyle Scholz StoyanStefanov Lindsey Simon Annie Sullivan Tim Kadlec Paul Irish Brad Neuberg flickr.com/photos/robertvega/3944132320/

58. 4. Mobile Tools

62. http://pmuellr.github.com/weinre/

63. speed matters - WPO mobile winners will be fast mobile performance – reduce reqs, resize images, async JS, app cache, localStorage mobile tools – pcapperf, Jdrop, Blaze.io, Weinre takeaways flickr.com/photos/myklroventine/4062102754/

67. Top 100: bytes downloaded desktop mobile

68. Top 100: size & requests desktop mobile

69. the open web flickr.com/photos/donnr/3696038262/

70. Steve Souders @souders http://stevesouders.com/docs/sfsv-webperf-20110830.pptx